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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bloom {
  0% { transform: scale(0.85) rotate(-4deg); opacity: 0; }
  60% { transform: scale(1.04) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.hero-copy { animation: fadeUp 0.9s ease both; }
.hero-visual { animation: bloom 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.15s; }
.hero-visual .badge-1 { animation: slideInLeft 0.9s ease both; animation-delay: 0.6s; }
.hero-visual .badge-2 { animation: slideInRight 0.9s ease both; animation-delay: 0.75s; }

/* Reveal variants triggered by JS adding .in-view */
.reveal.fade-up { transform: translateY(30px); }
.reveal.fade-up.in-view { animation: fadeUp 0.7s ease both; }
.reveal.scale-in { transform: scale(0.92); }
.reveal.scale-in.in-view { animation: scaleIn 0.6s ease both; }
.reveal.from-left.in-view { animation: slideInLeft 0.7s ease both; }
.reveal.from-right.in-view { animation: slideInRight 0.7s ease both; }

/* Stagger helper */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.08s); }

/* Button hover ripple */
.btn-primary { position: relative; overflow: hidden; }

/* Mobile nav animation */
.mobile-nav { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.mobile-nav.open { max-height: 600px; }

/* Testimonial fade */
.testi-slide { transition: opacity 0.4s ease; }

/* Loading pulse for lightbox image swap */
@keyframes pulseSoft {
  0%, 100% { opacity: 1; } 50% { opacity: 0.7; }
}