/* The home page's opening: Orbit's own day map of Detroit as a wallpaper, the drive to Michigan Central drawn
   as you scroll, then the map opens onto the place you've arrived at, which stays behind the rest of the page. */
.drive { position: relative; height: 580vh; margin-top: -84px; }
.drive-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #EEF0F3; }

/* the map and the route share one box with the image's own shape (1600 x 1000), sized to cover the screen,
   with the focal point (--fx) kept in view on narrow screens */
.mapframe, .pinframe {
  --W: max(100vw, 160vh);
  --H: max(100vh, 62.5vw);
  --fx: 0.56;
  position: absolute; width: var(--W); height: var(--H);
  left: clamp(calc(100vw - var(--W)), calc(50vw - var(--fx) * var(--W)), 0px);
  top: calc(50vh - var(--H) / 2);
  will-change: transform;
}
.mapframe picture img, .mapframe > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapframe picture img { object-fit: fill; }
/* a soft brightening at the edges, so the panels and header sit on calm ground */
.drive-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(95% 75% at 55% 50%, transparent 45%, rgba(245, 246, 248, 0.55) 100%),
  linear-gradient(180deg, rgba(245, 246, 248, 0.5) 0%, transparent 16%, transparent 80%, rgba(245, 246, 248, 0.6) 100%); }

/* the route, as the app draws it: mint with a white casing */
.mapframe .route-glow { fill: none; stroke: #FFFFFF; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(15, 26, 43, 0.25)); }
.mapframe .route { fill: none; stroke: var(--mint); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pin-start { fill: #FFFFFF; stroke: var(--mint); stroke-width: 4; }
.pin-end { fill: var(--sun); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 2px 4px rgba(15, 26, 43, 0.3)); }
.car-dot { fill: #fff; stroke: var(--ink); stroke-width: 4; filter: drop-shadow(0 2px 6px rgba(15, 26, 43, 0.35)); }
.pin-end-ring { fill: none; stroke: var(--sun); stroke-width: 2; opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }

/* things on the road: the app's own pins on the map, small and few. Hover or tap for what each one is,
   who put it there and how drivers see it. They keep their size as the map leans in (--z). */
/* the pins' own layers: the map's exact box and lean. Yours sits above the welcome card, the others beneath it */
.pinframe { z-index: 1; pointer-events: none; transition: opacity 0.4s var(--ease); }
.pinframe.top { z-index: 4; }
.pinframe.away { opacity: 0; visibility: hidden; }
.mpins { position: absolute; inset: 0; }
.mpin { pointer-events: auto; }
.mpin { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -100%) scale(calc(1 / var(--z, 1))); transform-origin: 50% 100%; z-index: 1; }
.mpin img { width: 33px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(15, 26, 43, 0.35)); transition: transform 0.4s var(--ease); }
.mpin:hover img, .mpin:focus-visible img, .mpin.open img { transform: translateY(-3px) scale(1.08); }
.mpin:focus-visible { outline: none; }
.mpin:hover, .mpin:focus-visible, .mpin.open { z-index: 2; }
/* you (an invisible target that rides on the white dot) and the destination */
.mcar.gone { pointer-events: none; }
.mpin.mcar.gone .tip { visibility: hidden; opacity: 0; }
.mcar, .mdest { width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); transform-origin: 50% 50%; }
.tip { position: absolute; left: calc(100% + 14px); top: -6px; width: 280px; margin-top: var(--tipy, 0px); translate: -6px 0; opacity: 0; visibility: hidden; pointer-events: none; text-align: left; display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow), 0 0 0 1px var(--line); font: 400 14px/1.45 var(--body); color: var(--body-text); transition: opacity 0.35s var(--ease), translate 0.45s var(--ease), visibility 0.35s; }
.tip::before { content: ''; position: absolute; right: 100%; top: calc(20px - var(--tipy, 0px)); translate: 6px 0; width: 12px; height: 12px; rotate: 45deg; background: rgba(255, 255, 255, 0.96); }
.mpin:hover .tip, .mpin:focus-visible .tip, .mpin.open .tip { opacity: 1; visibility: visible; translate: 0 0; }
/* you and the destination: their cards sit level with them */
.mcar .tip, .mdest .tip { top: 50%; translate: -6px -50%; }
.mcar .tip::before, .mdest .tip::before { top: calc(50% - var(--tipy, 0px)); translate: 6px -50%; }
.mcar:hover .tip, .mcar:focus-visible .tip, .mcar.open .tip, .mdest:hover .tip, .mdest:focus-visible .tip, .mdest.open .tip { translate: 0 -50%; }
/* a card opens to the left (yours does, and any pin too near the right edge); drive.js picks the side
   with room and nudges the card up or down so it stays on screen (--tipy), keeping its point on the pin */
