/* ============================================================================
   INDJEE HOLIDAYS — ANIMATIONS
   ----------------------------------------------------------------------------
   Scroll-triggered reveals work by pairing a starting state below with the
   ".in-view" class, which main.js adds via IntersectionObserver the moment
   an element enters the viewport. Nothing here runs on load except the
   hero sequence, which is intentionally choreographed once.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Scroll reveal primitives
-------------------------------------------------------------------------- */
.reveal-up {
  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-up.in-view { opacity: 1; transform: translateY(0); }

.reveal-fade { opacity: 0; transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-fade.in-view { opacity: 1; }

.reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* Stagger helpers — apply alongside reveal-up on sibling elements */
.stagger-1.in-view { transition-delay: 0.06s; }
.stagger-2.in-view { transition-delay: 0.14s; }
.stagger-3.in-view { transition-delay: 0.22s; }
.stagger-4.in-view { transition-delay: 0.30s; }
.stagger-5.in-view { transition-delay: 0.38s; }
.stagger-6.in-view { transition-delay: 0.46s; }

/* --------------------------------------------------------------------------
   Text reveal — word-by-word (spans injected by JS)
-------------------------------------------------------------------------- */
.word-reveal span {
  display: inline-block; overflow: hidden;
}
.word-reveal span > i {
  display: inline-block; font-style: normal;
  transform: translateY(115%);
  animation: word-up 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes word-up { to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Hero choreography
-------------------------------------------------------------------------- */
.hero-fade-in { opacity: 0; animation: hero-fade 1s var(--ease-premium, ease) forwards; }
@keyframes hero-fade { to { opacity: 1; } }

.hero-bg-zoom {
  animation: bg-slow-zoom 18s ease-in-out infinite alternate;
}
@keyframes bg-slow-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }

.scroll-indicator {
  animation: scroll-bob 2.2s ease-in-out infinite;
}
@keyframes scroll-bob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(10px); opacity: 1; } }

/* --------------------------------------------------------------------------
   Floating elements (badges, decorative shapes)
-------------------------------------------------------------------------- */
.float-slow { animation: float-slow 6s ease-in-out infinite; }
@keyframes float-slow { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }

.float-slow-rev { animation: float-slow-rev 7s ease-in-out infinite; }
@keyframes float-slow-rev { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-2deg); } }

/* --------------------------------------------------------------------------
   Gradient movement (used behind CTA sections)
-------------------------------------------------------------------------- */
.gradient-flow {
  background: linear-gradient(120deg, var(--color-royal-dark), var(--color-royal), var(--color-navy), var(--color-royal-light));
  background-size: 300% 300%;
  animation: gradient-move 14s ease infinite;
}
@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   Marquee (Instagram-style gallery caption strip / trust badges)
-------------------------------------------------------------------------- */
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Page transition overlay
-------------------------------------------------------------------------- */
#page-transition {
  position: fixed; inset: 0; z-index: 998; background: var(--color-navy);
  transform: translateY(-100%); pointer-events: none;
}
#page-transition.leaving { animation: page-out 0.6s cubic-bezier(0.76,0,0.24,1) forwards; }
@keyframes page-out { to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Skeleton shimmer (lazy image placeholder while loading)
-------------------------------------------------------------------------- */
.img-skeleton {
  background: linear-gradient(100deg, var(--border-soft) 30%, rgba(217,169,78,0.18) 50%, var(--border-soft) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
img.lazy-img { opacity: 0; transition: opacity 0.5s var(--ease-premium, ease); }
img.lazy-img.loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-zoom, .float-slow, .float-slow-rev, .gradient-flow, .marquee-track, .scroll-indicator { animation: none !important; }
  .reveal-up, .reveal-fade, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}