/* ==========================================================================
   Scroll and entrance animations.

   Everything here is progressive enhancement: the `is-visible` class is added
   by assets/js/animations.js. If JavaScript never runs, the `.no-js` fallback
   at the bottom of this file leaves all content fully visible.
   ========================================================================== */

[data-animate] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
[data-animate].is-visible { opacity: 1; transform: none; }

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="scale-up"]   { transform: scale(0.85); }
[data-animate="zoom-in"]    { transform: scale(0.92); }

/* Children reveal one after another once the container is in view. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.45s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.53s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.61s; }

/* Hero copy animates on load rather than on scroll — it is above the fold.
   Plain CSS keyframes; the spec called for GSAP, but four tweens do not
   justify shipping an animation library. */
.hero__inner > * { animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.hero .eyebrow        { animation-delay: 0.05s; }
.hero h1              { animation-delay: 0.15s; }
.hero__subtitle       { animation-delay: 0.3s; }
.hero__cta            { animation-delay: 0.45s; }
.hero__badges         { animation-delay: 0.6s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.hero__badges li { animation: badgeIn 0.6s ease backwards; }
.hero__badges li:nth-child(1) { animation-delay: 0.68s; }
.hero__badges li:nth-child(2) { animation-delay: 0.79s; }
.hero__badges li:nth-child(3) { animation-delay: 0.9s; }
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll cue at the bottom of the homepage hero. */
.scroll-cue {
  display: grid;
  place-items: center;
  gap: 8px;
  margin-top: 40px;
  color: rgb(255 255 255 / 0.55);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: heroIn 0.9s 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.scroll-cue .icon { width: 20px; height: 20px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/*
  Respect the user's motion preference. This site's audience is often reading
  under stress; motion should never get in the way of the content.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero__rule { width: min(340px, 60%); }
}

/* Without JavaScript nothing adds `is-visible`, so reveal everything. */
.no-js [data-animate], .no-js [data-stagger] > * { opacity: 1 !important; transform: none !important; }