/* scroll-reveal.css — Reveal animations on scroll */

/* Base reveal state */
.reveal-pending {
  opacity: 0;
}

.reveal-visible {
  animation: none;
  opacity: 1;
}

/* Fade variants */
[data-reveal="fade"],
.reveal-fade {
  opacity: 0;
  animation: reveal-fade 0.6s ease-out forwards;
}

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

/* Fade up */
[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal-fade-up 0.6s ease-out forwards;
}

@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade down */
[data-reveal="fade-down"] {
  opacity: 0;
  transform: translateY(-30px);
  animation: reveal-fade-down 0.6s ease-out forwards;
}

@keyframes reveal-fade-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade left */
[data-reveal="fade-left"] {
  opacity: 0;
  transform: translateX(-30px);
  animation: reveal-fade-left 0.6s ease-out forwards;
}

@keyframes reveal-fade-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade right */
[data-reveal="fade-right"] {
  opacity: 0;
  transform: translateX(30px);
  animation: reveal-fade-right 0.6s ease-out forwards;
}

@keyframes reveal-fade-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale */
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.9);
  animation: reveal-scale 0.6s ease-out forwards;
}

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

/* Stagger effect for multiple elements */
[data-reveal-delay="1"] {
  animation-delay: 0.1s;
}

[data-reveal-delay="2"] {
  animation-delay: 0.2s;
}

[data-reveal-delay="3"] {
  animation-delay: 0.3s;
}

[data-reveal-delay="4"] {
  animation-delay: 0.4s;
}

[data-reveal-delay="5"] {
  animation-delay: 0.5s;
}

/* Utility classes for direct use */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal-fade-up 0.6s ease-out forwards;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  animation: reveal-scale 0.6s ease-out forwards;
}

/* Slow variants */
[data-reveal-speed="slow"] {
  animation-duration: 0.8s;
}

[data-reveal-speed="fast"] {
  animation-duration: 0.4s;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal-fade,
  .reveal-up,
  .reveal-scale {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile optimizations */
@media (max-width: 600px) {
  [data-reveal="fade-up"],
  [data-reveal="fade-down"],
  [data-reveal="fade-left"],
  [data-reveal="fade-right"] {
    animation-duration: 0.5s;
  }
}