/**
 * 🎬 Scroll Reveal Animations
 * Плавные анимации появления элементов
 */

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
  will-change: opacity, transform;
}

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

/* Stagger delays */
.scroll-reveal[data-delay="1"] { transition-delay: 60ms; }
.scroll-reveal[data-delay="2"] { transition-delay: 120ms; }
.scroll-reveal[data-delay="3"] { transition-delay: 180ms; }
.scroll-reveal[data-delay="4"] { transition-delay: 240ms; }
.scroll-reveal[data-delay="5"] { transition-delay: 300ms; }

/* Animation variants */
.scroll-reveal-fade {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--easing-default);
}

.scroll-reveal-fade.visible {
  opacity: 1;
}

.scroll-reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

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

.scroll-reveal-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

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

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

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

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

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

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

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

.scroll-reveal-rotate {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
  transition: opacity var(--motion-slow) var(--easing-default),
              transform var(--motion-slow) var(--easing-default);
}

.scroll-reveal-rotate.visible {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Mask reveal */
.scroll-reveal-mask {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--motion-slow) var(--easing-default),
              clip-path var(--motion-slow) var(--easing-default);
}

.scroll-reveal-mask.visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-fade,
  .scroll-reveal-up,
  .scroll-reveal-down,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .scroll-reveal-rotate,
  .scroll-reveal-mask {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}