:root {
  --asphalt-night: #11151C;
  --wet-concrete: #2B3038;
  --fog-tile: #D8DDD6;
  --crosswalk-chalk: #F2EFE7;
  --signal-green: #2AF58A;
  --sodium-amber: #FFB13B;
  --brake-red: #F24B4B;
  --subway-violet: #6457FF;
  --rain-blue: #62C7FF;
  --font-mark: "Archivo Black", Inter, sans-serif;
  --font-body: Urbanist, Inter, sans-serif;
  --font-story: Newsreader, serif;
  --signal-current: #2AF58A;
}

* { box-sizing: border-box; }

html { background: var(--asphalt-night); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--crosswalk-chalk);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 18% 22%, rgba(98, 199, 255, .10), transparent 24rem),
    radial-gradient(circle at 78% 72%, rgba(100, 87, 255, .16), transparent 28rem),
    linear-gradient(145deg, #11151C 0%, #151922 44%, #0c1016 100%);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.city-map {
  position: relative;
  min-height: 400vh;
  isolation: isolate;
}

.fixed-city-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(216, 221, 214, .035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(216, 221, 214, .025) 1px, transparent 1px) 0 0 / 72px 72px;
}

.fixed-city-layer::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    repeating-linear-gradient(112deg, transparent 0 30px, rgba(242, 239, 231, .035) 31px 32px, transparent 33px 92px),
    radial-gradient(ellipse at 50% 50%, rgba(242, 239, 231, .05), transparent 34%);
  mix-blend-mode: screen;
  opacity: .8;
}

.x-crossing {
  position: absolute;
  inset: -16vh -14vw;
  transform-origin: center;
  transition: transform 900ms ease;
}

.diagonal-road {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vw;
  height: min(28vw, 260px);
  margin-left: -90vw;
  margin-top: max(-14vw, -130px);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .18), transparent 18%, transparent 82%, rgba(0, 0, 0, .2)),
    repeating-linear-gradient(90deg, rgba(216, 221, 214, .06) 0 1px, transparent 1px 22px),
    var(--wet-concrete);
  border-top: 2px solid rgba(242, 239, 231, .16);
  border-bottom: 2px solid rgba(242, 239, 231, .16);
  box-shadow: 0 0 80px rgba(0, 0, 0, .55) inset, 0 0 70px rgba(98, 199, 255, .08);
}

.road-a { transform: rotate(37deg); }
.road-b { transform: rotate(-37deg); }

.paint-stripe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 900px);
  height: 22px;
  margin-left: min(-40vw, -450px);
  background: repeating-linear-gradient(90deg, var(--crosswalk-chalk) 0 48px, transparent 48px 82px);
  opacity: .88;
  filter: drop-shadow(0 0 10px rgba(242, 239, 231, .12));
}

.stripe-a { transform: translateY(-80px) rotate(37deg); }
.stripe-b { transform: translateY(80px) rotate(37deg); }
.stripe-c { transform: translateY(-80px) rotate(-37deg); }
.stripe-d { transform: translateY(80px) rotate(-37deg); }

.route-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vw;
  height: 5px;
  margin-left: -70vw;
  border-radius: 999px;
  transform-origin: center;
  opacity: .8;
  animation: routePulse 5s ease-in-out infinite;
}

.route-green { background: var(--signal-green); transform: rotate(37deg) translateY(-35px); box-shadow: 0 0 28px var(--signal-green); }
.route-violet { background: var(--subway-violet); transform: rotate(-37deg) translateY(38px); box-shadow: 0 0 28px var(--subway-violet); animation-delay: -2s; }

.coordinate-plaza {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(84vw, 720px);
  transform: translate(-50%, -50%) rotate(-2deg);
  text-align: center;
  z-index: 5;
  pointer-events: auto;
  padding: 2rem;
}

.coordinate-plaza h1 {
  margin: 0;
  font-family: var(--font-mark);
  font-size: clamp(4.3rem, 13vw, 12rem);
  line-height: .78;
  letter-spacing: -.08em;
  color: var(--crosswalk-chalk);
  text-transform: lowercase;
  text-shadow: 0 8px 0 rgba(17, 21, 28, .8), 0 0 28px rgba(216, 221, 214, .18);
}

