/* ==========================================================================
   animations.css — Lightweight, dependency-free motion for the marketing site.
   Progressive enhancement only: content is fully visible without JS/CSS support
   (see the .no-js / .js fallbacks below), and ALL motion is disabled under
   prefers-reduced-motion (base.css neutralizes transitions/animations globally;
   this file adds explicit no-op fallbacks so revealed content never stays hidden).
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   Elements tagged .reveal start slightly offset + transparent, then animate to
   their resting state when JS adds .is-visible (via IntersectionObserver).
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A .reveal-group container animates its CHILDREN (staggered), not itself — so
   when an element is both .reveal and .reveal-group, neutralize the block-level
   offset and let the per-child stagger below do the work (avoids double-fade). */
.reveal-group.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Children start hidden (JS only — see .js gating at the bottom) until the group
   scrolls into view, then fade up in sequence. */
.js .reveal-group:not(.is-visible) > * {
  opacity: 0;
}
.reveal-group.is-visible > * {
  animation: cf-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-group.is-visible > *:nth-child(1) { animation-delay: 0.00s; }
.reveal-group.is-visible > *:nth-child(2) { animation-delay: 0.06s; }
.reveal-group.is-visible > *:nth-child(3) { animation-delay: 0.12s; }
.reveal-group.is-visible > *:nth-child(4) { animation-delay: 0.18s; }
.reveal-group.is-visible > *:nth-child(5) { animation-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(6) { animation-delay: 0.30s; }

@keyframes cf-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   HERO ENTRANCE (runs once on load, no observer needed)
   -------------------------------------------------------------------------- */
.hero-copy > * {
  animation: cf-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.13s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.21s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.29s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.37s; }
.hero-media {
  animation: cf-fade-in 0.9s ease 0.25s both;
}
@keyframes cf-fade-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   MICRO-INTERACTIONS — subtle hover lift on cards & CTAs
   -------------------------------------------------------------------------- */
.pain-card,
.testi-card,
.step {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pain-card:hover,
.testi-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.btn {
  transition: background-color 0.18s ease, transform 0.14s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-cta) 40%, transparent);
}
.link-arrow {
  transition: transform 0.18s ease;
}
.link-arrow:hover {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   FALLBACKS — never let animated content get stuck hidden.
   1) When JS is unavailable (.no-js swapped to .js only if JS runs), show all.
   2) Under reduced-motion, show everything instantly with no transform/anim.
   -------------------------------------------------------------------------- */
.no-js .reveal,
.no-js .reveal-group > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .reveal-group > *,
  .reveal-group.is-visible > *,
  .hero-copy > *,
  .hero-media {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .pain-card:hover,
  .testi-card:hover,
  .btn-primary:hover,
  .link-arrow:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}