/* The landing screen, the ride and the explore tabs. Colours come from tokens in zoo.css. */
:root { --ride-dim: rgba(8, 12, 18, .55); --ride-card: rgba(255, 255, 255, .94); --fx-hot: #e2532d; --fx-ok: #2f8f5b; --fx-pin: #15202b; --fx-white: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ride-dim: rgba(0, 0, 0, .6); --ride-card: rgba(22, 31, 40, .94); --fx-hot: #ff7a52; --fx-ok: #5fd08c; --fx-pin: #15202b; --fx-white: #ffffff; } }
:root[data-theme="dark"] { --ride-dim: rgba(0, 0, 0, .6); --ride-card: rgba(22, 31, 40, .94); --fx-hot: #ff7a52; --fx-ok: #5fd08c; --fx-pin: #15202b; --fx-white: #ffffff; }

.ride-page .bar { position: relative; }

/* landing */
.land { position: relative; min-height: calc(100svh - 58px); display: grid; align-items: end; overflow: hidden; background: var(--map-sea); }
.land-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
@media (prefers-reduced-motion: no-preference) { .land-map { animation: drift 40s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: scale(1.15) translate(0, 0); } to { transform: scale(1.35) translate(-4%, 3%); } }
.land::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 18, .05) 0%, rgba(8, 12, 18, .55) 45%, rgba(8, 12, 18, .9) 100%); }
.land-in { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 36px; color: var(--fx-white); }
.land .kicker { color: rgba(255, 255, 255, .8); }
.land h1 { font-weight: 800; font-size: clamp(44px, 10vw, 104px); letter-spacing: -.035em; line-height: .98; margin: 0; text-shadow: 0 3px 18px rgba(0, 0, 0, .4); }
.land .m2 { color: #9fe6ee; }
.hook { font: 700 clamp(22px, 3.4vw, 30px)/1.2 'Archivo', sans-serif; margin: 0 0 18px; }
.paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); max-width: 900px; }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .7); color: var(--fx-white); text-decoration: none; backdrop-filter: blur(4px); }
.path strong { display: block; font-size: 20px; }
.path small { display: block; font: 500 15px 'Archivo Narrow', sans-serif; opacity: .9; }
.path.ride { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.path:hover { transform: translateY(-2px); }
.p-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid currentColor; font-size: 16px; flex: none; }

