/* ============================================================
   Animations — hero laptop lid-open, reveals, keyframes; all
   collapsing to a clean static state under reduced motion.
   ============================================================ */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mask-up { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* The MacBook lid opening — the hero moment. */
@keyframes lid-open {
  0%   { transform: rotateX(-88deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes screen-wake { from { opacity: 0; } to { opacity: 1; } }

/* Hero headline: masked lines sliding up. */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mask-line > span { display: block; transform: translateY(112%); }
.is-ready .mask-line > span { animation: mask-up 1s var(--spring) forwards; animation-delay: var(--d, 0s); }

/* Generic scroll reveal. */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 1s var(--spring);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* Reduced motion: everything visible, still; laptop already open. */
@media (prefers-reduced-motion: reduce) {
  .is-ready .mask-line > span, .mask-line > span { animation: none; transform: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .laptop-lid { animation: none !important; transform: rotateX(0deg) !important; }
  .laptop { animation: none !important; }
  .screen-ui { animation: none !important; opacity: 1 !important; }
  .float { animation: none !important; }
  .spotlight { display: none; }
  * { scroll-behavior: auto !important; }
}