/* ============================================================
   eHalo · Living Itinerary — journey.css
   A scroll-driven, time-of-day travel experience.
   Layers (bottom → top):
     .sky (fixed gradient) → #stars → #aurora → .clouds → .atmo
     → page content → HUD / rail / topbar → loader
   ============================================================ */

/* ===== Page-scoped tokens ===== */
.journey-page {
  --sky-top: #232850;
  --sky-mid: #6b4d77;
  --sky-bot: #e8a0a0;
  --sun-x: 50vw;
  --sun-y: 88vh;
  --sun-a: 0.35;
  --sun-c: #ffd9a0;
  --moon-a: 0;
  --moon-x: 72vw;
  --moon-y: 24vh;
  --cloud-a: 0.5;

  /* phase-driven content theme (JS swaps body.phase-*) */
  --ink: #1d2030;
  --ink-2: rgba(29, 32, 48, 0.66);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.75);
  --chip: rgba(255, 255, 255, 0.55);
  --line: rgba(29, 32, 48, 0.18);
  --stamp: #c2455f;

  --brand: #e85d75;
  --brand-2: #ff6b9d;
  --display: 'Space Grotesk', 'Inter', sans-serif;

  background: var(--sky-bot);
  color: var(--ink);
  overflow-x: hidden;
}

/* Night-ish phases flip the content theme */
.journey-page.phase-dusk,
.journey-page.phase-night {
  --ink: #eef0fb;
  --ink-2: rgba(238, 240, 251, 0.66);
  --glass: rgba(13, 17, 40, 0.72);
  --glass-brd: rgba(255, 255, 255, 0.14);
  --chip: rgba(13, 17, 40, 0.62);
  --line: rgba(238, 240, 251, 0.22);
  --stamp: #ff8aa1;
}
.journey-page.phase-hero {
  --ink: #f4ecf2;
  --ink-2: rgba(244, 236, 242, 0.7);
  --glass: rgba(22, 18, 44, 0.42);
  --glass-brd: rgba(255, 255, 255, 0.16);
  --chip: rgba(22, 18, 44, 0.5);
  --line: rgba(244, 236, 242, 0.25);
}

.journey-page ::selection { background: var(--brand); color: #fff; }

/* ============================================================
   SKY THEATER (fixed background layers)
   ============================================================ */
.sky,
.sky-stars,
.sky-aurora,
.clouds,
.atmo {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sky {
  z-index: 0;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 52%,
    var(--sky-bot) 100%);
}

/* Sun & moon discs ride on CSS vars set from JS */
.sun, .moon {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.sun {
  left: var(--sun-x);
  top: var(--sun-y);
  width: clamp(90px, 12vw, 160px);
  height: clamp(90px, 12vw, 160px);
  background: radial-gradient(circle at 38% 36%, #fff 0%, var(--sun-c) 46%, transparent 72%);
  opacity: var(--sun-a);
  filter: blur(1px);
  box-shadow:
    0 0 60px 22px var(--sun-c),
    0 0 180px 80px color-mix(in srgb, var(--sun-c) 38%, transparent);
}
.moon {
  left: var(--moon-x);
  top: var(--moon-y);
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  background: radial-gradient(circle at 40% 36%, #ffffff 0%, #e8ecf7 55%, #c7cfe6 100%);
  opacity: var(--moon-a);
  box-shadow: 0 0 50px 16px rgba(214, 224, 255, 0.5);
}
.moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 30%, rgba(150, 162, 200, .55) 0 9%, transparent 11%),
    radial-gradient(circle at 36% 58%, rgba(150, 162, 200, .45) 0 7%, transparent 9%),
    radial-gradient(circle at 58% 70%, rgba(150, 162, 200, .4) 0 5%, transparent 7%);
}

.sky-stars  { z-index: 1; }
.sky-aurora {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: .75;
  filter: blur(22px) saturate(1.2);
  /* keep the glow in the open sky — fade out before it reaches content */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 52%);
  mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 52%);
}

/* --- Clouds: 3 parallax drift layers built from soft puffs --- */
.clouds { z-index: 3; opacity: var(--cloud-a); }
.cloud-layer { position: absolute; inset: -10% -30%; }
.puff {
  position: absolute;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 72%);
  border-radius: 50%;
  filter: blur(2px);
}
.cl-a { animation: drift 150s linear infinite; }
.cl-b { animation: drift 220s linear infinite reverse; opacity: .75; }
.cl-c { animation: drift 320s linear infinite; opacity: .5; }
@keyframes drift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

