/* ===================================================== */
/*   SCROLL REVEAL & MICRO-ANIMATIONS                     */
/* ===================================================== */

/* Base reveal state */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1),
              transform .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
[data-reveal="fade"]        { transform: none; }
[data-reveal="fade-left"]   { transform: translateX(-32px); }
[data-reveal="fade-right"]  { transform: translateX(32px); }
[data-reveal="zoom-in"]     { transform: scale(.94); }
[data-reveal="zoom-in"].revealed { transform: scale(1); }

/* Stagger delays */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* ================= HERO ANIMATIONS ================= */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,97,.5); }
  50%      { box-shadow: 0 0 0 18px rgba(201,169,97,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hero video/image */
.hero .hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: heroZoom 8s ease-out forwards;
}
.hero .hero-bg-media.video { animation: heroFadeIn 1.2s ease-out; }

.hero .hero-content > * {
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(.22,1,.36,1) forwards;
}
.hero .hero-content > h1 { animation-delay: .2s; }
.hero .hero-content > p  { animation-delay: .45s; }
.hero .hero-content > a  { animation-delay: .7s; }
.hero .hero-content > .hero-eyebrow { animation-delay: .05s; }

/* Hero CTA glow pulse */
.hero .btn-hero {
  position: relative;
  animation: heroFadeUp 1s .7s cubic-bezier(.22,1,.36,1) forwards,
             pulseGlow 2.6s ease-out 2.2s infinite;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: heroFadeIn 1s 1.4s forwards, floatSlow 2.4s ease-in-out 1.4s infinite;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hero-scroll-indicator .mouse {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 14px;
  position: relative;
}
.hero-scroll-indicator .mouse::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 7px;
  background: #fff;
  border-radius: 3px;
  animation: mouseScroll 1.8s infinite;
}
@keyframes mouseScroll {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ================= CARD HOVER MICRO-INTERACTIONS ================= */
.trip-card, .blog-card, .why-card, .testimonial-card {
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.trip-card:hover, .blog-card:hover {
  transform: translateY(-8px);
}
.why-card:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Icon bounce on hover */
.why-card:hover .why-icon {
  animation: floatSlow 1.4s ease-in-out infinite;
}
.why-icon { display: inline-block; transition: transform .35s; }

/* Trip price shimmer on hover */
.trip-card:hover .trip-price-value {
  background: linear-gradient(90deg, var(--primary) 0%, #e0c078 50%, var(--primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}

/* Button hover lift */
.btn-hero, .btn-trip, .btn-submit-booking, .btn-primary-lg, .btn-book {
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s, background .3s;
}
.btn-trip:hover, .btn-book:hover {
  transform: translateY(-3px);
}

/* Image zoom on card hover */
.trip-card-img, .blog-card-img { overflow: hidden; }
.trip-card-img img, .blog-card-img img {
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}

/* Section title underline slide */
.section-title-accent {
  position: relative;
}
.section-title-accent::after {
  transition: width .6s cubic-bezier(.22,1,.36,1);
  width: 0;
}
.section-head[data-reveal].revealed .section-title-accent::after {
  width: 60px;
  transition-delay: .35s;
}

/* Header scrolled state */
.site-header { transition: transform .35s, box-shadow .3s, background .3s; }
.site-header.hide { transform: translateY(-100%); }

/* ================= MOBILE BOTTOM NAV ANIMATION ================= */
.mobile-bottom-nav a { position: relative; overflow: hidden; }
.mobile-bottom-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--primary);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mobile-bottom-nav a.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ================= PAGE LOAD FADE ================= */
body { opacity: 0; animation: bodyFade .35s ease-out forwards; }
@keyframes bodyFade { to { opacity: 1; } }

/* ================= LOADING SKELETON (for lazy images) ================= */


/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ================= MOBILE SPECIFIC ================= */
@media (max-width: 900px) {
  .hero-scroll-indicator { display: none; }
  .hero .hero-content > * { animation-duration: .8s; }

  /* Disable heavy hover animations on touch */
  .trip-card:hover, .blog-card:hover, .why-card:hover {
    transform: none;
  }
}