/* ============================================================
   ANIMATIONS.CSS — Scroll reveals, hero stagger, font loading
   Skymin Design System · skym.in
   ============================================================ */

/* --- Scroll Reveal Base ----------------------------------- */

.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.js-reveal-stagger > .js-reveal:nth-child(1) { transition-delay: 0ms; }
.js-reveal-stagger > .js-reveal:nth-child(2) { transition-delay: 80ms; }
.js-reveal-stagger > .js-reveal:nth-child(3) { transition-delay: 160ms; }
.js-reveal-stagger > .js-reveal:nth-child(4) { transition-delay: 240ms; }
.js-reveal-stagger > .js-reveal:nth-child(5) { transition-delay: 320ms; }
.js-reveal-stagger > .js-reveal:nth-child(6) { transition-delay: 400ms; }

/* --- Hero Entrance — Premium Apple-style stagger ---------- */
/* Each element fades up sequentially with increasing delays */

.hero__eyebrow {
  opacity: 0;
  transform: translateY(16px);
  animation: heroReveal 800ms var(--ease-out-expo) 200ms forwards;
}

.hero__title {
  opacity: 0;
  transform: translateY(20px);
}

/* Each line staggers via span wrappers on <br> separated lines */
.hero__title .line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  animation: heroReveal 800ms var(--ease-out-expo) forwards;
}

.hero__title .line:nth-child(1) { animation-delay: 350ms; }
.hero__title .line:nth-child(2) { animation-delay: 500ms; }
.hero__title .line:nth-child(3) { animation-delay: 650ms; }

/* Fallback for unwrapped hero title */
.hero__title:not(:has(.line)) {
  animation: heroReveal 800ms var(--ease-out-expo) 350ms forwards;
}

.hero__subtitle {
  opacity: 0;
  transform: translateY(16px);
  animation: heroReveal 900ms var(--ease-out-expo) 800ms forwards;
}

.hero__ctas {
  opacity: 0;
  transform: translateY(16px);
  animation: heroReveal 800ms var(--ease-out-expo) 1000ms forwards;
}

.hero__trust {
  opacity: 0;
  transform: translateY(12px);
  animation: heroReveal 700ms var(--ease-out-expo) 1200ms forwards;
}

.hero__visual {
  opacity: 0;
  transform: scale(0.96);
  animation: heroVisualReveal 1200ms var(--ease-out-expo) 500ms forwards;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroVisualReveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Section Headlines — Stagger on scroll reveal --------- */
.section__header .section__number {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
  transition-delay: 0ms;
}

.section__header .section__headline {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
  transition-delay: 120ms;
}

.section__header .section__subheadline {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
  transition-delay: 240ms;
}

/* When parent .js-reveal gets .is-visible, cascade the children */
.js-reveal.is-visible .section__number,
.js-reveal.is-visible .section__headline,
.js-reveal.is-visible .section__subheadline {
  opacity: 1;
  transform: translateY(0);
}



/* --- Reduced Motion -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__title .line,
  .hero__subtitle,
  .hero__ctas,
  .hero__trust,
  .hero__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .section__header .section__number,
  .section__header .section__headline,
  .section__header .section__subheadline {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fonts-loading h1,
  .fonts-loading h2,
  .fonts-loading h3 {
    filter: none;
    opacity: 1;
  }
}