/**
 * Scroll Reveal CSS
 * 
 * Base styles and animation classes for scroll-triggered reveals.
 * Works with existing CSS animations - just add your animation class alongside 'reveal'.
 */

/* Base reveal element - initially hidden */
.reveal {
  /* Your existing styles go here - this class doesn't override anything */
}

/* Hidden state - element is not visible */
.reveal-hidden {
  opacity: 0;
  visibility: hidden;
  /* Remove any transforms that might interfere */
  transform: none;
}

/* Visible state - element is revealed */
.reveal-visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Common Animation Classes
   Add these alongside 'reveal' class
   ============================================ */

/* Fade In Animation */
.reveal.fade-in {
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.fade-in {
  opacity: 0;
}

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

/* Slide Up Animation */
.reveal.slide-up {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.slide-up {
  opacity: 0;
  transform: translateY(30px);
}

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

/* Slide Down Animation */
.reveal.slide-down {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.slide-down {
  opacity: 0;
  transform: translateY(-30px);
}

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

/* Slide Left Animation */
.reveal.slide-left {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.slide-left {
  opacity: 0;
  transform: translateX(30px);
}

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

/* Slide Right Animation */
.reveal.slide-right {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.slide-right {
  opacity: 0;
  transform: translateX(-30px);
}

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

/* Scale Up Animation */
.reveal.scale-up {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.scale-up {
  opacity: 0;
  transform: scale(0.95);
}

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

/* Scale Down Animation */
.reveal.scale-down {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.scale-down {
  opacity: 0;
  transform: scale(1.05);
}

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

/* Fade + Scale Animation */
.reveal.fade-scale {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.fade-scale {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

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

/* Blur Fade Animation */
.reveal.blur-fade {
  transition: opacity 0.6s ease-out, filter 0.6s ease-out, visibility 0.6s ease-out;
}

.reveal-hidden.blur-fade {
  opacity: 0;
  filter: blur(10px);
}

.reveal-visible.blur-fade {
  opacity: 1;
  filter: blur(0);
}

/* ============================================
   Staggered Animations
   Add delay classes for sequential reveals
   ============================================ */

.reveal.delay-100 {
  transition-delay: 0.1s;
}

.reveal.delay-200 {
  transition-delay: 0.2s;
}

.reveal.delay-300 {
  transition-delay: 0.3s;
}

.reveal.delay-400 {
  transition-delay: 0.4s;
}

.reveal.delay-500 {
  transition-delay: 0.5s;
}

.reveal.delay-600 {
  transition-delay: 0.6s;
}

.reveal.delay-700 {
  transition-delay: 0.7s;
}

.reveal.delay-800 {
  transition-delay: 0.8s;
}

/* ============================================
   Custom Duration
   Override default 0.6s duration
   ============================================ */

.reveal.duration-fast {
  transition-duration: 0.3s;
}

.reveal.duration-normal {
  transition-duration: 0.6s;
}

.reveal.duration-slow {
  transition-duration: 0.9s;
}

.reveal.duration-slower {
  transition-duration: 1.2s;
}

/* ============================================
   Performance Optimizations
   ============================================ */

.reveal {
  /* Enable hardware acceleration */
  will-change: opacity, transform, filter;
  /* Prevent layout shifts */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-hidden,
  .reveal-visible {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}