/* Night City: one walk from dusk to dawn. The clock drives the sky;
   the venues wait under the neon; rain everywhere it should be.
   All motion respects prefers-reduced-motion. */

body[data-room="night_city"] { --accent-rgb: 242,95,176; overflow-x: clip; }

/* ---------- nightfall (entry) ---------- */
.nightfall { position: fixed; inset: 0; z-index: 10000; background: #0a0a0e;
  display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.nightfall.gone { display: none; }
.nightfall.lift { animation: nf-lift 1s ease forwards; }
@keyframes nf-lift { to { opacity: 0; visibility: hidden; } }
.nf-air { position: absolute; inset: 0; }
.nf-sky { position: absolute; inset: -6% -3% -20%; width: 106%; height: 126%; object-fit: cover;
  opacity: 0; animation: nf-sky-in 4.8s ease forwards; }
@keyframes nf-sky-in {
  0% { opacity: 0; transform: scale(1.16) translateY(2%); }
  16% { opacity: 1; }
  100% { opacity: .7; transform: scale(1.02) translateY(-4%); } }
.nf-rain-art { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 44%, #000 36%, transparent 78%);
  mask-image: radial-gradient(ellipse 64% 60% at 50% 44%, #000 36%, transparent 78%);
  animation: nf-rain-in 4.2s ease-out .3s forwards; }
@keyframes nf-rain-in {
  0% { opacity: 0; transform: translateY(-6%) scale(1.12); }
  18% { opacity: .9; }
  100% { opacity: .3; transform: translateY(4%) scale(1.02); } }
.nf-wash { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(242,95,176,.35), rgba(98,230,246,.12) 55%, transparent 75%);
  animation: nf-wash-in 2.6s ease-out forwards; }
@keyframes nf-wash-in { 0% { opacity: .9; } 60% { opacity: .3; } 100% { opacity: .15; } }
.nf-rain { position: absolute; inset: 0; pointer-events: none; }
.nfr { position: absolute; top: -12vh; width: 1.5px; border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(216,226,240,.55) 30%, rgba(140,180,220,.25));
  animation: nfr-fall linear forwards; }
@keyframes nfr-fall { to { transform: translateY(118vh); opacity: .2; } }

