/**
 * Scroll Reveal Animation System
 * Isolated & Reusable Solution
 * Zero impact on other components
 */

/* CSS Variables for easy customization */
:root {
  --sr-duration: 0.8s;
  --sr-delay: 0.1s;
  --sr-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base animation definitions */
@keyframes sr-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sr-slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sr-slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sr-slideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sr-slideRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Scroll Reveal Classes */

/* Initial state: hidden */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
}

/* Revealed state: visible with animation */
.scroll-reveal.revealed {
  animation: sr-slideUp var(--sr-duration) var(--sr-easing) forwards;
}

/* Variants */
.scroll-reveal.fade {
  transform: none;
}

.scroll-reveal.fade.revealed {
  animation: sr-fadeIn var(--sr-duration) var(--sr-easing) forwards;
}

.scroll-reveal.slide-up.revealed {
  animation: sr-slideUp var(--sr-duration) var(--sr-easing) forwards;
}

.scroll-reveal.slide-down.revealed {
  animation: sr-slideDown var(--sr-duration) var(--sr-easing) forwards;
}

.scroll-reveal.slide-left.revealed {
  animation: sr-slideLeft var(--sr-duration) var(--sr-easing) forwards;
}

.scroll-reveal.slide-right.revealed {
  animation: sr-slideRight var(--sr-duration) var(--sr-easing) forwards;
}

.scroll-reveal.scale.revealed {
  animation: sr-scale var(--sr-duration) var(--sr-easing) forwards;
}

/* Staggered animation delays */
.scroll-reveal.delay-1 {
  animation-delay: calc(var(--sr-delay) * 1);
}

.scroll-reveal.delay-2 {
  animation-delay: calc(var(--sr-delay) * 2);
}

.scroll-reveal.delay-3 {
  animation-delay: calc(var(--sr-delay) * 3);
}

.scroll-reveal.delay-4 {
  animation-delay: calc(var(--sr-delay) * 4);
}

.scroll-reveal.delay-5 {
  animation-delay: calc(var(--sr-delay) * 5);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
  }

  .scroll-reveal.revealed {
    animation: none;
  }

  .scroll-reveal.fade.revealed,
  .scroll-reveal.slide-up.revealed,
  .scroll-reveal.slide-down.revealed,
  .scroll-reveal.slide-left.revealed,
  .scroll-reveal.slide-right.revealed,
  .scroll-reveal.scale.revealed {
    animation: none;
  }
}