/*
 * Formless Flow — Scroll-Driven Animations
 * CSS-native animation layer using animation-timeline: view()
 * Zero JavaScript — compositor-thread, 60fps baseline
 *
 * Browser support (June 2026):
 * - Chrome/Edge 115+ : ✅ Full support
 * - Safari 18+        : ⚠️ Partial (some timeline features behind flag)
 * - Firefox           : ⚠️ Behind layout.css.scroll-driven-animations.enabled flag
 *
 * Graceful degradation: unsupported browsers show content immediately (no animation).
 * prefers-reduced-motion: all animations disabled.
 *
 * Interop 2026: scroll-driven animations are a focus area → cross-browser by year-end.
 */

/* ============================================================
   Keyframes
   ============================================================ */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ============================================================
   Scroll-Driven Animation Classes
   ============================================================ */

/* ---- Section reveals (trigger on scroll into viewport) ---- */
.reveal-up {
  animation: fade-up 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 15% entry 85%;
}

.reveal-in {
  animation: fade-in 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 20% entry 80%;
}

.reveal-right {
  animation: fade-right 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 15% entry 85%;
}

.reveal-left {
  animation: fade-left 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 15% entry 85%;
}

.reveal-scale {
  animation: scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-timeline: view();
  animation-range: entry 20% entry 80%;
}

.reveal-fade {
  animation: fade-in 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 25% entry 85%;
}

/* ---- Hero blur-in (stronger entrance) ---- */
.reveal-hero {
  animation: blur-in 0.9s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}

/* ============================================================
   Staggered Delays — for card lists
   ============================================================ */

.stagger-1  { animation-delay: 0s; }
.stagger-2  { animation-delay: 0.08s; }
.stagger-3  { animation-delay: 0.16s; }
.stagger-4  { animation-delay: 0.24s; }
.stagger-5  { animation-delay: 0.32s; }
.stagger-6  { animation-delay: 0.40s; }
.stagger-7  { animation-delay: 0.48s; }
.stagger-8  { animation-delay: 0.56s; }

/* ============================================================
   Section header reveals (heading + subtitle stagger)
   ============================================================ */

.section-header-reveal :first-child {
  animation: fade-up 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 20% entry 80%;
}

.section-header-reveal :last-child {
  animation: fade-up 0.6s 0.1s ease-out both;
  animation-timeline: view();
  animation-range: entry 20% entry 80%;
}

/* ============================================================
   CTA pulse — subtle attention draw on button
   ============================================================ */

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0.314rem 0.472rem oklch(0.05 0.01 197 / 0.099); }
  50%      { box-shadow: 0 0.509rem 0.763rem oklch(0.05 0.01 197 / 0.107),
                       0 0 0 0.5rem oklch(0.5 0.0761 207.14 / 0.12); }
}

.cta-pulse {
  animation: cta-pulse 3s ease-in-out infinite;
}

/* ============================================================
   Accessibility — respect user motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-up,
  .reveal-in,
  .reveal-right,
  .reveal-left,
  .reveal-scale,
  .reveal-fade,
  .reveal-hero {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .cta-pulse {
    animation: none !important;
  }
}

/* ============================================================
   Progressive enhancement — JS fallback for unsupported browsers
   ============================================================ */

/* Browsers that don't support animation-timeline will ignore the
   scroll-driven animations and show content without animation.
   This is acceptable graceful degradation.

   If you want a JS-based IntersectionObserver fallback for older
   browsers, add it in a <script> that checks:
     CSS.supports('animation-timeline', 'view()')
   and adds a .revealed class on intersection. */