/* ============================================================
   ETERNAL GANGES HOLIDAYS — GLOBAL ANIMATIONS & MICRO-INTERACTIONS
   File: assets/css/animations.css
   Works seamlessly across ALL pages (Home, About, Destinations,
   Tour Packages, Hotels, Cars, Gallery, Reviews, Contact, Legal)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-fast: 0.35s;
  --anim-med:  0.6s;
  --anim-slow: 0.9s;
}

/* ══════════════════════════════════════════════════════════════
   1. GLOBAL SCROLL REVEAL (Works with JS IntersectionObserver)
   ══════════════════════════════════════════════════════════════ */

/* Base hidden state */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity var(--anim-med) var(--anim-ease),
              transform var(--anim-med) var(--anim-ease);
}

/* Revealed state (added on scroll) */
.reveal.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Direction Variants */
.reveal-up {
  transform: translateY(35px);
}
.reveal-down {
  transform: translateY(-25px);
}
.reveal-left {
  transform: translateX(-35px);
}
.reveal-right {
  transform: translateX(35px);
}
.reveal-zoom {
  transform: scale(0.92);
}
.reveal-zoom-up {
  transform: scale(0.93) translateY(25px);
}

/* Stagger Delays for Grids */
.reveal-d1 { transition-delay: 0.04s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.20s; }
.reveal-d4 { transition-delay: 0.28s; }
.reveal-d5 { transition-delay: 0.36s; }
.reveal-d6 { transition-delay: 0.44s; }
.reveal-d7 { transition-delay: 0.52s; }
.reveal-d8 { transition-delay: 0.60s; }

/* ══════════════════════════════════════════════════════════════
   2. UNIVERSAL CARD STYLES & LUXURY HOVER MICRO-ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* All Cards across All Pages */
.dest-gallery-card,
.pkg-card,
.dest-card-modern,
.hotel-card-modern,
.tour-card,
.blog-card,
.pillar-card,
.car-card,
.item-single,
.suggested-tour-card,
.step-box,
.legacy-stat-item,
.dest-quick-chip,
.founder-card-frame,
.why-card,
.testimonial-card,
.contact-info-card,
.sidebar-links-card,
.sidebar-trust-card {
  transition: transform 0.38s var(--anim-ease),
              box-shadow 0.38s var(--anim-ease),
              border-color 0.38s ease !important;
  will-change: transform, box-shadow;
}

/* Hover Lift */
.dest-gallery-card:hover,
.pkg-card:hover,
.dest-card-modern:hover,
.hotel-card-modern:hover,
.tour-card:hover,
.blog-card:hover,
.pillar-card:hover,
.suggested-tour-card:hover,
.founder-card-frame:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.14) !important;
}

/* Universal Image Zoom on Card Hover */
.dest-gallery-card .dest-gallery-image img,
.pkg-card .pkg-card-media img,
.dest-card-modern .dest-card-img-wrap img,
.hotel-card-modern .dest-card-img-wrap img,
.tour-card img,
.blog-card .blog-image img,
.suggested-tour-card .suggested-img-wrap img,
.founder-portrait,
.item-single .image img {
  transition: transform 0.65s var(--anim-ease) !important;
  will-change: transform;
}

.dest-gallery-card:hover .dest-gallery-image img,
.pkg-card:hover .pkg-card-media img,
.dest-card-modern:hover .dest-card-img-wrap img,
.hotel-card-modern:hover .dest-card-img-wrap img,
.tour-card:hover img,
.blog-card:hover .blog-image img,
.suggested-tour-card:hover .suggested-img-wrap img,
.founder-card-frame:hover .founder-portrait,
.item-single:hover .image img {
  transform: scale(1.08) !important;
}

/* Shimmer Sweep on Card Images */
.dest-gallery-card .dest-gallery-image,
.pkg-card .pkg-card-media,
.dest-card-modern .dest-card-img-wrap,
.hotel-card-modern .dest-card-img-wrap,
.blog-card .blog-image,
.suggested-tour-card .suggested-img-wrap,
.item-single .image {
  position: relative;
  overflow: hidden;
}

.dest-gallery-card .dest-gallery-image::after,
.pkg-card .pkg-card-media::after,
.dest-card-modern .dest-card-img-wrap::after,
.hotel-card-modern .dest-card-img-wrap::after,
.blog-card .blog-image::after,
.suggested-tour-card .suggested-img-wrap::after,
.item-single .image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
  transform: translateX(-110%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 2;
}

