/**
 * Load Animations for ExtendedContainer
 * CSS-based animations that trigger on page load
 * Separate from AOS scroll animations
 */

/* Base animation class - only animates child content */
.load-animate>* {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: opacity, transform;
}

/* ============================================
   FADE ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.load-animate-fade-in>* {
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.load-animate-fade-in-up>* {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.load-animate-fade-in-down>* {
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.load-animate-fade-in-left>* {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.load-animate-fade-in-right>* {
  animation-name: fadeInRight;
}

/* ============================================
   SCALE ANIMATIONS
   ============================================ */

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 1);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.load-animate-scale-up>* {
  animation-name: scaleUp;
}

@keyframes scaleDown {
  from {
    opacity: 0;
    transform: scale3d(1.2, 1.2, 1);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.load-animate-scale-down>* {
  animation-name: scaleDown;
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.load-animate-bounce-in {
  animation-name: bounceIn;
  animation-duration: 1s;
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.load-animate-rotate-in {
  animation-name: rotateIn;
  animation-duration: 1s;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Reduce animation distances on mobile */
@media (max-width: 767px) {
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ============================================
   DISABLE ANIMATIONS ON MOBILE
   ============================================ */

/* Disable all animations on mobile when checkbox is checked */
@media (max-width: 767px) {

  /* Disable load animations */
  .no-animation-mobile.load-animate>*,
  .no-animation-mobile .load-animate>* {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable AOS scroll animations - target all possible combinations */
  .no-animation-mobile[data-aos],
  .no-animation-mobile [data-aos],
  .no-animation-mobile.aos-init,
  .no-animation-mobile .aos-init,
  .no-animation-mobile.aos-animate,
  .no-animation-mobile .aos-animate {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Ensure AOS doesn't add transforms */
  .no-animation-mobile[data-aos]::before,
  .no-animation-mobile [data-aos]::before {
    display: none !important;
  }
}