/* ==========================================================================
   Hotel Leopard Valley Kumbhalgarh — Animations
   ========================================================================== */

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

/* Hero background: slow crossfade slideshow (pure CSS, no JS/CDN dependency).
   Each layer shares one 24s loop; negative animation-delay staggers which
   layer is "active" so they hand off to each other in sequence. 0%/100%
   both resolve to opacity:1 so the very first paint is never a blank flash. */
@keyframes heroCrossfade{
  0%{ opacity: 1; }
  17%{ opacity: 1; }
  25%{ opacity: 0; }
  92%{ opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes heroKenBurns{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.12); }
}
.hero-bg{ animation: heroKenBurns 24s ease-in-out infinite alternate; }
.hero-bg-item{ animation: heroCrossfade 24s ease-in-out infinite; }
.hero-bg-item:nth-child(1){ animation-delay: 0s; }
.hero-bg-item:nth-child(2){ animation-delay: -6s; }
.hero-bg-item:nth-child(3){ animation-delay: -12s; }
.hero-bg-item:nth-child(4){ animation-delay: -18s; }
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation: none; }
  .hero-bg-item{ animation: none; opacity: 0; }
  .hero-bg-item:first-child{ opacity: 1; }
}

@keyframes scrollDot{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ opacity: .3; }
  100%{ transform: translateY(16px); opacity: 0; }
}

@keyframes leafFall{
  0%{ transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
  10%{ opacity: .55; }
  90%{ opacity: .4; }
  100%{ transform: translateY(105vh) translateX(40px) rotate(220deg); opacity: 0; }
}

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

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

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

@keyframes pulseGold{
  0%{ box-shadow: 0 0 0 0 rgba(196,155,61,0.55); }
  70%{ box-shadow: 0 0 0 16px rgba(196,155,61,0); }
  100%{ box-shadow: 0 0 0 0 rgba(196,155,61,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 countUp{
  from{ opacity: .4; }
  to{ opacity: 1; }
}

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

/* ---- Applied Animation Classes ---- */
.booking-bg{ animation: gradientShift 12s ease infinite; }

.about-stat-card{ animation: floatY 4.5s ease-in-out infinite; }
.about-img-float{ animation: floatY 5.5s ease-in-out infinite; animation-delay: .6s; }

.hero-badge-card{ animation: floatY 5s ease-in-out infinite; }
.hero-badge-card:nth-child(2){ animation-delay: .3s; }
.hero-badge-card:nth-child(3){ animation-delay: .6s; }

.whatsapp-float{ animation: pulseGold 2.6s infinite; }

.faq-question:hover i{ animation: bounceIcon .6s ease; }

.why-icon, .attraction-gradient i{ transition: transform .5s ease; }
.why-card:hover .why-icon{ transform: rotateY(180deg); }
.attraction-card:hover .attraction-gradient i{ transform: scale(1.15) rotate(-8deg); }

/* Counter fill */
[data-counter]{ animation: countUp .6s ease; }

/* Reveal fallback for elements not (yet) handled by AOS/JS */
.reveal-up{ opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal-up.in-view{ opacity: 1; transform: translateY(0); }

/* Image reveal — images are visible by default (fail-safe); JS opts individual
   images into the pre-load blur via .reveal-pending so a blocked/slow script
   can never leave an image permanently hidden. */
img{ transition: filter .8s ease, opacity .8s ease; }
img.reveal-pending{ filter: blur(8px); opacity: .4; }
img.is-loaded{ filter: blur(0); opacity: 1; }

/* Nav underline / gradient text shimmer on hero title span */
.hero-title span{
  background: linear-gradient(90deg, var(--color-gold-light), #fff8e6, var(--color-gold-light));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
}

/* Loading screen leopard mark pulse */
.loader-mark{ animation: fadeIn 1s ease; }

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