.dest-gallery-card:hover .dest-gallery-image::after,
.pkg-card:hover .pkg-card-media::after,
.dest-card-modern:hover .dest-card-img-wrap::after,
.hotel-card-modern:hover .dest-card-img-wrap::after,
.blog-card:hover .blog-image::after,
.suggested-tour-card:hover .suggested-img-wrap::after,
.item-single:hover .image::after {
  transform: translateX(110%);
}

/* ══════════════════════════════════════════════════════════════
   3. BUTTON SHIMMER & CLICK INTERACTIONS
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-theme-primary,
.btn-theme-gold,
.btn-theme-outline,
.dest-card-btn,
.blog-btn,
.tour-btn,
.btn-hero-primary,
.btn-hero-secondary,
.btn-dest-cta,
.btn-dest-wa,
.pkg-enquire-btn,
.tpd-book-cta,
.btn-sidebar-enquire-sm,
.btn-thankyou-wa,
.btn-thankyou-call {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--anim-ease) !important;
}

.btn-primary:active,
.btn-theme-primary:active,
.btn-theme-gold:active,
.dest-card-btn:active,
.blog-btn:active,
.tour-btn:active,
.pkg-enquire-btn:active {
  transform: scale(0.96) !important;
}

/* Shimmer Sweep Layer */
.btn-primary::after,
.btn-theme-primary::after,
.btn-theme-gold::after,
.btn-hero-primary::after,
.btn-hero-secondary::after,
.btn-dest-cta::after,
.pkg-enquire-btn::after,
.tpd-book-cta::after,
.btn-sidebar-enquire-sm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.28) 50%, transparent 75%);
  transform: translateX(-110%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-theme-primary:hover::after,
.btn-theme-gold:hover::after,
.btn-hero-primary:hover::after,
.btn-hero-secondary:hover::after,
.btn-dest-cta:hover::after,
.pkg-enquire-btn:hover::after,
.tpd-book-cta:hover::after,
.btn-sidebar-enquire-sm:hover::after {
  transform: translateX(110%);
}

/* Arrow Slide on Link Hover */
.dest-card-btn i,
.blog-btn i,
.tour-btn i,
.suggested-link i,
.dest-quick-chip .chip-arrow,
.sidebar-page-menu li a i {
  transition: transform 0.3s ease !important;
}

.dest-card-btn:hover i,
.blog-btn:hover i,
.tour-btn:hover i,
.suggested-link:hover i,
.dest-quick-chip:hover .chip-arrow {
  transform: translateX(5px) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. INNER HERO BANNER ENTRANCE (All Inner Pages)
   ══════════════════════════════════════════════════════════════ */
.inner-hero-banner .hero-mini-tag {
  animation: heroTagIn 0.6s 0.08s var(--anim-ease) both;
}
.inner-hero-banner h1 {
  animation: heroH1In 0.7s 0.18s var(--anim-ease) both;
}
.inner-hero-banner .banner-breadcrumbs {
  animation: heroFadeUp 0.6s 0.32s var(--anim-ease) both;
}

@keyframes heroTagIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroH1In {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   5. TEXT & BADGE ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* Gradient Shimmer Text */
.text-shimmer {
  background: linear-gradient(90deg, #0f4c75, #0f8fa0, #e8a020, #0f4c75);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerFlow 4s linear infinite;
}

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

/* Section Kickers / Badge Pulse */
.section-kicker,
.dest-badge,
.pkg-section-badge,
.subdest-badge,
.hero-mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: badgePop 0.5s var(--anim-ease) forwards;
}

@keyframes badgePop {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Pulse Live Dots */
.pulse-live-dot,
.pulse-dot,
.kicker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: livePulse 1.8s infinite ease-out;
}

@keyframes livePulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  50%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.9; }
}

/* Floating animation for icons / trust badges */
.float-anim,
.trust-shield-icon,
.founder-badge-floating {
  animation: floatUpDown 4s ease-in-out infinite;
}

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

/* ══════════════════════════════════════════════════════════════
   6. FLOATING QUICK CONTACT (WhatsApp & Call)
   ══════════════════════════════════════════════════════════════ */
.floating-contact .float-btn {
  animation: floatBtnIn 0.8s 0.5s var(--anim-ease) both;
}

.floating-contact .float-btn.whatsapp {
  animation-delay: 0.6s;
}
.floating-contact .float-btn.call {
  animation-delay: 0.75s;
}

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

/* ══════════════════════════════════════════════════════════════
   7. PAGE LOAD SMOOTH FADE
   ══════════════════════════════════════════════════════════════ */
@keyframes pageEnter {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}
body {
  animation: pageEnter 0.35s ease forwards;
}

/* Timeline & Day Stagger in Tour Package Detail */
.tpd-day {
  transition: all 0.45s var(--anim-ease);
}
.tpd-day:hover {
  transform: translateX(4px);
}