/* =============================================================================
   Chue motion — entrance + scroll reveal + ring draw.
   Emil-Kowalski school: restrained, fast, eased. Gated on html.js so content
   is fully visible without JS, and pinned to final state under reduced motion.
   ============================================================================= */

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

  /* Hero: copy staggers up, the product stage rises a beat later. */
  html.js .hero__copy > *,
  html.js .stage {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  html.js .stage { transform: translateY(26px) scale(0.984); }
  html.js .hero__copy.is-visible > * { opacity: 1; transform: none; }
  html.js .stage.is-visible { opacity: 1; transform: none; }

  html.js .hero__copy.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
  html.js .hero__copy.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
  html.js .hero__copy.is-visible > *:nth-child(3) { transition-delay: 0.20s; }
  html.js .hero__copy.is-visible > *:nth-child(4) { transition-delay: 0.28s; }
  html.js .hero__copy.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
  html.js .stage.is-visible { transition-delay: 0.14s; }

  /* Scroll reveal for everything below the fold. */
  html.js .section__head,
  html.js .split__media,
  html.js .compare,
  html.js .sources__row,
  html.js .cta__band,
  html.js .faq__list,
  html.js .feature-list,
  html.js .vs {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  html.js .is-visible.section__head,
  html.js .is-visible.split__media,
  html.js .is-visible.compare,
  html.js .is-visible.sources__row,
  html.js .is-visible.cta__band,
  html.js .is-visible.faq__list,
  html.js .is-visible.feature-list,
  html.js .is-visible.vs { opacity: 1; transform: none; }

  /* Score rings draw their stroke when revealed. */
  html.js .draw {
    stroke-dashoffset: var(--circ);
    transition: stroke-dashoffset 1.3s var(--ease) 0.25s;
  }
  html.js .is-visible .draw,
  html.js .stage.is-visible .draw,
  html.js .split__media.is-visible .draw { stroke-dashoffset: var(--off); }
}

/* Reduced motion: pin everything to its final, visible state. */
@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .stage, .section__head, .split__media, .compare,
  .sources__row, .cta__band, .faq__list, .feature-list, .vs {
    opacity: 1 !important; transform: none !important;
  }
  .draw { stroke-dashoffset: var(--off) !important; }
}