/* ============================================================
   animations.css — Scroll-Driven + Transition Library
   824PR Monorepo Design System

   Uses CSS scroll-driven animations (baseline 2024).
   Works in: Chrome 115+, Safari 18+, Firefox 132+.
   For older browsers: elements are simply visible (graceful).
   ============================================================ */

/* ----------------------------------------------------------
   REVEAL ANIMATIONS — scroll-triggered via view() timeline
   Add .reveal to any element to animate it in on scroll.
   Add .reveal-group to a parent to stagger children.
---------------------------------------------------------- */

@supports (animation-timeline: scroll()) {

  .reveal {
    animation: revealFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  .reveal-left {
    animation: revealFadeRight linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  .reveal-right {
    animation: revealFadeLeft linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  .reveal-scale {
    animation: revealScale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }

  /* Stagger group — children animate in sequence */
  .reveal-group > *:nth-child(1)  { animation-delay:   0ms; }
  .reveal-group > *:nth-child(2)  { animation-delay:  80ms; }
  .reveal-group > *:nth-child(3)  { animation-delay: 160ms; }
  .reveal-group > *:nth-child(4)  { animation-delay: 240ms; }
  .reveal-group > *:nth-child(5)  { animation-delay: 320ms; }
  .reveal-group > *:nth-child(6)  { animation-delay: 400ms; }

}

/* Fallback: always visible for browsers without scroll-timeline */
@supports not (animation-timeline: scroll()) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------
   KEYFRAMES
---------------------------------------------------------- */

@keyframes revealFadeUp {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ----------------------------------------------------------
   PARALLAX — scroll-driven parallax for hero sections
   Usage: add .parallax-slow or .parallax-fast to bg elements
---------------------------------------------------------- */

@supports (animation-timeline: scroll()) {

  .parallax-slow {
    animation: parallaxSlow linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
  }

  .parallax-fast {
    animation: parallaxFast linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
  }

}

@keyframes parallaxSlow {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}

@keyframes parallaxFast {
  from { transform: translateY(0); }
  to   { transform: translateY(-80px); }
}

/* ----------------------------------------------------------
   HOVER TRANSITIONS — reusable classes
---------------------------------------------------------- */

.transition-all {
  transition: all var(--dur-base) var(--ease);
}

.transition-transform {
  transition: transform var(--dur-base) var(--ease);
}

.transition-opacity {
  transition: opacity var(--dur-base) var(--ease);
}

/* Lift on hover — cards, buttons */
.hover-lift {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Scale on hover — icons, thumbnails */
.hover-scale {
  transition: transform var(--dur-base) var(--ease-spring);
}
.hover-scale:hover {
  transform: scale(1.04);
}

/* ----------------------------------------------------------
   HERO ENTRANCE — page load animations
   Add to hero elements for cinematic entrance on load.
---------------------------------------------------------- */

.hero-enter {
  animation: heroEnter var(--dur-scene) var(--ease-out) both;
}

.hero-enter-delay-1 {
  animation: heroEnter var(--dur-scene) var(--ease-out) 100ms both;
}

.hero-enter-delay-2 {
  animation: heroEnter var(--dur-scene) var(--ease-out) 200ms both;
}

.hero-enter-delay-3 {
  animation: heroEnter var(--dur-scene) var(--ease-out) 360ms both;
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Nav entrance */
.nav-enter {
  animation: navEnter var(--dur-slow) var(--ease-out) both;
}

@keyframes navEnter {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------
   REDUCED MOTION — always respect user preference
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .parallax-slow,
  .parallax-fast,
  .hero-enter,
  .hero-enter-delay-1,
  .hero-enter-delay-2,
  .hero-enter-delay-3,
  .nav-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}