.nf-titles { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.nf-plate { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .42em;
  text-transform: uppercase; color: #cbb8dd; opacity: 0; animation: nw-in 1s ease .3s forwards; }
.nf-title { font-family: "Tilt Neon", system-ui, sans-serif; font-weight: 400; color: #fff2fa;
  font-size: clamp(54px, 10vw, 148px); line-height: 1.02; margin: 14px 0 6px; }
.nf-title .glint { color: #f25fb0; }
.nf-line { font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic;
  font-size: clamp(16px, 2vw, 23px); color: #cbc4dd; }
/* neon flicker on: stutter, catch, hum */
.nw { display: inline-block; opacity: 0; }
.nw { animation: neon-on 1.1s linear var(--nd, 0s) forwards; }
.nf-title .nw { text-shadow: 0 0 18px rgba(242,95,176,0), 0 0 60px rgba(242,95,176,0); }
.nf-title .nw.glint { animation: neon-on-glow 1.3s linear var(--nd, 0s) forwards; }
@keyframes neon-on {
  0% { opacity: 0; } 7% { opacity: .8; } 11% { opacity: .1; } 17% { opacity: .9; }
  21% { opacity: .2; } 28% { opacity: 1; } 33% { opacity: .5; } 40% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes neon-on-glow {
  0% { opacity: 0; text-shadow: none; } 8% { opacity: .7; } 12% { opacity: .1; } 19% { opacity: .95; }
  24% { opacity: .25; } 31% { opacity: 1; text-shadow: 0 0 18px rgba(242,95,176,.7), 0 0 70px rgba(242,95,176,.4); }
  37% { opacity: .6; text-shadow: 0 0 8px rgba(242,95,176,.3); }
  45% { opacity: 1; }
  100% { opacity: 1; text-shadow: 0 0 22px rgba(242,95,176,.75), 0 0 90px rgba(242,95,176,.45); } }
.nf-invite { font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic;
  font-size: clamp(15px, 1.6vw, 20px); color: #62e6f6; margin-top: 24px; opacity: 0;
  animation: nw-in 1.2s ease var(--nd, 3.5s) forwards;
  text-shadow: 0 0 16px rgba(98,230,246,.5); }
@keyframes nw-in { to { opacity: 1; } }
.nf-skip { position: absolute; right: 26px; bottom: 22px; z-index: 3;
  background: none; border: none; color: #8c86a0; font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; cursor: pointer;
  opacity: 0; animation: nw-in 1s ease var(--nd, 1.8s) forwards; }
.nf-skip:hover { color: #ff8ac8; }
.nightfall.ripple .nf-sky, .nightfall.ripple .nf-rain-art, .nightfall.ripple .nf-wash { animation-duration: .8s; animation-delay: 0s; }
.nightfall.ripple .nw, .nightfall.ripple .nf-plate, .nightfall.ripple .nf-invite, .nightfall.ripple .nf-skip { animation-delay: 0s; animation-duration: .5s; }

/* ---------- the transit ticker ---------- */
.ticker { position: fixed; left: 0; right: 0; top: 0; z-index: 41; height: 34px; overflow: hidden;
  background: #07070b; border-bottom: 1px solid rgba(242,95,176,.35);
  box-shadow: 0 4px 30px rgba(242,95,176,.12); opacity: 0; transition: opacity .6s ease;
  pointer-events: none; }
.ticker.on { opacity: 1; }
.ticker-crawl { position: absolute; white-space: nowrap; top: 50%; transform: translateY(-50%);
  animation: crawl 26s linear infinite; }
.ticker-crawl span { font-family: var(--font-ui); font-size: 12px; letter-spacing: .34em;
  color: #ffb84d; text-shadow: 0 0 8px rgba(255,184,77,.6), 0 0 2px rgba(255,184,77,.9);
  padding-right: 90px; }
@keyframes crawl { from { left: 100%; } to { left: -160%; } }
@media (max-width: 900px) {
  .ticker { height: 26px; }
  .ticker-crawl span { font-size: 10px; letter-spacing: .22em; padding-right: 60px; }
}

/* ---------- hours ---------- */
.nightwalk { position: relative; }
.nz { position: relative; }
.nz-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.nz-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(56px,9vh,120px) clamp(22px,4vw,56px); }

.nz-dusk { min-height: 92vh; display: flex; align-items: flex-end; border-bottom: none; }
.nz-dusk .nz-art { opacity: .88; }
.nz-dusk::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 32%, rgba(12,12,16,.62) 84%, rgba(22,18,30,.9) 100%); }
.nz-dusk .hero-inner { width: 100%; }
.nz-dusk .room-name { font-family: "Tilt Neon", system-ui, sans-serif; font-size: clamp(58px, 8.5vw, 132px);
  margin: 12px 0 8px; animation: none; line-height: 1.02; }
.nz-dusk .room-name .nw { animation: neon-on-glow 1.4s linear both; }
.nz-dusk .room-name .hw1 { animation-delay: .2s; }
.nz-dusk .room-name .hw2 { animation-delay: .75s; }
body.walked .nz-dusk .room-name .nw { animation-delay: .1s; animation-duration: .7s; }
.nz-note { font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic; font-size: 18px;
  color: #d9d3e8; max-width: 52ch; margin-top: 10px; text-shadow: 0 2px 16px rgba(6,6,10,.9); }
.dusk-cta { display: flex; gap: 18px; align-items: center; margin: 26px 0 8px; flex-wrap: wrap; }
.neon-btn { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: #0c0c10; background: #f25fb0; padding: 15px 26px;
  text-decoration: none; border: none; cursor: pointer; border-radius: 2px;
  box-shadow: 0 0 24px rgba(242,95,176,.45); transition: transform .2s, box-shadow .2s; }
.neon-btn:hover { transform: translateY(2px); box-shadow: 0 0 44px rgba(242,95,176,.7); }
.neon-ghost { font-family: var(--font-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #62e6f6; text-decoration: none; border-bottom: 1px solid rgba(98,230,246,.45); padding-bottom: 3px;
  text-shadow: 0 0 12px rgba(98,230,246,.4); }
.neon-ghost:hover { color: #a5f0fa; }

/* crosswalk dividers: hard zebra stripes, angled like the paint on the street */
.crosswalk { position: absolute; left: -4%; right: -4%; top: -34px; height: 46px; z-index: 4;
  pointer-events: none; transform: rotate(-1.2deg);
  background: repeating-linear-gradient(100deg,
    rgba(232,227,214,.13) 0 46px, transparent 46px 96px);
  border-top: 2px solid rgba(232,227,214,.1); border-bottom: 2px solid rgba(232,227,214,.08);
  box-shadow: 0 -10px 40px rgba(242,95,176,.08); }
.crosswalk.cw-2 { transform: rotate(1deg); }
.crosswalk.cw-3 { transform: rotate(-.8deg); }

.nz-midnight { background: linear-gradient(180deg, #080810, #16121e 50%, #0e0b16); }
.nz-midnight .nz-art { opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 100px, #000 240px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 100px, #000 240px); }
.nz-late { background: linear-gradient(180deg, #0e0b16, #0a0a12 55%, #0c0e18); }
.nz-late .nz-art { opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px);
  mask-image: linear-gradient(180deg, transparent 0, #000 220px); }
.nz-dawn { background: linear-gradient(180deg, #0c0e18, #1a2233 70%, #2b3350); min-height: 68vh; display: flex; align-items: flex-end; }
.nz-dawn .nz-art { opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 200px);
  mask-image: linear-gradient(180deg, transparent 0, #000 200px); }

.hour-head { position: relative; margin: 0 0 42px; max-width: 60ch; }
.hour-head::before { content: ""; position: absolute; inset: -38px -70px; z-index: -1;
  background: radial-gradient(ellipse at 42% 50%, rgba(8,7,12,.78), rgba(8,7,12,.42) 52%, transparent 74%);
  filter: blur(20px); }
.hour-plate { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: #ff8ac8; border: 1px solid rgba(242,95,176,.4);
  padding: 8px 14px; border-radius: 2px; background: rgba(12,12,16,.6);
  box-shadow: 0 0 18px rgba(242,95,176,.15); }
.hour-note { font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic; font-size: 18px;
  color: #c4bdd6; margin-top: 12px; max-width: 52ch; text-shadow: 0 2px 16px rgba(6,6,10,.9); }

/* crew chips + tickets (shared by the playbills) */
.crew-chip { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #0c0c10; background: #f25fb0; border: none; padding: 11px 18px; cursor: pointer;
  border-radius: 2px; text-decoration: none; display: inline-block;
  box-shadow: 0 0 18px rgba(242,95,176,.35);
  transition: transform .18s, box-shadow .18s; }
.crew-chip:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(242,95,176,.6); }
.crew-wait { font-family: var(--font-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #6a6480; }
.ticket-tag { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #ffb84d; border: 1px dashed rgba(255,184,77,.5); padding: 7px 11px; border-radius: 2px;
  background: linear-gradient(160deg, rgba(82,58,22,.4), rgba(44,30,10,.35)); }

/* ---------- late shift: lit windows + murals ---------- */
.window-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.litwin { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform .35s; }
.litwin:hover { transform: translateY(-5px); }
.litwin-frame { position: relative; aspect-ratio: 2/1; border-radius: 4px; overflow: hidden;
  border: 6px solid #1d1826; outline: 1px solid rgba(255,184,77,.25);
  box-shadow: 0 0 0 1px rgba(6,6,10,.9), 0 0 38px rgba(255,184,77,.14), 0 24px 50px -20px rgba(0,0,0,.9); }
.litwin-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,214,140,.1), transparent 40%); mix-blend-mode: screen; }
.litwin-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 2.4s ease; }
.litwin:hover .litwin-frame img { transform: scale(1.05); }
.litwin-dark { display: block; width: 100%; height: 100%;
  background: radial-gradient(120% 100% at 50% 0%, #241c2e, #0c0c10); }
.litwin-plate b { display: block; font-family: "Tilt Neon", system-ui, sans-serif; font-weight: 400; font-size: 19px; color: #e8e3d6; }
.litwin-plate i { font-family: var(--font-ui); font-style: normal; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #8c86a0; }
.mural-head { margin-top: 90px; }
.mural-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.mural { position: relative; display: block; text-decoration: none; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(232,227,214,.14); box-shadow: 0 20px 50px -22px rgba(0,0,0,.9); transition: transform .35s, box-shadow .35s; }
.mural::before { content: ""; position: absolute; left: 20%; right: 20%; top: -40%; height: 80%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,214,140,.22), transparent 70%); pointer-events: none; z-index: 2; }
.mural:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(242,95,176,.2), 0 26px 60px -22px rgba(0,0,0,.9); }
.mural img { width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; }
.mural-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 11px; z-index: 3;
  font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic; font-size: 16px; color: #efe9f5;
  background: linear-gradient(180deg, transparent, rgba(6,6,10,.85)); }

/* ---------- dawn ---------- */
.dawn-inner { width: 100%; text-align: center; padding-bottom: 12vh; }
.dawn-line { font-family: "Tilt Neon", system-ui, sans-serif; font-size: clamp(26px,3.4vw,44px); color: #e8e3d6;
  margin: 20px auto 26px; max-width: 26ch; line-height: 1.2; text-shadow: 0 0 30px rgba(255,184,77,.25); }
.dawn-ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- ambience ---------- */
.whisper { position: absolute; z-index: 3; font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic;
  font-size: clamp(15px,1.4vw,20px); color: rgba(183,176,204,.42); max-width: 24ch; pointer-events: none; }
.wspn-1 { right: 8%; bottom: 22%; transform: rotate(2deg); }
.wspn-2 { display: none; }
.wspn-3 { display: none; }
.wspn-4 { right: 10%; bottom: 10%; transform: rotate(-1.6deg); }
@media (max-width: 900px) { .whisper { display: none; } }

.cityrain { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

.steam { position: absolute; z-index: 1; width: 130px; height: 240px; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 50% 40% at 50% 80%, rgba(200,190,215,.24), transparent 70%);
  filter: blur(14px); animation: steam-rise 9s ease-in-out infinite; }
.st-1 { left: 12%; bottom: 8%; }
.st-2 { right: 16%; bottom: 18%; animation-delay: -4s; }
@keyframes steam-rise {
  0% { transform: translateY(0) scaleX(1); opacity: .15; }
  50% { opacity: .5; }
  100% { transform: translateY(-120px) scaleX(1.35); opacity: 0; } }

.siren { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 20%, rgba(255,80,90,.14) 38%, rgba(90,140,255,.14) 62%, transparent 80%);
  transform: translateX(-120%); }
.siren.pass { animation: siren-pass 3.4s ease-in-out forwards; }
@keyframes siren-pass { 0% { opacity: 0; transform: translateX(-120%); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }

/* rain ripple cursor */
.rippl { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%;
  border: 1.5px solid rgba(160,200,230,.5); opacity: .8;
  animation: rippl-grow var(--rt, 1.1s) ease-out forwards; }
@keyframes rippl-grow { to { transform: scale(3.2); opacity: 0; } }

/* margin cast slots */
.mgn { position: absolute; z-index: 2; pointer-events: none;
  animation: mgn-bob var(--mgd, 12s) ease-in-out infinite alternate; }
@keyframes mgn-bob { from { transform: translateY(-8px) rotate(-.8deg); } to { transform: translateY(10px) rotate(1deg); } }
.mgn-pigeons { top: 14%; right: 8%; width: clamp(180px, 17vw, 300px); opacity: .7; --mgd: 16s; }
.mgn-umbrella { left: 4%; top: 40%; width: clamp(120px, 11vw, 200px); opacity: .85; --mgd: 13s; }
.mgn-bike { right: 5%; top: 64%; width: clamp(160px, 15vw, 260px); opacity: .8; --mgd: 15s; }

/* title rise + wipe (shared grammar with the deep) */
@keyframes pw-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes pw-wipe { to { clip-path: inset(0 0 0 0); } }

/* ---------- reveals (same grammar as the deep) ---------- */
.rv { opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity .9s ease var(--bd, 0s), transform .9s cubic-bezier(.22,.9,.25,1) var(--bd, 0s), filter .9s ease var(--bd, 0s); }
.rv.in { opacity: 1; transform: none; filter: none; }


/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .signwall { padding-left: 0; }
  .street-line { display: none; }
  .signboard { width: 100% !important; margin: 26px 0 !important; transform: none !important; }
  .sign-arm { display: none; }
  .nz-dusk { min-height: 78vh; }
  .mgn-bike, .mgn-pigeons { display: none; }
  .train { animation: none; overflow-x: auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nightfall { display: none !important; }
  .nw, .nf-plate, .nf-invite, .nf-skip { animation: none; opacity: 1; }
  .nz-dusk .room-name .nw { animation: none; opacity: 1; text-shadow: 0 0 22px rgba(242,95,176,.6); }
  .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .steam, .siren, .cityrain, .rippl, .mgn { display: none; }
  .ticker-crawl { animation: none; left: 20px; }
  .train { animation: none; overflow-x: auto; }
  .sign-face, .sign-art { transition: none; }
}

/* ---------- the sign canyon ---------- */
.canyon-inner { max-width: 1720px; }
.signwall { position: relative; padding: 30px 0 60px; }
/* districts: the walk passes through different parts of the city. Four
   backdrop bands stacked down the canyon, cross-fading into each other. */
.district { position: absolute; left: -2%; right: -2%; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; opacity: .18;
  filter: blur(2.5px) saturate(.8) brightness(.75);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.district.d-1 { top: -4%; height: 32%; }
.district.d-2 { top: 24%; height: 32%; }
.district.d-3 { top: 52%; height: 30%; }
.district.d-4 { top: 78%; height: 27%; }
.street-line { display: none !important; }
.street-line-legacy { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,184,77,.5) 0 42px, transparent 42px 84px);
  filter: drop-shadow(0 0 8px rgba(255,184,77,.35)); opacity: .5; }
/* with painted road segments: real wet asphalt stacked down the canyon */
.street-line.has-road { width: clamp(110px, 10vw, 180px); background: none;
  display: flex; flex-direction: column; opacity: .45; filter: none; overflow: hidden; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  box-shadow: 0 0 60px rgba(242,95,176,.1); }
/* the joint between road segments: a band of street hardware */
.road-joint { display: block; width: 100%; height: 26px; flex: none; position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55) 30%, rgba(0,0,0,.75) 50%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0)),
    repeating-linear-gradient(90deg, rgba(20,18,24,.9) 0 26px, rgba(34,30,42,.9) 26px 30px);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.05), inset 0 -2px 3px rgba(0,0,0,.6); }
.road-joint::after { content: ""; position: absolute; left: 18%; right: 18%; top: -8px; height: 10px;
  background: radial-gradient(ellipse at 50% 100%, rgba(200,190,215,.16), transparent 70%);
  filter: blur(3px); }
.street-line.has-road img.road-joint-img { height: auto; }
.street-line.has-road img { width: 100%; display: block; flex: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* a crowded block of signage on a 12-column street grid: signs sit beside
   and over one another, different sizes, tilts, and depths. The road runs
   underneath it all. */
.signwall { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 10vh; align-items: start; }
.signboard { position: relative; z-index: 2; --va: #f25fb0; --va-rgb: 242,95,176; }
.signboard:nth-of-type(3n+2) { --va: #62e6f6; --va-rgb: 98,230,246; }
.signboard:nth-of-type(3n+3) { --va: #ffb84d; --va-rgb: 255,184,77; }
/* the stage light: the street lights each venue as you reach it */
.signboard::after { content: ""; position: absolute; inset: -18% -24%; z-index: -3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(var(--va-rgb), .16), rgba(var(--va-rgb), .05) 50%, transparent 74%);
  opacity: 0; transition: opacity 1.1s ease; }
.signboard.stage-lit::after { opacity: 1; }
/* pairs share a row at staggered heights; heroes take the width alone */
.signboard:nth-of-type(1) { grid-column: 1 / span 6; grid-row: 1; transform: rotate(-1.8deg); }
.signboard:nth-of-type(2) { grid-column: 7 / span 6; grid-row: 1; transform: rotate(1.4deg); margin-top: 16vh; }
.signboard:nth-of-type(3) { grid-column: 2 / span 10; grid-row: 2; transform: rotate(-.7deg); }
.signboard:nth-of-type(4) { grid-column: 1 / span 7; grid-row: 3; transform: rotate(1.2deg); }
.signboard:nth-of-type(5) { grid-column: 8 / span 5; grid-row: 3; transform: rotate(-1.6deg); margin-top: 18vh; }
.signboard:nth-of-type(6) { grid-column: 1 / span 5; grid-row: 4; transform: rotate(1.1deg); margin-top: 6vh; }
.signboard:nth-of-type(7) { grid-column: 6 / span 7; grid-row: 4; transform: rotate(-.9deg); }
.signboard:nth-of-type(8) { grid-column: 2 / span 8; grid-row: 5; transform: rotate(1.3deg); }
.signboard:nth-of-type(9) { grid-column: 1 / span 6; grid-row: 6; transform: rotate(-1.9deg); }
.signboard:nth-of-type(10) { grid-column: 7 / span 6; grid-row: 6; transform: rotate(1.1deg); margin-top: 14vh; }
.signboard.open, .signboard:hover { z-index: 7; }

.sign-face { position: relative; display: block; width: 100%; background: none; border: none;
  padding: 0; cursor: pointer; text-align: left; }
.sign-arm { position: absolute; top: 38%; width: 60px; height: 10px; z-index: -1;
  background: repeating-linear-gradient(90deg, #2b2438 0 12px, #1a1622 12px 24px);
  border-top: 1px solid rgba(232,227,214,.14); }
.sb-l .sign-arm { right: -56px; }
.sb-r .sign-arm { left: -56px; }
.sign-art { width: 100%; display: block;
  filter: brightness(.94) saturate(1) drop-shadow(0 22px 46px rgba(0,0,0,.85));
  transition: filter .45s ease, transform .45s ease; }
.signboard:hover .sign-art, .signboard.open .sign-art {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 24px 60px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(242,95,176,.35));
  transform: scale(1.02); }
/* the rest of the wall dims when one sign is lit */
.signwall:hover .signboard:not(:hover):not(.open) .sign-art { filter: brightness(.45) saturate(.65) drop-shadow(0 22px 46px rgba(0,0,0,.85)); }
.signwall:hover .signboard.open .sign-art,
.signwall:hover .signboard:hover .sign-art {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 24px 60px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(242,95,176,.35)); }

.sign-name { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 8px;
  background: rgba(10,10,14,.72); padding: 8px 14px; border-radius: 3px;
  border-left: 2px solid rgba(var(--va-rgb),.65); backdrop-filter: blur(3px);
  font-family: "Tilt Neon", system-ui, sans-serif; font-size: clamp(20px, 2.2vw, 32px);
  color: #d9d3e8; transition: color .35s, text-shadow .35s; line-height: 1.1; }
.sign-no { font-style: normal; font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em;
  color: #62e6f6; text-shadow: 0 0 8px rgba(98,230,246,.5); }
.signboard:hover .sign-name, .signboard.open .sign-name { color: #fff2fa;
  text-shadow: 0 0 16px rgba(var(--va-rgb),.7), 0 0 50px rgba(var(--va-rgb),.32); }
.sign-open-hint { display: inline-block; margin-top: 6px; font-family: var(--font-ui); font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: #6a6480; opacity: 0; transform: translateY(-4px);
  transition: opacity .3s, transform .3s; }
.signboard:hover .sign-open-hint { opacity: 1; transform: none; }
.signboard.open .sign-open-hint { opacity: 0; }

/* the playbill unfolds under the sign like a menu taped to the door */
.playbill { overflow: hidden; margin-top: 14px; border-left: 3px solid rgba(242,95,176,.6);
  background: linear-gradient(170deg, rgba(22,18,30,.92), rgba(12,12,16,.9));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 40px rgba(242,95,176,.08);
  padding: 20px 22px; }
.playbill[hidden] { display: none; }
.bl { font-family: "Sofia Sans", system-ui, sans-serif; font-size: 16.5px; line-height: 1.6;
  color: #d9d3e8; margin-bottom: 12px; }
.bl b { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 10.5px;
  letter-spacing: .26em; text-transform: uppercase; color: #62e6f6; margin-bottom: 3px;
  text-shadow: 0 0 8px rgba(98,230,246,.4); }
.bill-crew { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.bill-crew form { margin: 0; }

/* ---------- the late train ---------- */
.railway { position: relative; overflow: hidden; padding: 20px 0 34px; }
.train { display: flex; gap: 18px; width: max-content; animation: train-drift 60s linear infinite; }
.railway:hover .train { animation-play-state: paused; }
@keyframes train-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.traincar { flex: none; width: 340px; text-decoration: none; position: relative;
  background: linear-gradient(180deg, #1d1826, #141019); border-radius: 10px 10px 6px 6px;
  border: 1px solid rgba(232,227,214,.12); padding: 14px 14px 12px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.9); }
.traincar::before { content: ""; position: absolute; left: 24px; right: 24px; top: -5px; height: 4px;
  border-radius: 2px; background: #2b2438; }
.car-window { display: block; aspect-ratio: 2/1; border-radius: 6px; overflow: hidden;
  border: 3px solid #0c0c10; outline: 1px solid rgba(255,184,77,.35);
  box-shadow: inset 0 0 30px rgba(255,214,140,.1), 0 0 26px rgba(255,184,77,.12); }
.car-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-plate { display: block; margin-top: 10px; }
.car-plate b { display: block; font-family: "Tilt Neon", system-ui, sans-serif; font-weight: 400;
  font-size: 17px; color: #e8e3d6; }
.car-plate i { font-family: var(--font-ui); font-style: normal; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #8c86a0; }
.rail-bed { height: 8px; margin-top: 10px;
  background: repeating-linear-gradient(90deg, #241c2e 0 26px, transparent 26px 52px); opacity: .6; }

/* ---------- the paste-up wall ---------- */
.pasteups { display: flex; flex-wrap: wrap; gap: 30px 24px; align-items: flex-start; }
.pasteup { position: relative; display: block; text-decoration: none; width: min(300px, 44%);
  background: #efe9dc; padding: 10px 10px 14px;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.95);
  clip-path: polygon(1% 0, 99% 1%, 100% 97%, 97% 100%, 2% 99%, 0 96%);
  transition: transform .35s; }
.pu-1 { transform: rotate(-2.4deg); }
.pu-2 { transform: rotate(1.6deg); margin-top: 26px; }
.pu-3 { transform: rotate(-1deg); margin-top: 12px; }
.pasteup:hover { transform: rotate(0) translateY(-4px); z-index: 3; }
.pasteup::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 30% at 50% -10%, rgba(255,214,140,.28), transparent 70%),
    linear-gradient(180deg, rgba(60,45,80,.12), transparent 30%); }
.pasteup img { width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; filter: saturate(.92); }
.pasteup .mural-title { position: static; display: block; padding: 10px 2px 0; background: none;
  font-family: "Sofia Sans", system-ui, sans-serif; font-style: italic; font-size: 15px; color: #3a3346; }

/* ---------- city life ---------- */
/* the wet street holds every sign's reflection */
.sign-visual { position: relative; display: block; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sign-face { perspective: 1100px; }
.sign-art { animation: sign-breath 9s ease-in-out infinite alternate; }
@keyframes sign-breath { from { scale: 1; } to { scale: 1.014; } }
.sign-visual::before { content: ""; position: absolute; inset: -12% -16%; z-index: -2;
  background: radial-gradient(ellipse at 50% 55%, rgba(8,8,12,.85), rgba(8,8,12,.45) 55%, transparent 78%);
  filter: blur(14px); box-shadow: 0 0 90px rgba(var(--va-rgb), .14); }
.sign-reflect { position: absolute; left: 0; top: 100%; width: 100%; height: 42%;
  object-fit: cover; object-position: top;
  transform: scaleY(-1); opacity: .16; filter: blur(4px) saturate(1.2) brightness(1.1);
  -webkit-mask-image: linear-gradient(0deg, transparent 8%, rgba(0,0,0,.9) 90%);
  mask-image: linear-gradient(0deg, transparent 8%, rgba(0,0,0,.9) 90%);
  pointer-events: none; z-index: -1;
  animation: reflect-shimmer 6s ease-in-out infinite alternate; }
@keyframes reflect-shimmer { from { transform: scaleY(-1) skewX(0deg); opacity: .13; } to { transform: scaleY(-1) skewX(1.4deg); opacity: .2; } }
.signboard:hover .sign-reflect, .signboard.open .sign-reflect { opacity: .3; }

/* districts assert themselves; a neon plate names each as you cross */

.district::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 50%, rgba(12,12,16,.25), rgba(12,12,16,.6) 90%); }
.district-name { position: absolute; left: -3vw; top: 20%; z-index: 2;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: "Tilt Neon", system-ui, sans-serif; font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: .18em; color: #fff2fa; opacity: 0; transition: opacity .5s;
  text-shadow: 0 0 16px rgba(242,95,176,.7), 0 0 60px rgba(242,95,176,.35);
  border-left: 2px solid rgba(242,95,176,.5); padding-left: 12px; }
.district-name.dn-1 { top: 4%; }
.district-name.dn-2 { top: 29%; left: auto; right: -3vw; border-left: none; border-right: 2px solid rgba(255,184,77,.5);
  padding-left: 0; padding-right: 12px; text-shadow: 0 0 16px rgba(255,184,77,.7), 0 0 60px rgba(255,184,77,.35); }
.district-name.dn-3 { top: 56%; }
.district-name.dn-4 { top: 81%; text-shadow: 0 0 16px rgba(98,230,246,.7), 0 0 60px rgba(98,230,246,.35);
  border-left-color: rgba(98,230,246,.5); }
.district-name.lit { opacity: 1; animation: neon-on 1s linear; }
/* living windows: warm lights blinking awake in the buildings */
.winlight { position: absolute; z-index: 1; background: rgba(255,214,150,.5);
  box-shadow: 0 0 8px rgba(255,214,150,.3); border-radius: 1px;
  animation: win-blink var(--wt, 7s) ease-in-out var(--wd, 0s) infinite; opacity: 0; }
@keyframes win-blink { 0%, 12% { opacity: 0; } 18%, 82% { opacity: .8; } 90%, 100% { opacity: 0; } }

/* power cables sag across the block, lamps hanging */
.cable { position: absolute; left: -4%; right: -4%; height: 90px; z-index: 1; pointer-events: none; opacity: .55;
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%2290%22%20viewBox%3D%220%200%201200%2090%22%3E%3Cpath%20d%3D%22M0%2012%20Q%20600%2084%201200%2012%22%20fill%3D%22none%22%20stroke%3D%22%2308080c%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q%20600%2084%201200%2012%22%20fill%3D%22none%22%20stroke%3D%22rgba%28232%2C227%2C214%2C.12%29%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); background-size: 100% 100%; opacity: .8; }
.cable.c-1 { top: 8%; }
.cable.c-2 { display: none; }
.cable.c-3 { display: none; }
.cable i { position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9b8, #ffb84d 60%, transparent 75%);
  box-shadow: 0 0 12px rgba(255,184,77,.7); transform-origin: 50% -22px;
  animation: lamp-sway var(--ls, 5s) ease-in-out infinite alternate; }
.cable i:nth-child(1) { left: 10%; top: 26px; --ls: 5.2s; }
.cable i:nth-child(2) { left: 30%; top: 52px; --ls: 4.4s; }
.cable i:nth-child(3) { left: 50%; top: 62px; --ls: 6s; }
.cable i:nth-child(4) { left: 70%; top: 52px; --ls: 4.8s; }
.cable i:nth-child(5) { left: 90%; top: 26px; --ls: 5.6s; }
@keyframes lamp-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* a car passes somewhere below: headlights sweep the block */
.headlights { position: absolute; left: 0; right: 0; top: 30%; height: 40%; z-index: 1;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 18% 30% at 30% 50%, rgba(255,240,210,.5), transparent 70%),
    radial-gradient(ellipse 18% 30% at 42% 50%, rgba(255,240,210,.4), transparent 70%);
  transform: translateX(-60%) skewX(-8deg); }
.headlights.pass { animation: headlight-pass 2.6s ease-in-out forwards; }
@keyframes headlight-pass {
  0% { opacity: 0; transform: translateX(-60%) skewX(-8deg); }
  18% { opacity: .8; }
  82% { opacity: .8; }
  100% { opacity: 0; transform: translateX(120%) skewX(-8deg); } }

/* the cast on the block */
.mgn { position: absolute; z-index: 2; pointer-events: none;
  animation: mgn-bob var(--mgd, 12s) ease-in-out infinite alternate; }
@keyframes mgn-bob { from { transform: translateY(-8px) rotate(-.8deg); } to { transform: translateY(10px) rotate(1deg); } }
.mgn-pigeons { top: 12%; right: 7%; width: clamp(160px, 14vw, 250px); opacity: .5; filter: blur(.6px); --mgd: 16s; }
.mgn-umbrella { left: 3%; top: 46%; width: clamp(120px, 11vw, 200px); opacity: .7; --mgd: 13s; }
.mgn-bike { right: 4%; top: 68%; width: clamp(150px, 13vw, 240px); opacity: .55; filter: blur(.6px); --mgd: 15s; }
.mgn-cat { left: 6%; bottom: 3%; width: clamp(150px, 13vw, 240px); opacity: .9; --mgd: 11s; }
@media (max-width: 900px) { .mgn-bike, .mgn-pigeons, .cable { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sign-reflect { animation: none; }
  .winlight, .headlights, .cable i { animation: none; display: none; }
  .district.lit .district-name { animation: none; }
  .mgn { animation: none; }
}

/* ---------- venue performances ---------- */
.vfx { position: absolute; z-index: 4; pointer-events: none; }
.vfx-steam { width: 34px; height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 80%, rgba(220,210,225,.4), transparent 70%);
  filter: blur(6px); animation: vfx-steam-rise var(--vt, 2.4s) ease-out forwards; }
@keyframes vfx-steam-rise { 0% { opacity: 0; transform: translateY(0) scale(.7); }
  25% { opacity: .8; } 100% { opacity: 0; transform: translateY(-110px) scale(1.5); } }
.vfx-note { font-family: "Sofia Sans", system-ui, sans-serif; font-size: 22px; color: rgba(var(--va-rgb, 98,230,246), .9);
  text-shadow: 0 0 12px rgba(var(--va-rgb, 98,230,246), .6);
  animation: vfx-note-rise var(--vt, 2.8s) ease-out forwards; }
@keyframes vfx-note-rise { 0% { opacity: 0; transform: translateY(0) rotate(-8deg); }
  20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px) translateX(var(--vx, 20px)) rotate(10deg); } }
.vfx-bubble { border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(240,248,255,.9), rgba(160,220,255,.3) 55%, transparent 72%);
  animation: vfx-bubble-rise var(--vt, 2.6s) ease-in forwards; }
@keyframes vfx-bubble-rise { 0% { opacity: 0; transform: translateY(0); }
  20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-100px) translateX(var(--vx, -14px)); } }
.vfx-lantern { width: 26px; height: 34px; border-radius: 46% 46% 42% 42%;
  background: radial-gradient(ellipse at 50% 45%, #ffd9a0, #e8842e 75%, #7a3d12);
  box-shadow: 0 0 24px rgba(255,184,77,.65), inset 0 -4px 6px rgba(120,60,15,.6);
  animation: vfx-lantern-rise var(--vt, 9s) ease-in forwards; }
@keyframes vfx-lantern-rise { 0% { opacity: 0; transform: translateY(0) rotate(-2deg); }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-72vh) translateX(var(--vx, 30px)) rotate(3deg); } }

/* focus mode: opening a playbill stages the whole street */
body.nc-focus .district { opacity: .08; }
body.nc-focus .signboard:not(.open) { filter: brightness(.45) saturate(.7); transition: filter .6s; }
body.nc-focus .cable, body.nc-focus .mgn { opacity: .25; }
.signboard { transition: filter .6s; }

@media (prefers-reduced-motion: reduce) {
  .vfx, .signboard::after { display: none; }
  .sign-art { animation: none; }
  .sign-visual { transition: none; }
}

/* ---------- THE WALK: a dolly down one neon street ---------- */
.walk { position: relative; height: 880vh; display: none; }
body.walk-on .walk { display: block; }
body.walk-on .walk-fallback { display: none; }

.walk-stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  perspective: 1000px; perspective-origin: 50% 42%;
  background:
    radial-gradient(46% 34% at 50% 42%, rgba(242,95,176,.14), rgba(98,230,246,.05) 55%, transparent 75%),
    radial-gradient(80% 50% at 50% 100%, rgba(34,26,44,.8), transparent 70%),
    linear-gradient(180deg, #0b0a14 0%, #171226 46%, #08070d 100%); }
.walk-world { position: absolute; inset: 0; transform-style: preserve-3d;
  will-change: transform; z-index: 1; }
.walk-stage::after { content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(90px 90px at 6vw 30%, rgba(242,95,176,.10), transparent 70%),
    radial-gradient(130px 130px at 12vw 62%, rgba(98,230,246,.08), transparent 70%),
    radial-gradient(70px 70px at 3vw 78%, rgba(255,184,77,.07), transparent 70%),
    radial-gradient(90px 90px at 94vw 26%, rgba(98,230,246,.09), transparent 70%),
    radial-gradient(120px 120px at 88vw 70%, rgba(242,95,176,.08), transparent 70%),
    radial-gradient(70px 70px at 97vw 55%, rgba(255,184,77,.07), transparent 70%),
    linear-gradient(90deg, #05060c, rgba(5,6,12,.94) 8vw, rgba(5,6,12,.5) 14vw, transparent 19vw),
    linear-gradient(270deg, #05060c, rgba(5,6,12,.94) 8vw, rgba(5,6,12,.5) 14vw, transparent 19vw); }
/* venues live in a second synced 3D layer that always paints on top */
.walk-front { position: absolute; inset: 0; transform-style: preserve-3d;
  will-change: transform; z-index: 3; pointer-events: none; }

/* the sky at the end of the street */
.w-sky { position: absolute; left: 50%; top: 44%; width: 3400px; height: auto;
  transform: translate(-50%, -50%) translateZ(-7600px) scale(2.4);
  filter: saturate(1.05);
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 50% 52%, #000 46%, transparent 78%);
  mask-image: radial-gradient(ellipse 48% 46% at 50% 52%, #000 46%, transparent 78%); }
.w-sky-dawn { opacity: 0; transition: opacity 1.2s ease; }
body.walk-dawn .w-sky-dawn { opacity: 1; }
body.walk-dawn .w-sky-dusk { opacity: 0; }
.w-sky-dusk { transition: opacity 1.2s ease; }

/* the ground: wet asphalt receding to the vanishing point */
.w-road { position: absolute; left: 50%; top: 58vh; width: 780px; height: 1300px;
  margin-left: -390px; transform-origin: top center;
  transform: translateZ(var(--gz, 0)) rotateX(88.5deg);
  opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%); }

/* the walls: district faces on both sides */
.w-wall { position: absolute; top: -18vh; width: 1500px; height: 134vh;
  background-size: cover; background-position: center;
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 96%, rgba(0,0,0,.4) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 96%, rgba(0,0,0,.4) 100%);
  mask-composite: intersect; }
.w-wall-l { left: 50%; transform-origin: left center;
  transform: translate3d(calc(-1000px * var(--xk, 1)), 0, var(--wz, 0)) rotateY(80deg); }
.w-wall-r { left: 50%; transform-origin: left center;
  transform: translate3d(calc(1000px * var(--xk, 1)), 0, var(--wz, 0)) rotateY(100deg); }

/* marquees mounted where districts change */
.w-marquee { position: absolute; left: 50%; top: 8vh; width: 300px;
  transform: translateX(-50%) translate3d(calc(var(--mx, -600px) * var(--xk, 1)), 0, var(--mz, -2000px)) rotateY(calc(var(--mx, -600px) / -60 * 1deg));
  filter: brightness(.9); }

/* cables overhead */
.w-cable { position: absolute; left: 50%; top: 6vh; width: 1500px; height: 80px;
  margin-left: -750px; transform: translateZ(var(--cz, -800px));
  background-image: radial-gradient(ellipse 50% 100% at 50% -20%, transparent 68%, rgba(8,8,12,.9) 69%, transparent 72%); }
.w-cable i { position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9b8, #ffb84d 60%, transparent 78%);
  box-shadow: 0 0 14px rgba(255,184,77,.75); top: 40px; }
.w-cable i:nth-child(1) { left: 16%; top: 28px; }
.w-cable i:nth-child(2) { left: 40%; top: 46px; }
.w-cable i:nth-child(3) { left: 62%; top: 44px; }
.w-cable i:nth-child(4) { left: 84%; top: 26px; }

/* the cast on the street */
.w-cast { position: absolute; left: 50%; top: auto; bottom: 39vh;
  width: var(--kw, 200px);
  transform: translateX(-50%) translate3d(calc(var(--kx, 0px) * var(--xk, 1)), 0, var(--kz, -1000px));
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.8)); }
.w-cast-high { top: 16vh; bottom: auto; }

/* the venues: stations along the street */
.w-venue { position: absolute; left: 50%; top: auto; bottom: 37vh; width: 42vh;
  transform: translateX(-50%) translate3d(calc(var(--vx, -470px) * var(--xk, 1)), 0, var(--vz, -800px));
  transform-style: preserve-3d; }
.w-venue.wv-p { width: 65vh; }
.w-venue.wv-l { width: 85vh; }
.w-venue::before { content: ""; position: absolute; inset: -14% -20%; z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, rgba(8,8,12,.9), rgba(8,8,12,.5) 52%, transparent 76%);
  filter: blur(16px); }
.w-venue-art { width: 100%; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.9)) drop-shadow(0 0 44px rgba(242,95,176,.28)); }
.w-venue .w-pool { position: absolute; left: 8%; right: 8%; bottom: -3.5%; height: 11%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent 75%);
  box-shadow: 0 0 46px rgba(242,95,176,.22);
  filter: blur(7px); transform: scaleY(.6); }
.w-venue-name { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  white-space: nowrap; display: inline-flex; gap: 10px; align-items: baseline;
  font-family: "Tilt Neon", system-ui, sans-serif; font-size: 26px; color: #fff2fa;
  background: rgba(10,10,14,.78); padding: 9px 16px; border-radius: 3px;
  border-left: 2px solid rgba(242,95,176,.65);
  text-shadow: 0 0 16px rgba(242,95,176,.6); opacity: 0; transition: opacity .5s; }
.w-venue-name i { font-style: normal; font-family: var(--font-ui); font-size: 12px;
  letter-spacing: .2em; color: #62e6f6; }
/* depth of field is continuous: the dolly writes --vo and --vblur each frame */
.w-venue { opacity: var(--vo, .4); filter: blur(var(--vblur, 2px)) brightness(var(--vbr, .7)); transition: none; }
.w-venue.v-near .w-venue-name { opacity: 1; }

/* the docked bill */
.walk-bill { position: absolute; top: 50%; transform: translateY(-50%);
  width: min(400px, 30vw); z-index: 5; }
.walk-bill.dock-l { left: 4vw; }
.walk-bill.dock-r { right: 4vw; left: auto; }
.wb { opacity: 0; transition: opacity .45s ease, transform .45s ease; transform: translateY(8px); }
.wb.show { opacity: 1; transform: none; }
.wb { background: linear-gradient(170deg, rgba(22,18,30,.94), rgba(12,12,16,.92));
  border-left: 3px solid rgba(242,95,176,.6); padding: 22px 24px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 40px rgba(242,95,176,.08); }
.wb-no { font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: #8c86a0; }
.wb-title { font-family: "Tilt Neon", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(24px, 2vw, 34px); color: #fff2fa; margin: 8px 0 10px; line-height: 1.1;
  text-shadow: 0 0 18px rgba(242,95,176,.5); }
.wb-line { font-family: "Sofia Sans", system-ui, sans-serif; font-size: 15px;
  line-height: 1.55; color: #c4bdd6; margin-bottom: 11px; }
.wb-line b { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 9.5px;
  letter-spacing: .26em; text-transform: uppercase; color: #62e6f6; margin-bottom: 2px;
  text-shadow: 0 0 8px rgba(98,230,246,.4); }
.w-venue[data-vi="0"] { bottom: 22vh; width: 56vh; }
.w-venue[data-vi="4"] { bottom: 27vh; }
.w-venue[data-vi="5"] { bottom: 27vh; }
.wb-crew { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wb-crew form { margin: 0; }

.walk-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: #8c86a0; opacity: 1; transition: opacity .8s; animation: hint-pulse 2.4s ease-in-out infinite; }
.walk-hint.gone { opacity: 0; }
@keyframes hint-pulse { 50% { transform: translateX(-50%) translateY(-6px); } }

/* the walk, pocket size: the same street with tighter lots. --xk compresses
   every x coordinate so both curbs fit a phone; depth stays depth. */
@media (max-width: 700px) {
  .walk-stage { perspective-origin: 50% 40%; }
  .walk-world, .walk-front { --xk: .45; }
  .w-road { width: 440px; margin-left: -220px; }
  .w-cable { width: 900px; margin-left: -450px; }
  .w-venue { width: 30vh; bottom: 33vh; }
  .w-venue.wv-p { width: 42vh; }
  .w-venue.wv-l { width: 54vh; }
  .w-venue[data-vi="0"] { width: 38vh; bottom: 24vh; }
  .w-venue-name { font-size: 16px; padding: 7px 12px; gap: 7px; }
  .w-venue-name i { font-size: 10px; }
  .walk-bill, .walk-bill.dock-l, .walk-bill.dock-r { left: 10px; right: 10px; bottom: 34px; top: auto;
    transform: none; width: auto; }
  .wb { padding: 13px 15px 11px; border-left-width: 2px; }
  .wb-title { font-size: 20px; margin: 5px 0 6px; }
  .wb-line { font-size: 12.5px; line-height: 1.45; margin-bottom: 8px; }
  .wb .wb-line ~ .wb-line { display: none; }
  .walk-hint { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .walk { display: none !important; }
  .walk-fallback { display: block !important; }
}