/* ============================================================
   Smart Trip Planner - Motion / Animations Library
   ============================================================ */

/* ---------- Reveal-on-scroll (default = fade up) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1),
              transform .9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; }

[data-reveal="left"]   { transform: translateX(-40px); }
[data-reveal="right"]  { transform: translateX(40px); }
[data-reveal="zoom"]   { transform: scale(0.92); }
[data-reveal="fade"]   { transform: none; }
[data-reveal="rotate"] { transform: translateY(20px) rotate(-2deg); }

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
              transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: .15s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: .25s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: .35s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: .45s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: .55s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: .65s; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: .75s; opacity: 1; transform: none; }

/* Optional manual delays via data-delay (in 100ms steps) */
[data-delay="1"]  { transition-delay: .1s; }
[data-delay="2"]  { transition-delay: .2s; }
[data-delay="3"]  { transition-delay: .3s; }
[data-delay="4"]  { transition-delay: .4s; }
[data-delay="5"]  { transition-delay: .5s; }
[data-delay="6"]  { transition-delay: .6s; }

/* ---------- Floating ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes floatSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}
@keyframes floatMedium {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes heroDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

/* --- Hero Orbit Scene animations --- */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes heroFloatRotate {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
@keyframes travelerFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}
@keyframes softPulse {
  0%, 100% { opacity: 0.68; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes routeDashMove {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: -200; }
}
@keyframes routeDotPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes planeFloat {
  0% { transform: translate(0, 0) rotate(-10deg); }
  40% { transform: translate(150px, -85px) rotate(-7deg); }
  75% { transform: translate(260px, -150px) rotate(-3deg); }
  100% { transform: translate(320px, -190px) rotate(1deg); }
}

/* ---------- Pulse (gold glow) ---------- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(245,197,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}

@keyframes pulseSoftGlow {
  0%, 100% { opacity: .6; transform: scale(1); box-shadow: 0 0 0 0 rgba(245,197,24,0.25); }
  50%      { opacity: 1;  transform: scale(1.08); box-shadow: 0 0 18px rgba(245,197,24,0.4); }
}
.pulse-soft { display: inline-block; animation: pulseSoftGlow 1.6s ease-in-out infinite; }

/* ---------- Generation page ---------- */
@keyframes routeFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

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

@keyframes travelCardNudge {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes stepFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.floating-soft-gen { animation: floatSoft 7s ease-in-out infinite; }

/* ---------- Hero orb / arc dash ---------- */
@keyframes orbSpin {
  to { transform: rotate(360deg); }
}
@keyframes dash {
  to { stroke-dashoffset: -28; }
}

/* ---------- Shimmering gold underline (links) ---------- */
@keyframes goldShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Card hover lift on entry ---------- */
@keyframes liftIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.lift-in { animation: liftIn .55s var(--ease-out) both; }

/* ---------- Fade in bg images ---------- */
.lazy-fade { opacity: 0; transition: opacity .8s ease; }
.lazy-fade.loaded { opacity: 1; }

/* ---------- Marquee (optional logo strip) ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}

/* ---------- Reduce motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { transition: none !important; transform: none !important; opacity: 1 !important; }
  .floating-image, .floating-soft, .floating-soft-gen, .pulse-soft,
  .hero-traveler-wrap, .hero-object, .hero-mini-card, .hero-bg-glow,
  .hero-route-path, .hero-route-dot, .hero-plane-svg,
  .marquee { animation: none !important; }
}