/* AOS (Animate On Scroll) - Fade Up Animation with Delay (Pure CSS, No JS)
  This version uses only CSS and works by toggling a class (e.g., .aos-animate) on scroll with JS.
  When .aos-animate is removed (element leaves viewport), the element fades out and moves down again.
  For demo, you can manually add/remove .aos-animate to see the effect.
*/

[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="fade-up"][data-aos-delay="100"] {
  transition-delay: 100ms;
}
[data-aos="fade-up"][data-aos-delay="200"] {
  transition-delay: 200ms;
}
[data-aos="fade-up"][data-aos-delay="300"] {
  transition-delay: 300ms;
}
[data-aos="fade-up"][data-aos-delay="400"] {
  transition-delay: 400ms;
}
[data-aos="fade-up"][data-aos-delay="500"] {
  transition-delay: 500ms;
}
[data-aos="fade-up"][data-aos-delay="600"] {
  transition-delay: 600ms;
}
[data-aos="fade-up"][data-aos-delay="700"] {
  transition-delay: 700ms;
}
[data-aos="fade-up"][data-aos-delay="800"] {
  transition-delay: 800ms;
}
[data-aos="fade-up"][data-aos-delay="900"] {
  transition-delay: 900ms;
}
[data-aos="fade-up"][data-aos-delay="1000"] {
  transition-delay: 1000ms;
}