/* animate.css — entrance and scroll-reveal animations for Quiver's public pages.
 *
 * Two-layer system:
 *
 *   Layer 1 — Hero choreography: CSS keyframes tied to well-known classes,
 *   fires on page load with no JS dependency. animation-fill-mode: both keeps
 *   each element in its from-state until its delay fires, so there is no
 *   layout flash between render and animation start.
 *
 *   Layer 2 — Scroll reveals: animate.js adds body.anim-ready after setting
 *   up IntersectionObserver. That class activates the initial hidden state on
 *   [data-anim] elements. Without JS, elements remain fully visible. As each
 *   element enters the viewport, animate.js adds .is-visible and unobserves.
 *
 * Easing: cubic-bezier(0.22, 1, 0.36, 1) — matches --ease-out in tokens.css.
 * All motion respects prefers-reduced-motion.
 */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes q-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes q-fade-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes q-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Hero page-load choreography ──────────────────────────────────────── */

/* Marketing + VS page hero (shared classes) */
.home-hero__title {
  animation: q-fade-up 580ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-hero__subhead {
  animation: q-fade-up 580ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
.home-hero__cta-row {
  animation: q-fade-up 560ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}
.home-hero__cta-note {
  animation: q-fade 480ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}
.home-hero__trust {
  animation: q-fade 480ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
/* The preview artifact slides in from the right — reinforces the
   left-to-right reading direction of the hero layout. */
.home-artifact {
  animation: q-fade-right 700ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

/* Pricing page hero */
.pricing-hero__title {
  animation: q-fade-up 580ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pricing-hero__sub {
  animation: q-fade-up 580ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
.pricing-hero__free-note {
  animation: q-fade 480ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

/* Guide page (h1 carries .hero-h1 but not .home-hero__title) */
.guide-prose .hero-h1 {
  animation: q-fade-up 580ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guide-meta {
  animation: q-fade 480ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}
.guide-toc {
  animation: q-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

/* ── Scroll reveals ──────────────────────────────────────────────────── */

/* Initial hidden state — only active when JS has loaded and set body.anim-ready */
body.anim-ready [data-anim] {
  opacity: 0;
  transform: translateY(20px);
}
body.anim-ready [data-anim="slide-right"] {
  transform: translateX(32px);
}
/* Figures and wide elements fade without vertical movement */
body.anim-ready [data-anim="fade"] {
  transform: none;
}

/* Visible state: animate.js adds .is-visible when the element enters the viewport */
body.anim-ready [data-anim].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity  520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stagger siblings with data-delay="1" through "5".
   All siblings enter the viewport together; CSS delay creates the cascade. */
body.anim-ready [data-anim][data-delay="1"].is-visible { transition-delay:   0ms; }
body.anim-ready [data-anim][data-delay="2"].is-visible { transition-delay:  80ms; }
body.anim-ready [data-anim][data-delay="3"].is-visible { transition-delay: 160ms; }
body.anim-ready [data-anim][data-delay="4"].is-visible { transition-delay: 240ms; }
body.anim-ready [data-anim][data-delay="5"].is-visible { transition-delay: 320ms; }

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .home-hero__title,
  .home-hero__subhead,
  .home-hero__cta-row,
  .home-hero__cta-note,
  .home-hero__trust,
  .home-artifact,
  .pricing-hero__title,
  .pricing-hero__sub,
  .pricing-hero__free-note,
  .guide-prose .hero-h1,
  .guide-meta,
  .guide-toc {
    animation: none;
  }

  body.anim-ready [data-anim],
  body.anim-ready [data-anim].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}