/* ============================================================
   SUNDARA TRAVELS – Animations
   ============================================================ */

/* ── Float Pin ── */
@keyframes floatPin {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(8deg); }
}

/* ── Drive Car ── */
@keyframes driveCar {
  0%   { left: -8%; opacity: 0; }
  5%   { opacity: 0.25; }
  90%  { opacity: 0.25; }
  100% { left: 108%; opacity: 0; }
}

/* ── Pulse Glow (WhatsApp float) ── */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  50%     { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
}

/* ── Map path draw ── */
@keyframes drawPath {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
.map-path-anim  { stroke-dasharray:800; animation: drawPath 6s ease-in-out infinite alternate; }
.map-path-anim2 { stroke-dasharray:800; animation: drawPath 8s ease-in-out infinite alternate-reverse; }

/* ── Ripple on button click ── */
.ripple-btn { position: relative; overflow: hidden; }
@keyframes rippleAnim { to { transform: translate(-50%,-50%) scale(4); opacity: 0; } }

/* ── SVG breathe ── */
.hero-road-svg ellipse { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: 0.4; } 50% { opacity: 0.65; } }

/* ── WA Confirm overlay ── */
@keyframes wbBoxIn {
  from { transform: scale(0.82) translateY(24px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
@keyframes wbRingSpin {
  from { transform: rotate(0deg);   opacity: 1; }
  80%  { transform: rotate(360deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}
@keyframes wbCheckPop { to { transform: scale(1); opacity: 1; } }
@keyframes wbFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wbDotBlink {
  0%,80%,100% { opacity: 0; }
  40%         { opacity: 1; }
}

/* ── Section fade-in via AOS ── */
[data-aos] { transition-timing-function: cubic-bezier(0.4,0,0.2,1) !important; }

/* ── Hover lift for cards ── */
.hover-lift { transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(15,23,42,0.15); }

/* ── Card shine on hover ── */
.glass-card { position: relative; }
.glass-card::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
.glass-card:hover::after { left: 160%; }

/* ── Route arrow bounce ── */
.route-card:hover .route-arrow { animation: arrowBounce 0.6s ease infinite alternate; }
@keyframes arrowBounce {
  from { transform: translateX(0); }
  to   { transform: translateX(6px); }
}

/* ── Dark mode smooth transition ── */
body, .glass-card, #mainNav, .form-input-custom {
  transition: background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Selection ── */
::selection { background: rgba(249,115,22,0.2); }

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── AOS custom easing ── */
[data-aos] { transition-timing-function: cubic-bezier(0.4,0,0.2,1) !important; }

/* ── Card entrance fade ── */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Button ripple ── */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); width: 0; height: 0; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); opacity: 0; transition: width 0.5s, height 0.5s, opacity 0.5s; }
.btn-ripple:active::after { width: 300px; height: 300px; opacity: 0; }

/* ── Number counter flash ── */
.stat-num.counting { color: var(--accent); }