/**
 * AOS On-Load Animations
 * CSS animations that trigger on page load (not on scroll)
 * Use class prefix: aos-on-*
 */

/* ==========================================================================
   Fade Animations
   ========================================================================== */

@keyframes aosOnFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aosOnFadeUp {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeDown {
  from { opacity: 0; transform: translate3d(0, -100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeLeft {
  from { opacity: 0; transform: translate3d(100px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeRight {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeUpRight {
  from { opacity: 0; transform: translate3d(-100px, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeUpLeft {
  from { opacity: 0; transform: translate3d(100px, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeDownRight {
  from { opacity: 0; transform: translate3d(-100px, -100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnFadeDownLeft {
  from { opacity: 0; transform: translate3d(100px, -100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   Flip Animations
   ========================================================================== */

@keyframes aosOnFlipUp {
  from { opacity: 0; transform: perspective(2500px) rotateX(-100deg); }
  to { opacity: 1; transform: perspective(2500px) rotateX(0); }
}

@keyframes aosOnFlipDown {
  from { opacity: 0; transform: perspective(2500px) rotateX(100deg); }
  to { opacity: 1; transform: perspective(2500px) rotateX(0); }
}

@keyframes aosOnFlipLeft {
  from { opacity: 0; transform: perspective(2500px) rotateY(100deg); }
  to { opacity: 1; transform: perspective(2500px) rotateY(0); }
}

@keyframes aosOnFlipRight {
  from { opacity: 0; transform: perspective(2500px) rotateY(-100deg); }
  to { opacity: 1; transform: perspective(2500px) rotateY(0); }
}

/* ==========================================================================
   Slide Animations
   ========================================================================== */

@keyframes aosOnSlideUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnSlideDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnSlideLeft {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aosOnSlideRight {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   Zoom In Animations
   ========================================================================== */

@keyframes aosOnZoomIn {
  from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes aosOnZoomInUp {
  from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(0, 100px, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomInDown {
  from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(0, -100px, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomInLeft {
  from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(100px, 0, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomInRight {
  from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

/* ==========================================================================
   Zoom Out Animations
   ========================================================================== */

@keyframes aosOnZoomOut {
  from { opacity: 0; transform: scale3d(1.4, 1.4, 1.4); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes aosOnZoomOutUp {
  from { opacity: 0; transform: scale3d(1.4, 1.4, 1.4) translate3d(0, 100px, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomOutDown {
  from { opacity: 0; transform: scale3d(1.4, 1.4, 1.4) translate3d(0, -100px, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomOutLeft {
  from { opacity: 0; transform: scale3d(1.4, 1.4, 1.4) translate3d(100px, 0, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes aosOnZoomOutRight {
  from { opacity: 0; transform: scale3d(1.4, 1.4, 1.4) translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

/* Fade */
.aos-on-fade {
  animation: aosOnFade var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-up {
  animation: aosOnFadeUp var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-down {
  animation: aosOnFadeDown var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-left {
  animation: aosOnFadeLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-right {
  animation: aosOnFadeRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-up-right {
  animation: aosOnFadeUpRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-up-left {
  animation: aosOnFadeUpLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-down-right {
  animation: aosOnFadeDownRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-fade-down-left {
  animation: aosOnFadeDownLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

/* Flip */
.aos-on-flip-up {
  animation: aosOnFlipUp var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-flip-down {
  animation: aosOnFlipDown var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-flip-left {
  animation: aosOnFlipLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-flip-right {
  animation: aosOnFlipRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

/* Slide */
.aos-on-slide-up {
  animation: aosOnSlideUp var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-slide-down {
  animation: aosOnSlideDown var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-slide-left {
  animation: aosOnSlideLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-slide-right {
  animation: aosOnSlideRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

/* Zoom In */
.aos-on-zoom-in {
  animation: aosOnZoomIn var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-in-up {
  animation: aosOnZoomInUp var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-in-down {
  animation: aosOnZoomInDown var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-in-left {
  animation: aosOnZoomInLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-in-right {
  animation: aosOnZoomInRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

/* Zoom Out */
.aos-on-zoom-out {
  animation: aosOnZoomOut var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-out-up {
  animation: aosOnZoomOutUp var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-out-down {
  animation: aosOnZoomOutDown var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-out-left {
  animation: aosOnZoomOutLeft var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

.aos-on-zoom-out-right {
  animation: aosOnZoomOutRight var(--aos-on-duration, 1s) var(--aos-on-easing, ease) var(--aos-on-delay, 0s) both;
}

/* ==========================================================================
   Slick Slider Support
   Hide animated elements in non-active slides
   ========================================================================== */

/* Before Slick initializes — prevent animations from firing early */
.slick-slider:not(.slick-initialized) [class*="aos-on-"] {
  opacity: 0 !important;
  animation: none !important;
}

/* After Slick initializes — hide elements in non-active slides */
.slick-slide:not(.slick-active) [class*="aos-on-"] {
  opacity: 0 !important;
  animation: none !important;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [class*="aos-on-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}