/* =========================================================
   MOTION — visible-by-default + animation on load + scroll polish
   ========================================================= */

/* ============================================================
   REVEAL — visible by default, animates on FIRST render only
   Uses animation-fill-mode: backwards so initial state only
   exists during the animation delay. No JS needed.
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
  animation: revealUp 880ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Stagger: children inherit incremented delay */
.reveal-stagger > * {
  opacity: 1;
  transform: none;
  animation: revealUp 880ms cubic-bezier(.22,1,.36,1) both;
}
.reveal-stagger > *:nth-child(1)  { animation-delay:  60ms; }
.reveal-stagger > *:nth-child(2)  { animation-delay: 140ms; }
.reveal-stagger > *:nth-child(3)  { animation-delay: 220ms; }
.reveal-stagger > *:nth-child(4)  { animation-delay: 300ms; }
.reveal-stagger > *:nth-child(5)  { animation-delay: 380ms; }
.reveal-stagger > *:nth-child(6)  { animation-delay: 460ms; }
.reveal-stagger > *:nth-child(7)  { animation-delay: 540ms; }
.reveal-stagger > *:nth-child(8)  { animation-delay: 620ms; }

/* Word reveal — for hero headline */
.reveal-words { display: block; }
.reveal-words .word {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: revealUp 1000ms cubic-bezier(.22,1,.36,1) both;
}
.reveal-words .word:nth-child(1)  { animation-delay:  30ms; }
.reveal-words .word:nth-child(2)  { animation-delay:  90ms; }
.reveal-words .word:nth-child(3)  { animation-delay: 150ms; }
.reveal-words .word:nth-child(4)  { animation-delay: 210ms; }
.reveal-words .word:nth-child(5)  { animation-delay: 270ms; }
.reveal-words .word:nth-child(6)  { animation-delay: 330ms; }
.reveal-words .word:nth-child(7)  { animation-delay: 390ms; }
.reveal-words .word:nth-child(8)  { animation-delay: 450ms; }
.reveal-words .word:nth-child(9)  { animation-delay: 510ms; }
.reveal-words .word:nth-child(10) { animation-delay: 570ms; }
.reveal-words .word:nth-child(11) { animation-delay: 630ms; }
.reveal-words .word:nth-child(12) { animation-delay: 690ms; }
.reveal-words .word:nth-child(13) { animation-delay: 750ms; }
.reveal-words .word:nth-child(14) { animation-delay: 810ms; }
.reveal-words .word:nth-child(15) { animation-delay: 870ms; }
.reveal-words .word:nth-child(n+16) { animation-delay: 930ms; }

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* Below-the-fold reveals — opt-in via JS (handled in motion.js).
   When JS marks an element with .scroll-reveal-pending, hide; on scroll, JS removes
   the class and the element fades in. If JS doesn't run, it stays visible. */
.scroll-reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 880ms cubic-bezier(.22,1,.36,1),
              transform 880ms cubic-bezier(.22,1,.36,1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .reveal-words .word, .scroll-reveal-pending {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Numbers (count-up) — tabular nums for stable width */
[data-count] { font-variant-numeric: tabular-nums; }

/* Magnetic CTA */
[data-magnetic] { will-change: transform; }