/* --- Atmosphere: vignette + film grain --- */
.atmo {
  z-index: 4;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 8, 24, 0.28) 100%);
}
.atmo::after {
  content: '';
  position: absolute;
  inset: -100px;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-34px, 22px); }
  50%  { transform: translate(18px, -40px); }
  75%  { transform: translate(-26px, -14px); }
  100% { transform: translate(30px, 28px); }
}

/* Content rides above the sky */
.journey-page main, .journey-page .jhero, .journey-page .footer { position: relative; z-index: 5; }

/* ============================================================
   LOADER — "now boarding" gate that splits open
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  color: #f4ecf2;
  font-family: var(--display);
}
#loader .gate {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: #12102b;
  transition: transform .7s cubic-bezier(.76, 0, .24, 1);
}
#loader .gate-top { top: 0; }
#loader .gate-bot { bottom: 0; }
#loader .loader-tag {
  position: relative;
  z-index: 1;
  text-align: center;
  letter-spacing: .35em;
  font-size: .8rem;
  text-transform: uppercase;
  opacity: .9;
}
#loader .loader-tag strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: .55em;
  margin-top: .5rem;
  padding-left: .55em; /* optically center the tracked text */
}
#loader .loader-plane {
  display: block;
  font-size: 1.6rem;
  margin: 0 auto .75rem;
  animation: taxi 1.1s ease-in-out infinite alternate;
}
@keyframes taxi {
  from { transform: translateX(-14px) rotate(-4deg); }
  to   { transform: translateX(14px) rotate(4deg); }
}
#loader.done .gate-top { transform: translateY(-101%); }
#loader.done .gate-bot { transform: translateY(101%); }
#loader.done .loader-tag { opacity: 0; transition: opacity .25s; }
#loader.gone { display: none; }

/* ============================================================
   NAV — dark glass override for this page
   ============================================================ */
