/* motion.css — keyframes, reveal scaffolding, reduced-motion fallbacks. */

/* Scroll reveal — JS toggles `is-revealed`. */
[data-frh-reveal] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--motion-duration-reveal) var(--motion-ease-entrance),
              transform var(--motion-duration-reveal) var(--motion-ease-entrance);
}
[data-frh-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
/* Above-the-fold grids reveal instantly (no fade) so users don't perceive
   "cards hidden until I scroll" while the IO callback + 500 ms transition
   complete. main.js adds .is-revealed-instant to anything already on screen
   at page-load. */
[data-frh-reveal].is-revealed-instant > *,
[data-reveal-stagger].is-revealed-instant > * {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* Staggered children reveal (Pick3-Lessons §8): add data-reveal-stagger to any
   grid container; cards fade in with a cascading delay. The IntersectionObserver
   in motion-wrapper.js adds .is-revealed when it scrolls into view. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay:  80ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 560ms; }

/* Defensive guard: hero displays must always be visible regardless of any
   motion-system bug (Pick3-Lessons §10 — letter-rise spring config once left
   titles stuck at opacity:0). Hero choreography overrides this only when
   data-frh-hero is on the parent. */
.hero__title-main,
.hero__title-sub {
  opacity: 1;
}

/* Hero choreography — initial hidden state. JS removes after first paint. */
[data-frh-hero] .hero__pill,
[data-frh-hero] .hero__title,
[data-frh-hero] .hero__lead,
[data-frh-hero] .hero__cta {
  opacity: 0;
  transform: translateY(20px);
}

/* Split-flap animation classes (digit-flip.js applies / removes). */
@keyframes frh-flip-out {
  from { transform: rotateX(0); opacity: 1; }
  to   { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes frh-flip-in {
  from { transform: rotateX(90deg);  opacity: 0; }
  to   { transform: rotateX(0);      opacity: 1; }
}
.digit__inner.is-flipping-out {
  animation: frh-flip-out var(--motion-duration-flip) var(--motion-ease-flip) forwards;
}
.digit__inner.is-flipping-in {
  animation: frh-flip-in var(--motion-duration-flip) var(--motion-ease-flip) forwards;
}

/* Cross-fade fallback for ≥5-digit numbers / reduced motion. */
.calculator__result-number.is-fading {
  transition: opacity 180ms var(--motion-ease-standard);
  opacity: 0.4;
}

/* Drawer overlay */
.site-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
  z-index: 150;
}
.site-drawer-overlay.is-active { opacity: 1; pointer-events: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .card:active,
  .btn--primary:hover, .btn--primary:active,
  .btn--secondary:hover, .btn--secondary:active {
    transform: none;
    box-shadow: var(--shadow-hard-md);
  }
  .marquee__track { transform: none !important; }
  [data-frh-reveal] > *,
  [data-frh-hero] .hero__pill,
  [data-frh-hero] .hero__title,
  [data-frh-hero] .hero__lead,
  [data-frh-hero] .hero__cta,
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .digit__inner.is-flipping-out,
  .digit__inner.is-flipping-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}