/* ============================================================
   ANIMATIONS.CSS — Scroll-driven reveals & micro-interactions
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* ── Scroll Reveal Classes (JS-driven via IntersectionObserver) ─ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delay helpers */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }

/* ── Native CSS Scroll-driven animations (progressive enhancement) ─ */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    /* Reset JS-driven initial state when native is available */
    animation-timeline: view();
    animation-fill-mode: both;
    animation-timing-function: var(--ease-smooth);
    animation-duration: 1ms; /* overridden per class */
  }

  .reveal {
    animation-name: fadeUp;
    animation-duration: 500ms;
    animation-range: entry 0% entry 40%;
  }

  .reveal-left {
    animation-name: slideInLeft;
    animation-duration: 500ms;
    animation-range: entry 0% entry 40%;
  }

  .reveal-right {
    animation-name: slideInRight;
    animation-duration: 500ms;
    animation-range: entry 0% entry 40%;
  }

  .reveal-scale {
    animation-name: scaleUp;
    animation-duration: 500ms;
    animation-range: entry 0% entry 40%;
  }
}

/* ── Hero Animations ─────────────────────────────────────────── */

.hero-ctas {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-smooth) 1.3s forwards;
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .hero-ctas {
    opacity: 1 !important;
    animation: none !important;
  }

}