/* --- UNIVERSAL ANIMATION ENGINE --- */

/* 
  The main class our JavaScript will look for.
  It sets up the initial "hidden" state and defines CSS variables for customization.
  These variables will be overridden by our JS based on data-attributes.
*/
.aos-animate {
  opacity: 0;
  transition: opacity var(--aos-duration, 800ms) var(--aos-easing, ease-out) var(--aos-delay, 0ms),
              transform var(--aos-duration, 800ms) var(--aos-easing, ease-out) var(--aos-delay, 0ms);
}

/* 
  The 'is-visible' class is added by JavaScript to trigger the animation.
  It brings the element to its final, visible state.
*/
.aos-animate.is-visible {
  opacity: 1;
  transform: none; /* Resets any transform to its default state */
}


/* --- ANIMATION TYPE DEFINITIONS --- */
/* These classes only define the STARTING position of the element. */

.aos-fade {
  transform: none;
}
.aos-fade-up {
  transform: translateY(50px);
}
.aos-fade-down {
  transform: translateY(-50px);
}
.aos-fade-left {
  transform: translateX(-50px);
}
.aos-fade-right {
  transform: translateX(50px);
}
.aos-zoom-in {
  transform: scale(0.9);
}
.aos-zoom-out {
  transform: scale(1.1);
}
.aos-flip-left {
  transform: perspective(1000px) rotateY(-90deg);
}
.aos-flip-right {
  transform: perspective(1000px) rotateY(90deg);
}


/* --- RESPONSIVE VISIBILITY HELPERS --- */
/* These classes will DISABLE animations on certain screen sizes */

/* Hide animation on screens smaller than 768px (tablets/mobiles) */
@media (max-width: 767px) {
  .aos-desktop-only {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hide animation on screens 768px and larger (desktops) */
@media (min-width: 768px) {
  .aos-mobile-only {
    opacity: 1;
    transform: none;
    transition: none;
  }
}