/**
 * ANIMATIONS SYSTEM
 * 
 * Usage:
 * Add data-animate attribute to any element you want to animate
 * Optional: Add data-delay="1", data-delay="2", data-delay="3", or data-delay="4" for delays
 * 
 * Example:
 * <div data-animate>Content</div>
 * <div data-animate data-delay="1">Content with delay</div>
 */

/* Base animation state - hidden by default */
[data-animate] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state - triggered when element enters viewport */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variations */
[data-animate][data-delay="1"] {
  transition-delay: 0.1s;
}

[data-animate][data-delay="2"] {
  transition-delay: 0.2s;
}

[data-animate][data-delay="3"] {
  transition-delay: 0.3s;
}

[data-animate][data-delay="4"] {
  transition-delay: 0.4s;
}

/* Ensure delays are also applied when visible */
[data-animate].is-visible[data-delay="1"] {
  transition-delay: 0.1s;
}

[data-animate].is-visible[data-delay="2"] {
  transition-delay: 0.2s;
}

[data-animate].is-visible[data-delay="3"] {
  transition-delay: 0.3s;
}

[data-animate].is-visible[data-delay="4"] {
  transition-delay: 0.4s;
}

/* Hero sections - Blur effect for images */
[data-animate-blur] {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.05);
  transition: opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}

[data-animate-blur].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}