/* ==========================================================================
   ANIMATIONS
   Every motion rule lives inside (prefers-reduced-motion: no-preference).
   With reduced motion the site renders fully static — no reveals stuck hidden.
   Only transform + opacity are animated.
   ========================================================================== */

/* Default: everything visible. Motion is progressive enhancement. */
.reveal, .reveal-child > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll reveal ---- */
  .reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    will-change: transform, opacity;
  }
  .reveal[data-visible="true"] { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }

  /* Horizontal reveals translate on X, which extends the document scroll
     width and causes a sideways scrollbar on narrow screens. Below the
     desktop breakpoint they fall back to the vertical reveal. */
  @media (min-width: 900px) {
    .reveal--left  { transform: translate3d(-28px, 0, 0); }
    .reveal--right { transform: translate3d(28px, 0, 0); }
  }
  .reveal--scale { transform: scale(.96); }

  /* Staggered children — 60ms apart */
  .reveal-child > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  }
  .reveal-child[data-visible="true"] > * { opacity: 1; transform: translate3d(0, 0, 0); }
  .reveal-child[data-visible="true"] > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-child[data-visible="true"] > *:nth-child(2) { transition-delay: 60ms; }
  .reveal-child[data-visible="true"] > *:nth-child(3) { transition-delay: 120ms; }
  .reveal-child[data-visible="true"] > *:nth-child(4) { transition-delay: 180ms; }
  .reveal-child[data-visible="true"] > *:nth-child(5) { transition-delay: 240ms; }
  .reveal-child[data-visible="true"] > *:nth-child(6) { transition-delay: 300ms; }
  .reveal-child[data-visible="true"] > *:nth-child(7) { transition-delay: 360ms; }
  .reveal-child[data-visible="true"] > *:nth-child(8) { transition-delay: 420ms; }

  /* ---- Hero entrance: eyebrow -> headline -> lead -> actions ---- */
  .hero__inner > * { opacity: 0; transform: translate3d(0, 26px, 0); animation: rise 900ms var(--ease-out) forwards; }
  .hero__inner > *:nth-child(1) { animation-delay: 120ms; }
  .hero__inner > *:nth-child(2) { animation-delay: 240ms; }
  .hero__inner > *:nth-child(3) { animation-delay: 380ms; }
  .hero__inner > *:nth-child(4) { animation-delay: 520ms; }
  .hero__inner > *:nth-child(5) { animation-delay: 660ms; }

  @keyframes rise { to { opacity: 1; transform: translate3d(0, 0, 0); } }

  /* Word-by-word mask reveal on the hero headline */
  .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .word > span {
    display: inline-block;
    transform: translateY(105%);
    animation: word-up 820ms var(--ease-out) forwards;
  }
  @keyframes word-up { to { transform: translateY(0); } }

  /* ---- Ambient float on decorative elements ---- */
  .float { animation: float 9s ease-in-out infinite; }
  .float--slow { animation-duration: 13s; }
  .float--delay { animation-delay: -4s; }
  @keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -14px, 0); }
  }

  /* ---- Magnetic button (JS sets --mx/--my) ---- */
  .magnetic { transition: transform 220ms var(--ease-out); }
  .magnetic[data-magnetic="true"] { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }

  /* ---- Parallax layers (JS writes --py) ---- */
  .parallax { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

  /* ---- FLIP transition for filtered grids ---- */
  .flip { transition: transform 420ms var(--ease-out), opacity 300ms ease; }
  .flip--enter { opacity: 0; transform: scale(.94); }
}

/* Reduced motion: neutralise transforms that JS may have written inline */
@media (prefers-reduced-motion: reduce) {
  .parallax, .magnetic, .float, .tilt {
    transform: none !important;
    animation: none !important;
  }
  .word > span { transform: none; }
}