/**
 * Scroll Animation Styles
 * Subtle fade-in animations triggered on scroll
 */

/* Base animation class - elements start hidden */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Active state when element is in viewport */
.fade-in-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variations for staggered animations */
.fade-in-scroll[data-delay="100"] {
  transition-delay: 0.1s;
}

.fade-in-scroll[data-delay="200"] {
  transition-delay: 0.2s;
}

.fade-in-scroll[data-delay="300"] {
  transition-delay: 0.3s;
}

.fade-in-scroll[data-delay="400"] {
  transition-delay: 0.4s;
}

.fade-in-scroll[data-delay="500"] {
  transition-delay: 0.5s;
}

.fade-in-scroll[data-delay="600"] {
  transition-delay: 0.6s;
}

/* Alternative animation - fade in from left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Alternative animation - fade in from right */
.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Scale animation for images */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .fade-in-scroll,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}