.mpin.left .tip { left: auto; right: calc(100% + 14px); translate: 6px 0; }
.mpin.left .tip::before { right: auto; left: 100%; translate: -6px 0; }
.mpin.left:is(.mcar, .mdest) .tip { translate: 6px -50%; }
.mpin.left:is(.mcar, .mdest) .tip::before { translate: -6px -50%; }
.mpin.left:is(:hover, :focus-visible, .open) .tip { translate: 0 0; }
.mpin.left:is(.mcar, .mdest):is(:hover, :focus-visible, .open) .tip { translate: 0 -50%; }
.tip-k { font: 700 12px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-deep); }
.tip b { font: 700 17px/1.2 var(--label); color: var(--text); }
.tip-how { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--sub); }
@media (max-width: 720px) { .mpin .tip, .mpin.left .tip { width: 230px; margin-top: 0; left: 50%; right: auto; top: auto; bottom: calc(100% + 12px); translate: -50% 6px; } .tip::before { display: none; } .mpin:is(:hover, :focus-visible, .open) .tip, .mpin.left:is(:hover, :focus-visible, .open) .tip, .mpin.left:is(.mcar, .mdest):is(:hover, :focus-visible, .open) .tip, .mpin:is(.mcar, .mdest):is(:hover, :focus-visible, .open) .tip { translate: -50% 0; } }

