/* ============================================
   THE LOST ROUTE — Animations & Motion
   Inspired by 21st.dev component library
   ============================================ */

/* ---- Scroll Progress Bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  z-index: 99999;
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(200,164,94,.6);
}

/* ---- Marquee Strip ---- */
.marquee-strip {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  padding: 13px 0;
  margin-top: 60px;
  overflow: hidden;
  position: relative;
  z-index: 90;
}
.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(to right, var(--primary-dark), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(to left, var(--primary-dark), transparent); }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

.marquee-track span {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 20px;
  white-space: nowrap;
}
.marquee-track .dot {
  color: var(--secondary);
  font-size: 1.2rem;
  padding: 0 4px;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Hero Rotating Text ---- */
.hero-rotating-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}
.hero-rotating-word {
  display: inline-block;
  background: linear-gradient(135deg, var(--secondary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: wordEnter .6s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-rotating-word.exit {
  animation: wordExit .4s cubic-bezier(.55,0,1,.45) forwards;
}
@keyframes wordEnter {
  from { opacity: 0; transform: translateY(60%) skewY(4deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes wordExit {
  from { opacity: 1; transform: translateY(0) skewY(0); }
  to   { opacity: 0; transform: translateY(-60%) skewY(-4deg); }
}

/* ---- Card Mouse-Glow Effect ---- */
.glow-card {
  position: relative;
  overflow: hidden;
}
.glow-card::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,94,.18) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  left: var(--mouse-x, -200px);
  top: var(--mouse-y, -200px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s;
}
.glow-card:hover::before { opacity: 1; }

/* ---- Rolling Digit Counter ---- */
.rolling-counter {
  display: inline-flex;
  overflow: hidden;
  line-height: 1;
}
.rolling-digit {
  position: relative;
  overflow: hidden;
  height: 1em;
}
.rolling-digit-inner {
  display: flex;
  flex-direction: column;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.rolling-digit-inner span {
  display: block;
  height: 1em;
  text-align: center;
}

/* ---- Floating Particles (Hero) ---- */
.hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(200,164,94,.35);
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .5; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ---- Section Entrance Stagger ---- */
.stagger-item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.stagger-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Magnetic Button ---- */
.magnetic-btn {
  transition: transform .2s cubic-bezier(.25,.46,.45,.94),
              box-shadow .2s ease;
  display: inline-flex;
}
.magnetic-btn:hover {
  box-shadow: 0 12px 40px rgba(26,92,58,.4);
}

/* ---- Text Shimmer (Section Titles) ---- */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--dark) 0%,
    var(--dark) 30%,
    var(--secondary) 50%,
    var(--dark) 70%,
    var(--dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerMove 3.5s linear infinite;
}
@keyframes shimmerMove {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ---- Destination Card Reveal (on scroll) ---- */
.dest-card-animate {
  opacity: 0;
  transform: scale(.94) translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.dest-card-animate.in-view {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ---- Why-Card Icon Bounce ---- */
.why-card:hover .icon {
  animation: iconBounce .5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes iconBounce {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.18) rotate(-6deg); }
  70%      { transform: scale(.95) rotate(3deg); }
}

/* ---- Pulse Ring on WhatsApp ---- */
.whatsapp-float a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulseRing 2s cubic-bezier(.36,.07,.19,.97) infinite;
  z-index: -1;
}
.whatsapp-float a { position: relative; }

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---- Stat Item Flip ---- */
.stat-item {
  transition: transform .3s ease;
}
.stat-item:hover {
  transform: translateY(-6px);
}