/* the ride */
.ride { position: relative; border-top: 2px solid var(--ink); }
.ride-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--map-sea); transition: background .8s; }
.ride-stage[data-map="la"] { background: var(--la-land); }
.ride-map { position: absolute; left: 0; top: 0; width: 100%; height: 62svh; opacity: 0; transition: opacity .8s; }
@media (min-width: 900px) { .ride-map { height: 100%; } }
.ride-map.is-on { opacity: 1; }
.dim { fill: var(--ride-dim); pointer-events: none; }
.la-bg { fill: var(--la-land); }
.ride-hud { position: absolute; top: 12px; right: max(16px, env(safe-area-inset-right)); display: flex; gap: 8px; font: 700 14px 'Archivo Narrow', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.ride-hud span { background: var(--ride-card); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
.steps { list-style: none; margin: -100svh 0 0; padding: 0; position: relative; z-index: 2; }
.step { min-height: 100svh; display: flex; align-items: flex-end; padding: 0 max(16px, env(safe-area-inset-right)) 4svh max(16px, env(safe-area-inset-left)); pointer-events: none; }
.step:first-child { padding-top: 0; }
@media (min-width: 900px) { .step { align-items: center; padding-left: max(5vw, 16px); padding-bottom: 0; } }
.card-ride { pointer-events: auto; width: 100%; max-width: 400px; background: var(--ride-card); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: .35; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.step.is-active .card-ride { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .card-ride { transition: none; transform: none; } }
.card-ride h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; margin-bottom: .3em; }
.card-ride p { margin: 0 0 .4em; font-size: 17px; }
.stop { font: 700 13px 'Archivo Narrow', sans-serif !important; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.src-ride { font: 500 13px 'Archivo Narrow', sans-serif !important; color: var(--muted); margin: 6px 0 0 !important; }
.card-ride .cta { margin-top: 10px; }

/* effects */
.pin .pin-dot { fill: var(--fx-hot); stroke: var(--fx-white); stroke-width: 3; }
.pin.z2 .pin-dot { fill: var(--map-pink); }
.pin.ok .pin-dot { fill: var(--fx-ok); }
.pulse { fill: none; stroke: var(--fx-hot); stroke-width: 4; }
.pin.z2 .pulse { stroke: var(--map-pink); }
.pin.ok .pulse { stroke: var(--fx-ok); }
.pin-lab { font: 800 17px 'Archivo', sans-serif; fill: var(--fx-pin); paint-order: stroke; stroke: var(--fx-white); stroke-width: 5px; }
.pin-lab.big { font-size: 18px; }
.pin-lab.hot { fill: var(--fx-hot); }
.fx-wall { stroke: var(--map-pink); stroke-width: 8; stroke-dasharray: 3 10; stroke-linecap: round; }
.fx-fence { fill: none; stroke: var(--fx-pin); stroke-width: 3; stroke-dasharray: 2 4; }
.fx-trail { fill: none; stroke: var(--fx-hot); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 14 12; opacity: .85; }
.fx-blast { fill: var(--fx-hot); opacity: .22; }
.fx-ghost { stroke: var(--la-fwy); stroke-width: 14; stroke-dasharray: 2 18; stroke-linecap: round; }
.snow { fill: var(--fx-white); opacity: .9; }
.ring-only { stroke: var(--fx-hot); }
.bus rect { fill: var(--fx-ok); stroke: var(--fx-pin); stroke-width: 2; }
.bus text { font: 800 12px 'Archivo Narrow', sans-serif; fill: var(--fx-white); }
.bus.gone rect { fill: var(--fx-hot); opacity: .8; }
.truck rect { fill: var(--fx-pin); stroke: var(--fx-white); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .pin { animation: drop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  .fx-trail { animation: march 1s linear infinite; }
  .fx-blast { animation: blast 2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .snow { animation: fall 2.4s ease-in infinite; }
  .bus.gone { animation: blink 1s steps(2) infinite; }
}
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes march { to { stroke-dashoffset: -26; } }
@keyframes blast { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes fall { from { transform: translateY(-14px); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(16px); opacity: 0; } }
@keyframes blink { 50% { opacity: .2; } }

/* explore */
.explore { background: var(--bg2); }
.ex-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ex-head h2 { margin: 0; }
.tabs { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; padding: 3px; background: var(--card); }
.tab { min-height: 44px; padding: 6px 18px; border: 0; border-radius: 999px; background: none; color: inherit; font: 700 16px 'Archivo', sans-serif; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.all-places { margin-top: 16px; }
.all-places summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 700 16px 'Archivo Narrow', sans-serif; }
.end { text-align: left; }
.end .big { font-size: clamp(20px, 2.6vw, 26px); max-width: 30em; }
.notes-hero { padding: 40px 0 20px; }
.notes-hero h1 { font-weight: 800; font-size: clamp(34px, 6vw, 56px); letter-spacing: -.02em; }
.themes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 54em; }
.themes-list li { background: var(--card); border: 2px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
.themes-list em { font-style: normal; font-weight: 700; color: var(--ours); }

/* story trails */
.trail-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-lab { font: 700 16px 'Archivo Narrow', sans-serif; }
.sw-t1 { background: #d9675a; border-radius: 50%; } .sw-t2 { background: #b0418a; border-radius: 50%; }
.trail-btn[aria-pressed="false"] { opacity: 1; background: var(--card); }
.trail-btn[aria-pressed="false"] .sw { visibility: visible; }
.trail-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.trailing #g-places, .trailing #g-z2 { opacity: .3; }
.trail-line { fill: none; stroke-width: 6; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .9; }
.tstop { cursor: pointer; }
.tstop:focus { outline: none; }
.tstop circle { stroke: var(--fx-white); stroke-width: 3; }
.tstop text { font: 800 14px 'Archivo', sans-serif; fill: var(--fx-white); pointer-events: none; }
.tstop.edge circle { stroke-dasharray: 4 3; }
.tstop.on circle, .tstop:hover circle { stroke: var(--fx-pin); stroke-width: 5; }
.tstop:focus-visible circle { stroke: var(--focus); stroke-width: 6; }
.where { font: 600 15px 'Archivo Narrow', sans-serif; color: var(--muted); margin: -4px 0 8px; }
.script-q { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--accent); font-style: italic; }
.tnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tnav .btn[disabled] { opacity: .4; cursor: default; }
.car { fill: #3a9e48; stroke: var(--fx-white); stroke-width: 3; }
.car-win { fill: var(--fx-white); opacity: .85; }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.quotes li { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 12px 14px; }
.quotes blockquote { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.quotes .who { margin: 0; font-size: 14px; color: var(--muted); }
.sources li, .quotes .who { overflow-wrap: anywhere; }