.plaza-kicker, .plaza-subtitle, .curb-label, .scene-number, .street-plaque {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}

.plaza-kicker { margin: 0 0 .6rem; color: var(--signal-current); font-size: .78rem; }
.plaza-subtitle { margin: .8rem 0 0; color: var(--fog-tile); font-size: .88rem; }

.signal-halo {
  position: absolute;
  inset: 10% 20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal-current) 40%, transparent), transparent 67%);
  filter: blur(14px);
  animation: haloBlink 3.7s steps(2, jump-none) infinite;
}

.traffic-signal {
  position: fixed;
  right: clamp(1rem, 4vw, 4rem);
  top: clamp(1rem, 5vh, 4rem);
  z-index: 6;
  display: grid;
  gap: .55rem;
  padding: .65rem;
  background: rgba(17, 21, 28, .76);
  border: 1px solid rgba(216, 221, 214, .2);
  border-radius: 999px;
  box-shadow: 0 20px 55px rgba(0,0,0,.48);
}

.light { width: 18px; height: 18px; border-radius: 50%; display: block; background: #2B3038; opacity: .45; transition: 260ms ease; }
.light.red { --light-color: #F24B4B; }
.light.amber { --light-color: #FFB13B; }
.light.green { --light-color: #2AF58A; }
.light.active { background: var(--light-color); opacity: 1; box-shadow: 0 0 22px var(--light-color); }

.curb-label {
  position: fixed;
  z-index: 4;
  padding: .45rem .7rem;
  border: 1px solid rgba(242, 239, 231, .2);
  background: rgba(43, 48, 56, .7);
  color: var(--fog-tile);
  font-size: .68rem;
}

.label-north { top: 16%; left: 24%; transform: rotate(-37deg); }
.label-east { top: 38%; right: 7%; transform: rotate(36deg); color: var(--rain-blue); }
.label-south { bottom: 12%; left: 46%; transform: rotate(-36deg); color: var(--sodium-amber); }
.label-west { top: 66%; left: 5%; transform: rotate(36deg); color: var(--signal-green); }

.zoning-grid {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(100, 87, 255, .22);
  background: linear-gradient(45deg, transparent 49.7%, rgba(100, 87, 255, .20) 50%, transparent 50.3%);
  opacity: .25;
}

.map-crease { position: fixed; inset: -20%; z-index: 2; pointer-events: none; opacity: .28; }
.crease-a { background: linear-gradient(36deg, transparent 49.8%, rgba(242,239,231,.28) 50%, transparent 50.2%); }
.crease-b { background: linear-gradient(-39deg, transparent 49.8%, rgba(98,199,255,.18) 50%, transparent 50.2%); }

.scene {
  position: relative;
  min-height: 100vh;
  z-index: 3;
  overflow: hidden;
}

.district-wedge {
  position: absolute;
  max-width: min(32rem, 82vw);
  padding: 1.25rem 1.4rem 1.5rem;
  background: linear-gradient(135deg, rgba(17, 21, 28, .74), rgba(43, 48, 56, .52));
  border: 1px solid rgba(216, 221, 214, .20);
  clip-path: polygon(0 0, 100% 8%, 92% 100%, 5% 88%);
  box-shadow: 0 24px 90px rgba(0,0,0,.32);
}

.district-wedge h2 {
  margin: .18rem 0 .6rem;
  font-family: var(--font-mark);
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.district-wedge p:not(.scene-number) {
  margin: 0;
  color: var(--fog-tile);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.45;
}

.scene-number { margin: 0; color: var(--signal-current); font-size: .72rem; }
.wedge-north { left: 6vw; top: 12vh; transform: rotate(-5deg); }
.wedge-east { right: 6vw; top: 18vh; transform: rotate(4deg); }
.wedge-west { left: 7vw; bottom: 16vh; transform: rotate(5deg); }
.wedge-south { right: 9vw; bottom: 13vh; transform: rotate(-4deg); }

.municipal-stamp {
  position: absolute;
  color: var(--sodium-amber);
  border: 2px solid currentColor;
  border-radius: 50%;
  width: 9.5rem;
  height: 9.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .76;
  transform: rotate(-16deg);
}
.stamp-one { right: 14vw; bottom: 16vh; }

.rain-ring {
  position: absolute;
  width: 8rem;
  height: 3.1rem;
  border: 2px solid var(--rain-blue);
  border-radius: 50%;
  opacity: 0;
  animation: rainRing 4s ease-out infinite;
}
.ring-one { left: 58vw; top: 23vh; }
.ring-two { left: 20vw; top: 72vh; animation-delay: -1.3s; }
.ring-three { right: 14vw; top: 62vh; animation-delay: -2.7s; }

.street-plaque {
  position: absolute;
  left: 12vw;
  bottom: 12vh;
  max-width: 16rem;
  color: var(--asphalt-night);
  background: var(--crosswalk-chalk);
  padding: .7rem .85rem;
  transform: rotate(37deg);
  font-size: .68rem;
}

.building-fragment {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: 18rem;
  height: 30rem;
  transform: rotate(-4deg);
  border-left: 8px solid rgba(216,221,214,.24);
  border-bottom: 8px solid rgba(216,221,214,.18);
  background: linear-gradient(180deg, rgba(43,48,56,.72), rgba(17,21,28,.6));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  padding: 2rem;
}

.window-story {
  border: 0;
  background: var(--sodium-amber);
  box-shadow: 0 0 20px rgba(255,177,59,.42);
  cursor: pointer;
  opacity: .72;
  min-height: 4.5rem;
  transition: transform 200ms ease, opacity 200ms ease, background 200ms ease;
}
.window-story:nth-child(2n) { background: var(--rain-blue); box-shadow: 0 0 20px rgba(98,199,255,.35); animation: windowBlink 4s linear infinite; }
.window-story:nth-child(3n) { background: var(--signal-green); box-shadow: 0 0 20px rgba(42,245,138,.25); animation: windowBlink 5.5s linear infinite -1s; }
.window-story:hover { transform: scale(1.08); opacity: 1; }

.story-bubble {
  position: absolute;
  left: 23vw;
  bottom: 19vh;
  max-width: 22rem;
  margin: 0;
  padding: .9rem 1rem;
  font-family: var(--font-story);
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--asphalt-night);
  background: var(--fog-tile);
  transform: rotate(3deg);
}

.alley-cat {
  position: absolute;
  right: 20vw;
  bottom: 23vh;
  width: 58px;
  height: 22px;
  background: #05070a;
  border-radius: 70% 45% 45% 70%;
  transform: rotate(-37deg);
}
.alley-cat::before { content: ""; position: absolute; right: -13px; top: 2px; border-left: 16px solid #05070a; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.alley-cat::after { content: ""; position: absolute; left: 8px; top: -18px; width: 18px; height: 18px; background: #05070a; clip-path: polygon(0 100%, 20% 10%, 45% 60%, 80% 10%, 100% 100%); }

.newspaper-box {
  position: absolute;
  right: 8vw;
  top: 23vh;
  width: 6rem;
  height: 7rem;
  display: grid;
  place-items: center;
  color: var(--asphalt-night);
  background: var(--rain-blue);
  font-family: var(--font-mark);
  font-size: .9rem;
  transform: rotate(36deg);
}

.underpass-wall {
  position: absolute;
  right: 8vw;
  top: 17vh;
  width: min(34rem, 80vw);
  min-height: 20rem;
  padding: 2rem;
  background:
    linear-gradient(90deg, rgba(242,239,231,.16) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(242,239,231,.12) 1px, transparent 1px) 0 0 / 42px 42px,
    rgba(216,221,214,.08);
  border: 1px solid rgba(242,239,231,.22);
  transform: rotate(-3deg);
}
.archive-fragment { font-family: var(--font-story); color: var(--fog-tile); font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.18; margin: 0; }
.archive-fragment.small { margin-top: 3rem; color: var(--sodium-amber); font-family: var(--font-body); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; }

.manhole {
  position: absolute;
  left: 18vw;
  top: 35vh;
  width: 8.6rem;
  height: 8.6rem;
  border: 2px solid rgba(216,221,214,.34);
  border-radius: 50%;
  background: radial-gradient(circle, #2B3038 0 45%, #11151C 46% 100%);
  transform: rotate(36deg);
  cursor: pointer;
}
.manhole-two { left: 38vw; top: 70vh; transform: rotate(-18deg) scale(.78); }
.manhole span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--fog-tile); left: 50%; top: 50%; opacity: .48; transition: 220ms ease; }
.manhole span:nth-child(1) { transform: translate(-50%, -50%) translate(0, -42px); }
.manhole span:nth-child(2) { transform: translate(-50%, -50%) translate(40px, -10px); }
.manhole span:nth-child(3) { transform: translate(-50%, -50%) translate(24px, 36px); }
.manhole span:nth-child(4) { transform: translate(-50%, -50%) translate(-26px, 34px); }
.manhole span:nth-child(5) { transform: translate(-50%, -50%) translate(-42px, -12px); }
.manhole.lit span, .manhole:hover span { background: var(--signal-green); box-shadow: 0 0 18px var(--signal-green); opacity: 1; }

.subway-dots {
  position: absolute;
  left: 52vw;
  bottom: 18vh;
  display: flex;
  gap: .8rem;
  transform: rotate(37deg);
}
.subway-dots i { width: .85rem; height: .85rem; border-radius: 50%; background: var(--subway-violet); box-shadow: 0 0 18px var(--subway-violet); }

.roofline {
  position: absolute;
  left: 6vw;
  bottom: 8vh;
  display: flex;
  align-items: end;
  gap: 1rem;
  transform: rotate(2deg);
}
.roof { width: clamp(7rem, 15vw, 15rem); background: rgba(43,48,56,.86); border-top: 5px solid var(--fog-tile); position: relative; box-shadow: 0 -20px 55px rgba(98,199,255,.12); }
.roof-one { height: 12rem; }
.roof-two { height: 18rem; }
.roof-three { height: 9rem; }
.water-tank { position: absolute; left: 35%; top: -4.6rem; width: 3.6rem; height: 3.1rem; border: 3px solid var(--fog-tile); border-radius: 50% 50% 12% 12%; }
.water-tank::before, .water-tank::after { content: ""; position: absolute; top: 100%; width: 3px; height: 2.3rem; background: var(--fog-tile); }
.water-tank::before { left: .55rem; } .water-tank::after { right: .55rem; }
.antenna { position: absolute; left: 62%; top: -5rem; width: 3px; height: 5rem; background: var(--sodium-amber); box-shadow: 0 0 16px var(--sodium-amber); }

.tram-wires { position: absolute; inset: 8vh 0 auto; width: 100%; height: 42vh; fill: none; pointer-events: none; }
.wire { stroke: var(--fog-tile); stroke-width: 2; opacity: .45; stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: drawWire 7s ease-in-out infinite alternate; }
.wire-two { stroke: var(--rain-blue); animation-delay: -2s; }
.final-stamp { right: 15vw; top: 17vh; color: var(--signal-green); width: 12rem; height: 12rem; font-size: .62rem; }

@keyframes haloBlink { 0%, 38% { opacity: .9; } 39%, 56% { opacity: .28; } 57%, 100% { opacity: .74; } }
@keyframes routePulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes rainRing { 0% { transform: scale(.2); opacity: .58; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes windowBlink { 0%, 61%, 100% { opacity: .85; } 62%, 72% { opacity: .24; } }
@keyframes drawWire { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .diagonal-road { height: 34vw; }
  .curb-label { display: none; }
  .coordinate-plaza { width: 100vw; }
  .district-wedge { left: 5vw; right: auto; top: 8vh; bottom: auto; }
  .building-fragment { left: 8vw; top: 38vh; width: 13rem; height: 21rem; gap: .8rem; padding: 1.1rem; }
  .story-bubble { left: 10vw; bottom: 12vh; }
  .underpass-wall { right: 5vw; top: 42vh; }
  .manhole { left: 9vw; top: 22vh; }
  .roofline { left: 3vw; }
  .final-stamp { right: 5vw; top: 39vh; }
}