.journey-page .navbar {
  background: rgba(14, 12, 32, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.journey-page .navbar .logo,
.journey-page .nav-links a { color: #f4f1fa; }
.journey-page .nav-links a:hover { color: #ffb3c2; }
.journey-page .nav-links .btn-nav { color: #fff; }
.journey-page .mobile-menu-btn span { background: #f4f1fa; }
.journey-page .mobile-menu { background: rgba(14, 12, 32, 0.96); }
.journey-page .mobile-menu a { color: #f4f1fa; }

/* ============================================================
   HERO — pre-dawn departure lounge
   ============================================================ */
.jhero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 7.5rem 1.5rem 5rem;
  gap: 1.4rem;
}
.jhero-kicker {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: .75rem;
  color: var(--ink-2);
  animation: fadeDown .9s .15s cubic-bezier(.2, .7, .2, 1) both;
}
.jhero h1 {
  font-family: var(--display);
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: -0.02em;
  animation: fadeDown .9s .25s cubic-bezier(.2, .7, .2, 1) both;
}
.jhero h1 .grad {
  background: linear-gradient(100deg, #ff8aa1, #ffc46b 55%, #8be0c8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.jhero-sub {
  max-width: 560px;
  color: var(--ink-2);
  font-size: 1.05rem;
  animation: fadeDown .9s .45s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Split-flap departures board --- */
.board {
  display: flex;
  gap: .3rem;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: rgba(8, 8, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255,255,255,.06);
  animation: fadeDown .9s .35s cubic-bezier(.2, .7, .2, 1) both;
}
.board .cell {
  position: relative;
  width: clamp(1.45rem, 3.4vw, 2.3rem);
  height: clamp(2.1rem, 4.8vw, 3.2rem);
  border-radius: 5px;
  background: linear-gradient(180deg, #23233a 0 48%, #1a1a2e 52% 100%);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  color: #ffd9a0;
  overflow: hidden;
  perspective: 220px;
}
.board .cell::after {           /* split-flap hinge line */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .65);
}
.board .cell span {
  display: block;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.board .cell.flip span { animation: flap .14s ease-in; }
@keyframes flap {
  0%   { transform: rotateX(0deg); filter: brightness(1.25); }
  49%  { transform: rotateX(-88deg); }
  51%  { transform: rotateX(88deg); }
  100% { transform: rotateX(0deg); }
}
.board-status {
  font-family: var(--display);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .7rem;
  color: #8be0c8;
  animation: fadeDown .9s .4s both;
}
.board-status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8be0c8;
  margin-right: .5rem;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.jhero-cta {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeDown .9s .55s cubic-bezier(.2, .7, .2, 1) both;
}

/* --- Boarding pass --- */
.bpass-wrap { perspective: 1200px; animation: fadeDown 1s .65s cubic-bezier(.2,.7,.2,1) both; }
.bpass {
  display: grid;
  grid-template-columns: 1fr auto;
  width: min(620px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf8f3 0%, #f7ecec 100%);
  color: #2a2438;
  text-align: left;
  box-shadow: 0 30px 80px -20px rgba(8, 6, 24, 0.55);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
  will-change: transform;
}
.bpass-main { padding: 1.15rem 1.3rem 1.05rem; }
.bpass-air {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #9a8fb0;
  margin-bottom: .55rem;
}
.bpass-route {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  letter-spacing: .02em;
}
.bpass-route .path {
  flex: 1;
  position: relative;
  height: 2px;
  background-image: linear-gradient(90deg, #cdbfd6 33%, transparent 0);
  background-size: 9px 2px;
}
.bpass-route .path::after {
  content: '✈';
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 1.1rem;
  color: var(--brand);
  transform: translate(-50%, -54%) rotate(0.001deg);
  animation: passFly 4.5s ease-in-out infinite;
}
@keyframes passFly {
  0%   { left: 6%; }
  55%  { left: 94%; }
  100% { left: 94%; opacity: 0; }
}
.bpass-meta {
  display: flex;
  gap: 1.6rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}
.bpass-meta div { font-size: .92rem; font-weight: 600; }
.bpass-meta span {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9a8fb0;
  margin-bottom: .1rem;
}
.bpass-stub {
  position: relative;
  display: grid;
  align-content: center;
  gap: .6rem;
  padding: 1rem 1.2rem;
  border-left: 2px dashed #d7c9dd;
  background: #fdf4f6;
}
.bpass-stub::before, .bpass-stub::after {   /* perforation notches */
  content: '';
  position: absolute;
  left: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sky-bot);
  transition: background .4s linear;
}
.bpass-stub::before { top: -10px; }
.bpass-stub::after  { bottom: -10px; }
.bpass-barcode {
  width: 84px;
  height: 52px;
  background: repeating-linear-gradient(90deg,
    #2a2438 0 2px, transparent 2px 4px,
    #2a2438 4px 7px, transparent 7px 9px,
    #2a2438 9px 10px, transparent 10px 13px);
  border-radius: 3px;
}
.bpass-stub small {
  font-family: var(--display);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #9a8fb0;
  text-align: center;
}

.scroll-cue {
  display: grid;
  justify-items: center;
  gap: .4rem;
  margin-top: .6rem;
  color: var(--ink-2);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-family: var(--display);
  animation: fadeDown 1s .85s both;
}
.scroll-cue .wheel {
  width: 22px; height: 36px;
  border: 2px solid var(--line);
  border-radius: 12px;
  position: relative;
}
.scroll-cue .wheel::after {
  content: '';
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 8px;
  border-radius: 4px;
  background: var(--brand);
  transform: translateX(-50%);
  animation: wheel 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes wheel {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* ============================================================
   MARQUEE divider
   ============================================================ */
.marquee {
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .8rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
}
.marquee-track span { margin: 0 1.6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   JOURNEY — route + day sections
   ============================================================ */
.journey { position: relative; }

#routeSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#routePath {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .4;
  stroke-width: 2.5;
  stroke-dasharray: 10 12;
  stroke-linecap: round;
}
#routeGlow {
  fill: none;
  stroke: var(--brand-2);
  stroke-opacity: .55;
  stroke-width: 3;
  stroke-linecap: round;
}
#plane {
  fill: var(--ink);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.waypoint { fill: var(--brand); stroke: #fff; stroke-width: 2; opacity: .85; }
.waypoint.passed { animation: waypulse 1s ease-out; }
@keyframes waypulse {
  0%   { stroke-width: 2; r: 6; }
  60%  { stroke-width: 10; }
  100% { stroke-width: 2; }
}

/* --- A day --- */
.day {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 12vh, 9rem) 1.5rem;
}
.day-inner { max-width: 1080px; margin: 0 auto; }
.route-anchor {
  position: absolute;
  top: 38%;
  width: 2px; height: 2px;
}
.day:nth-of-type(odd)  .route-anchor { left: 76%; }
.day:nth-of-type(even) .route-anchor { left: 24%; }

.day-head { position: relative; max-width: 760px; }
.day:nth-of-type(even) .day-head { margin-left: auto; text-align: right; }

.day-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--chip);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .45rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.day-pill {
  background: var(--brand);
  color: #fff;
  padding: .15rem .6rem;
  border-radius: 999px;
  letter-spacing: .2em;
}
.day-weather .wx { display: inline-block; animation: wxbob 3.4s ease-in-out infinite; }
@keyframes wxbob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}

.day-ghost {
  position: absolute;
  top: -0.6em;
  left: -0.08em;
  z-index: -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(7rem, 20vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.day:nth-of-type(even) .day-ghost { left: auto; right: -0.08em; }
.day.active .day-ghost { opacity: .9; transform: translateY(0); }

.day-city {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 .4rem;
  overflow: hidden;
}
.day-city .ltr {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i) * 45ms);
  will-change: transform;
}
.day-city .ltr.sp { width: .35em; }
.day.active .day-city .ltr { transform: translateY(0) rotate(0); }

.day-sub { color: var(--ink-2); font-size: 1.06rem; max-width: 56ch; }
.day:nth-of-type(even) .day-sub { margin-left: auto; }

/* --- day grid: photo + events --- */
.day-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
  margin-top: 2.4rem;
}
.day:nth-of-type(even) .day-grid .day-photo { order: 2; }

.day-photo {
  position: relative;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 35px 70px -28px rgba(8, 6, 24, 0.55);
  clip-path: inset(10% 10% 10% 10% round 40px);
  transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1);
  transform-style: preserve-3d;
  will-change: transform, clip-path;
}
.day.active .day-photo { clip-path: inset(0 0 0 0 round 26px); }
.day-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 7s linear;
  will-change: transform;
}
.day.active .day-photo img { transform: scale(1.0); }
.day-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.1rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  background: linear-gradient(transparent, rgba(8, 6, 24, .72));
}
.photo-time { font-family: var(--display); letter-spacing: .12em; opacity: .85; }

/* --- passport stamp --- */
.stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  width: clamp(96px, 11vw, 132px);
  height: clamp(96px, 11vw, 132px);
  color: var(--stamp);
  opacity: 0;
  transform: scale(2.6) rotate(18deg);
  filter: blur(6px);
  pointer-events: none;
}
.day.stamped .stamp {
  animation: stampIn .55s cubic-bezier(.16, 1.1, .3, 1.18) .55s forwards;
}
@keyframes stampIn {
  0%   { opacity: 0; transform: scale(2.6) rotate(18deg); filter: blur(6px); }
  62%  { opacity: 1; transform: scale(.94) rotate(-9deg); filter: blur(0); }
  78%  { transform: scale(1.05) rotate(-7.5deg); }
  100% { opacity: .96; transform: scale(1) rotate(-8deg); filter: blur(0); }
}
.stamp svg { width: 100%; height: 100%; }

/* --- events timeline --- */
.day-events {
  list-style: none;
  position: relative;
  display: grid;
  gap: .65rem;
  padding: 1.2rem;
  margin: 0;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(8, 6, 24, .4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .day-events { background: color-mix(in srgb, var(--glass) 100%, #fff 30%); }
}
.event {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: .8rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  transition: background .25s ease, transform .25s ease;
  position: relative;
}
.event::before {                 /* timeline spine */
  content: '';
  position: absolute;
  left: 4.45rem;
  top: 100%;
  width: 2px;
  height: .75rem;
  background-image: linear-gradient(var(--line) 55%, transparent 0);
  background-size: 2px 7px;
}
.event:last-child::before { display: none; }
.event:hover { background: rgba(255, 255, 255, .14); transform: translateX(4px); }
.ev-time {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-2);
  padding-top: .25rem;
  min-width: 3rem;
}
.ev-icon {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  font-size: 1.05rem;
  border-radius: 12px;
  background: var(--chip);
  border: 1px solid var(--glass-brd);
}
.event strong { display: block; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.event em {
  display: block;
  font-style: normal;
  color: var(--ink-2);
  font-size: .82rem;
}
.event .ev-badge {
  display: inline-block;
  margin-top: .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  padding: .12rem .5rem;
  border-radius: 999px;
}

/* --- next-leg ribbon --- */
.leg {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2.2rem;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--chip);
  border: 1px dashed var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.day:nth-of-type(even) .leg { float: right; }
.leg strong { color: var(--ink); letter-spacing: .1em; }
.leg-plane { display: inline-block; animation: legbob 2.6s ease-in-out infinite; }
@keyframes legbob {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(6px) rotate(8deg) translateY(-2px); }
}

/* --- generic reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   HUD + RAIL + TOP PROGRESS
   ============================================================ */
#topbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 1200;
  width: 100%;
  height: 3px;
  transform-origin: 0 0;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), #ffc46b, #8be0c8);
  will-change: transform;
}

#hud {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px -18px rgba(8, 6, 24, .5);
  transform: translate(-50%, 140%);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  white-space: nowrap;
}
#hud.show { transform: translate(-50%, 0); }
#hud .hud-day { color: var(--brand); }
#hud .hud-sep { width: 1px; height: 1em; background: var(--line); }
#hud .hud-time { font-variant-numeric: tabular-nums; }
#hud .hud-km   { font-variant-numeric: tabular-nums; color: var(--ink-2); }

#rail {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  z-index: 1100;
  display: grid;
  gap: .85rem;
  transform: translateY(-50%) translateX(64px);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
#rail.show { transform: translateY(-50%) translateX(0); }
.rail-dot {
  position: relative;
  width: 12px; height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: transform .3s, background .3s, border-color .3s;
}
.rail-dot:hover { transform: scale(1.35); }
.rail-dot.active {
  background: var(--brand);
  border-color: var(--brand);
  transform: scale(1.45);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 22%, transparent);
}
.rail-dot::after {              /* hover label */
  content: attr(data-label);
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  padding: .25rem .6rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
.rail-dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   FINALE — night sky wrap-up
   ============================================================ */
.finale {
  position: relative;
  padding: clamp(6rem, 16vh, 11rem) 1.5rem 7rem;
  text-align: center;
  overflow: hidden;
}
#burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.finale .grad {
  background: linear-gradient(100deg, #8be0c8, #7fb7ff 50%, #ff8aa1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.finale-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 880px;
  margin: 3rem auto 0;
}
.fstat {
  padding: 1.4rem 1rem 1.2rem;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.fstat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fstat span {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* polaroid fan of the week */
.fan {
  display: flex;
  justify-content: center;
  margin: 3.6rem auto 0;
  max-width: 980px;
}
.fan figure {
  width: clamp(86px, 11vw, 150px);
  margin: 0 -0.7rem;
  padding: .45rem .45rem 1.6rem;
  background: #fdf8f3;
  border-radius: 8px;
  box-shadow: 0 18px 40px -16px rgba(8, 6, 24, .6);
  transform: rotate(var(--r, 0deg)) translateY(60px);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
  transition-delay: calc(var(--i) * 90ms);
  position: relative;
}
.fan figure::before {            /* tape */
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 46px; height: 18px;
  transform: translateX(-50%) rotate(calc(var(--r, 0deg) * -1));
  background: rgba(255, 244, 214, .8);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.fan.in figure { transform: rotate(var(--r, 0deg)) translateY(0); opacity: 1; }
.fan figure:hover {
  transform: rotate(0deg) translateY(-14px) scale(1.12);
  z-index: 2;
}
.fan img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}
.fan figcaption {
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b6280;
  text-align: center;
  margin-top: .5rem;
}

.finale-cta {
  display: flex;
  gap: .9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}

/* ============================================================
   Buttons (page-local flavors) + micro-interactions
   ============================================================ */
.btn-ghost {
  background: var(--chip);
  color: var(--ink);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.magnet { will-change: transform; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }

/* ============================================================
   Footer dark override
   ============================================================ */
.journey-page .footer {
  background: #0b0a1d;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .day-grid { grid-template-columns: 1fr; }
  .day:nth-of-type(even) .day-grid .day-photo { order: 0; }
  #routeSvg, #rail { display: none; }
  .day:nth-of-type(even) .day-head { margin-left: 0; text-align: left; }
  .day:nth-of-type(even) .day-sub { margin-left: 0; }
  .day:nth-of-type(even) .leg { float: none; }
  .day:nth-of-type(even) .day-ghost { right: auto; left: -0.08em; }
}
@media (max-width: 640px) {
  #hud { gap: .55rem; font-size: .68rem; padding: .5rem .85rem; bottom: .8rem; }
  .bpass { grid-template-columns: 1fr; }
  .bpass-stub { border-left: 0; border-top: 2px dashed #d7c9dd; }
  .bpass-stub::before { top: -10px; left: -10px; }
  .bpass-stub::after { top: -10px; bottom: auto; left: auto; right: -10px; }
  .bpass-barcode { margin: 0 auto; }
  .stamp { width: 84px; height: 84px; top: 10px; right: 10px; }
  .fan figure { margin: 0 -1rem; }
}

/* ============================================================
   Reduced motion — everything readable, nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .journey-page *, .journey-page *::before, .journey-page *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .reveal, .day-ghost, .day-city .ltr, .fan figure { opacity: 1 !important; transform: none !important; }
  .day-photo { clip-path: inset(0 0 0 0 round 26px); }
  .day-photo img { transform: none; }
  .stamp { opacity: .96; transform: scale(1) rotate(-8deg); filter: none; }
  #loader { display: none; }
  .atmo::after { animation: none; }
}