/* ==========================================
   ANIMATIONS - KEYFRAMES & SCROLL EFFECTS
   ========================================== */

/* ---- Preloader ---- */
@keyframes preloaderBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-15px) scale(1.1); }
}
@keyframes preloaderFill {
  to { width: 100%; }
}

/* ---- Hero ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 300px)); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes activeIndicator {
  from { width: 0; opacity: 0; }
  to { width: 30px; opacity: 1; }
}
@keyframes btnGlow {
  from { box-shadow: 0 5px 20px rgba(255,107,107,0.4); }
  to { box-shadow: 0 5px 40px rgba(255,107,107,0.7), 0 0 60px rgba(255,107,107,0.3); }
}

/* ---- Elephant Float ---- */
@keyframes elephantFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ---- Section Shapes ---- */
@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

/* ---- Icon Float ---- */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Gallery ---- */
@keyframes galleryZoom {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Form ---- */
@keyframes formStepIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes successBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes confettiFall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes fieldErrorGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
  50% { box-shadow: 0 0 0 6px rgba(231,76,60,0.15); }
}

/* ---- Spin ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Testimonial Slider ---- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Background Animals ---- */
/* Old CSS animal keyframes removed - now handled by GSAP timelines in animals.js */

/* ---- Scroll Reveal ---- */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* ---- Sparkle burst on click ---- */
.sparkle {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: sparkleFade 0.6s ease forwards;
}
@keyframes sparkleFade {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}