/* the place you arrive at, opened from the destination point */
.arrive { position: absolute; inset: 0; clip-path: circle(0 at 60% 60%); z-index: 2; }
.arrive img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.arrive-tail { display: none; }
/* tall screens: the whole station (it's wide), with its night sky above and the plaza below */
@media (max-aspect-ratio: 4/5) {
  .drive-stage .arrived { bottom: 40px; padding: 16px 20px; }
  .drive-stage .arrived h2 { font-size: 32px; margin: 10px 0 6px; }
  .arrive { background: linear-gradient(180deg, #1D3EA6 0%, #2445AE 45%, #9A9691 55%, #A09A95 100%); }
  .arrive img { position: absolute; left: 50%; top: 38%; width: 132vw; max-width: none; height: auto; transform: translate(-50%, -50%); object-fit: initial;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
}
/* wide screens (2026-10-19): the station full width, as before, with the tops of its towers just under the header
   (they were behind it), and the rest of the photo carrying on below the screen (.arrive-tail), so a shorter screen
   scrolls on to the doors and the plaza before the next section instead of cutting them off. The photo is 4:3, so
   at full width it's 75vw tall; the towers start about 18% down it (13.5vw). O: where the photo's top sits. */
@media (min-aspect-ratio: 4/3) {
  .drive, .arrive-tail { --o: max(calc(100vh - 75vw), min(0px, calc(84px - 13.5vw))); }
  .arrive img { object-position: 50% var(--o); }
  .arrive::after { background: linear-gradient(180deg, rgba(15, 26, 43, 0.15) 0%, transparent 35%); }
  .arrive-tail { display: block; position: relative; z-index: 1; height: calc(75vw + var(--o) - 100vh); background: #9d9994 url(/assets/arrive-detroit.webp?v=20261006) 50% calc(var(--o) - 100vh) / 100% auto no-repeat; }
}
.arrive::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 43, 0.15) 0%, transparent 35%, transparent 60%, rgba(15, 26, 43, 0.35) 100%); }

/* frosted white panels over the map */
.glass { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.hero-card { position: absolute; z-index: 3; left: max(24px, calc((100vw - var(--max)) / 2 + 24px)); top: 50%; transform: translateY(-46%); width: min(600px, calc(100vw - 48px)); border-radius: 20px; padding: clamp(28px, 4vw, 48px); will-change: opacity, transform; }
.hero-card h1 { font: 800 clamp(44px, 5.2vw, 74px)/0.92 var(--display); text-transform: uppercase; margin: 20px 0 22px; color: var(--text); }
.hero-card p { color: var(--body-text); font-size: clamp(17px, 1.4vw, 19px); margin: 0 0 30px; }
.hero-card .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-card .fine { margin-top: 18px; font: 600 13px/1.4 var(--label); letter-spacing: 0.06em; color: var(--dim); }

.trip { position: absolute; z-index: 3; right: max(24px, calc((100vw - var(--max)) / 2 + 24px)); top: 112px; border-radius: 12px; padding: 14px 18px; display: flex; gap: 16px; align-items: center; opacity: 0; transform: translateY(-8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.trip.on { opacity: 1; transform: none; }
.trip .eta { font: 700 34px/1 var(--display); color: var(--text); }
.trip .eta small { font: 600 14px/1 var(--label); color: var(--sub); margin-left: 4px; }
.trip .to { font: 600 13px/1.4 var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); }
.trip .to b { color: var(--text); font-weight: 700; }

.arrived { position: absolute; z-index: 3; left: 50%; bottom: max(40px, 8vh); transform: translate(-50%, 16px); opacity: 0; width: min(560px, calc(100vw - 40px)); border-radius: 18px; padding: 24px 28px; text-align: center; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.arrived.on { opacity: 1; transform: translate(-50%, 0); }
.arrived h2 { font: 700 clamp(36px, 4.6vw, 54px)/0.95 var(--display); text-transform: uppercase; margin: 14px 0 10px; }
.arrived p { margin: 0; color: var(--sub); font-size: 16px; }

.cue { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); font: 700 12px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); display: grid; justify-items: center; gap: 10px; transition: opacity 0.4s var(--ease); }
.cue::after { content: ''; width: 2px; height: 34px; background: linear-gradient(var(--sub), transparent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the rest of the page, over a light wash of the place you arrived at */
.after { position: relative; }
.after-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; z-index: 0; overflow: hidden; }
.after-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.after-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245, 246, 248, 0.82), rgba(245, 246, 248, 0.93) 35%, rgba(245, 246, 248, 0.97)); }
.after > section, .after > .strip, .after > footer { position: relative; z-index: 1; }
.after .tile { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* destinations: photos with white captions over a dark fade */
.places { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 16px; }
.place { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); margin: 0; }
.place img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.place:hover img { transform: scale(1.04); }
.photo-credit { margin: 14px 0 0; font-size: 13px; color: var(--dim); }
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.place::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 26, 43, 0.8)); }
.place .cap { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: end; gap: 12px; color: #FFFFFF; }
.place .cap b { font: 700 28px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; display: block; }
.place .cap small { color: #E3E8F0; font-size: 14px; }
.place .tag { background: rgba(255, 255, 255, 0.92); color: var(--text); }
.place.big { grid-row: span 2; }
@media (max-width: 860px) { .places { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; } .place.big { grid-column: span 2; grid-row: auto; } }

@media (min-width: 721px) { .cue { left: auto; right: max(24px, calc((100vw - var(--max)) / 2 + 24px)); transform: none; } }
@media (max-width: 720px) {
  .hero-card { top: auto; bottom: 88px; transform: none; left: 16px; width: calc(100vw - 32px); border-radius: 16px; }
  .trip { left: 16px; right: 16px; top: 96px; justify-content: space-between; }
}

/* without motion: no pinned drive, the map with the whole route, then the place */
@media (prefers-reduced-motion: reduce) {
  .drive { height: 100vh; }
  .mapframe .route-glow, .mapframe .route { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .car-dot, .cue, .trip { display: none; }
  .pin-end-ring { animation: none; }
}