/* ═══════════════════════════════════════════════════════════════
   RANDU TOURS — ANIMATIONS CSS
   All GSAP-prep classes, keyframes, scroll animation states,
   hover glows, and CSS-only animations
═══════════════════════════════════════════════════════════════ */

/* ── GSAP Reveal Init States (elements start hidden) ────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
}

.reveal-fade {
  opacity: 0;
}

/* Once GSAP sets these, the element becomes visible */
.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Fade-up keyframe (used by preloader, itinerary, etc.) ──── */
@keyframes fadeUpIn {
  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.8); }
  to   { opacity: 1; transform: scale(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); }
}

/* ── Hero Section Floating Elements ─────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(3deg); }
  66%       { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(-4deg); }
  66%       { transform: translateY(-18px) rotate(2deg); }
}

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

/* ── Pulse Animation (WhatsApp badge, discount badge) ────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.animate-pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

/* ── Orange Glow Pulse (CTA buttons on page load) ─────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 8px 32px hsla(18,95%,54%,0.4); }
  50%       { box-shadow: 0 12px 50px hsla(18,95%,54%,0.65); }
}

.glow-pulse {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* ── Page hero bg gentle pan animation ─────────────────────── */
@keyframes bgPan {
  0%   { transform: scale(1.1) translateX(0); }
  100% { transform: scale(1.1) translateX(-3%); }
}

.page-hero-bg {
  animation: bgPan 12s ease-in-out infinite alternate;
}

/* ── Number Counter Flicker ─────────────────────────────────── */
.counter-val {
  display: inline-block;
  transition: all var(--t-slow);
}

/* ── Word-by-Word Headline Reveal ───────────────────────────── */
.word-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-reveal .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.65s var(--ease-smooth);
}

.word-reveal.revealed .word-inner {
  transform: translateY(0);
}

/* ── Hover Glow on cards ─────────────────────────────────────── */
.hover-glow {
  transition: box-shadow var(--t-base) var(--ease-smooth),
              transform var(--t-base) var(--ease-smooth);
}

.hover-glow:hover {
  box-shadow: 0 0 0 3px var(--orange-glow), var(--sh-xl);
  transform: translateY(-4px);
}

/* ── Shimmer effect (skeleton loading) ──────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.shimmer {
  background: linear-gradient(90deg, var(--cream) 25%, var(--cream-dark) 50%, var(--cream) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ── SVG Route Map Animation States ─────────────────────────── */
.route-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.route-path.drawn {
  animation: drawPath 3s var(--ease-smooth) forwards;
}

@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}

.route-vehicle {
  transition: opacity 0.3s;
}

/* City pin drop animation */
@keyframes pinDrop {
  0%   { transform: translateY(-20px) scale(0); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.map-pin {
  opacity: 0;
  transform-origin: center bottom;
}

.map-pin.dropped {
  animation: pinDrop 0.5s var(--ease-bounce) forwards;
}

/* City label appear */
@keyframes labelAppear {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.map-label {
  opacity: 0;
}

.map-label.appeared {
  animation: labelAppear 0.4s var(--ease-smooth) forwards;
}

/* Vehicle wobble while moving */
@keyframes vehicleWobble {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg); }
}

/* ── Scroll-triggered section divider line draw ────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.line-grow {
  animation: lineGrow 1s var(--ease-smooth) both;
}

/* ── Hero title clip reveal ─────────────────────────────────── */
@keyframes clipRevealUp {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

/* ── Loading text dots ──────────────────────────────────────── */
@keyframes dot1 { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes dot2 { 0%, 20%, 100% { opacity: 0; } 60% { opacity: 1; } }
@keyframes dot3 { 0%, 40%, 100% { opacity: 0; } 80% { opacity: 1; } }

.loading-dots span:nth-child(1) { animation: dot1 1.2s infinite; }
.loading-dots span:nth-child(2) { animation: dot2 1.2s infinite; }
.loading-dots span:nth-child(3) { animation: dot3 1.2s infinite; }

/* ── Image parallax helper (GSAP controls translate) ────────── */
.parallax-img {
  will-change: transform;
  transform: translateY(0);
}

/* ── Stagger children animation helper ─────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}

/* ── Hover border shimmer ───────────────────────────────────── */
@keyframes borderShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Hero booking widget tab slide ─────────────────────────── */
.tab-pane {
  display: none;
  animation: fadeUpIn 0.35s var(--ease-smooth) both;
}

.tab-pane.active {
  display: block;
}

/* ── Smooth height transition for collapsibles ──────────────── */
.collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s var(--ease-smooth), opacity 0.4s;
  opacity: 0;
}

.collapsible.open {
  opacity: 1;
  /* max-height is set dynamically in JS */
}