/* CSS-Only Scroll Animations 
   This implements scroll-based animations without JavaScript */

/* Base animation settings */
[class*="reveal"] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Apply animations when elements are in viewport using CSS only */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-left, .reveal-right, .reveal-up {
    animation-play-state: paused;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
  }
  
  /* Use animation-play-state to control animation timing */
  .reveal { animation-name: fadeIn; }
  .reveal-left { animation-name: slideInLeft; }
  .reveal-right { animation-name: slideInRight; }
  .reveal-up { animation-name: slideInUp; }
  
  /* Hero section - always visible */
  .hero .reveal,
  .hero .reveal-left,
  .hero .reveal-right,
  .hero .reveal-up {
    animation-play-state: running;
  }
  
  /* About section */
  .about:target .reveal,
  .about:target .reveal-left,
  .about:target .reveal-right,
  .about:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Services section */
  .services:target .reveal,
  .services:target .reveal-left,
  .services:target .reveal-right,
  .services:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Process section */
  .process:target .reveal,
  .process:target .reveal-left,
  .process:target .reveal-right,
  .process:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Benefits section */
  .benefits:target .reveal,
  .benefits:target .reveal-left,
  .benefits:target .reveal-right,
  .benefits:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Testimonials section */
  .testimonials:target .reveal,
  .testimonials:target .reveal-left,
  .testimonials:target .reveal-right,
  .testimonials:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Contact section */
  .contact:target .reveal,
  .contact:target .reveal-left,
  .contact:target .reveal-right,
  .contact:target .reveal-up {
    animation-play-state: running;
  }
  
  /* Default behavior - make all animations visible */
  @media (min-width: 1px) {
    /* This applies to all screen sizes and makes all animations visible by default with staggered delays */
    .reveal { animation-play-state: running; }
    .reveal-left { animation-play-state: running; animation-delay: 0.2s; }
    .reveal-right { animation-play-state: running; animation-delay: 0.4s; }
    .reveal-up { animation-play-state: running; animation-delay: 0.3s; }
    
    /* Apply cascading delay to sequential elements */
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.3s; }
    .delay-300 { animation-delay: 0.5s; }
    .delay-400 { animation-delay: 0.7s; }
    .delay-500 { animation-delay: 0.9s; }
    .delay-600 { animation-delay: 1.1s; }
    .delay-700 { animation-delay: 1.3s; }
    .delay-800 { animation-delay: 1.5s; }
  }
}

/* Fallback for when JS is disabled or animations are not preferred */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-up {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Make all animations immediately visible when printing */
@media print {
  .reveal, .reveal-left, .reveal-right, .reveal-up {
    opacity: 1;
    transform: none;
    animation: none;
  }
}