/* ==========================================================================
   Hotel Galaxy, Katra — Animations
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes scrollCue {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 22px); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.85); }
  60% { opacity: 1; transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---------- Utility animation classes ---------- */
.animate-float { animation: floatY 5s ease-in-out infinite; }

.floating-cta .btn-gold { animation: pulseGlow 2.6s infinite; }

.gradient-text {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light), var(--color-secondary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ---------- Reveal-on-scroll base (paired with IntersectionObserver in JS) ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-48px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(48px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ---------- Counter pulse when triggered ---------- */
.stat-number.is-counting { animation: bounceIn 0.5s ease; }

/* ---------- Hero entrance ---------- */
.hero-badges, .hero-title, .hero-subtitle, .hero-actions { will-change: transform, opacity; }

/* ---------- Accordion panel open state driven by inline max-height (JS) ---------- */
.accordion-item { transition: box-shadow var(--transition-fast); }
.accordion-item.is-open { box-shadow: var(--shadow-sm); border-color: var(--color-secondary); }

/* ---------- Page fade-in on load ---------- */
body { animation: fadeIn 0.6s ease; }

/* ---------- Nav scrolled transition polish ---------- */
.site-header, .logo-text strong, .nav-link, .header-call, .hamburger span { will-change: color, background, height; }

@media (prefers-reduced-motion: reduce) {
  .floating-cta .btn-gold { animation: none; }
  .gradient-text { animation: none; }
  .animate-float { animation: none; }
}