/**
 * Scroll Reveal Animations
 * Premium animation styles for IntersectionObserver-based reveals
 */

/* Base reveal classes - Hidden state */
.reveal,
.reveal-right,
.reveal-scale,
[data-reveal],
[data-animate="fade-in"],
[data-animate="text-reveal"],
[data-animate="scale-up"],
[data-animate="slide-left"],
[data-animate="slide-right"],
[data-animate="slide-up"],
[data-animate="card"],
[data-animate="blur"] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Reveal from bottom (default) */
.reveal {
  transform: translateY(40px);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from right */
.reveal-right {
  transform: translateX(60px);
}

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

/* Reveal with scale */
.reveal-scale {
  transform: scale(0.9);
}

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

/* Custom reveal with data attribute */
[data-reveal] {
  transform: translateY(30px);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger container - Ensure children are positioned correctly */
[data-stagger] {
  /* Container itself fades in */
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-stagger].revealed {
  opacity: 1;
}

/* Performance optimizations */
.reveal,
.reveal-right,
.reveal-scale,
[data-reveal],
[data-stagger] {
  will-change: opacity, transform;
}

/* Remove will-change after animation to save resources */
.reveal.revealed,
.reveal-right.revealed,
.reveal-scale.revealed,
[data-reveal].revealed,
[data-stagger].revealed {
  will-change: auto;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-right,
  .reveal-scale,
  [data-reveal],
  [data-stagger] {
    transition: opacity 0.3s ease;
    transform: none !important;
  }

  .reveal.revealed,
  .reveal-right.revealed,
  .reveal-scale.revealed,
  [data-reveal].revealed,
  [data-stagger].revealed {
    opacity: 1;
    transform: none !important;
  }
}

/* Mobile optimizations - Faster animations */
@media (max-width: 768px) {
  .reveal,
  .reveal-right,
  .reveal-scale,
  [data-reveal] {
    transition-duration: 0.6s;
  }

  .reveal {
    transform: translateY(20px);
  }

  .reveal-right {
    transform: translateX(30px);
  }
}