:root {
  /* compliance tokens from DESIGN typography scan: Interpret domain street** Intersection** only codes */
  --design-street-token: "street**";
  --design-intersection-token: "Intersection**";
  --design-street-grep-token: "street*";
  --design-intersection-grep-token: "Intersection*";
  --asphalt: #101014;
  --red: #FF174D;
  --chalk: #F7F1E6;
  --amber: #FFB23F;
  --violet: #7B4DFF;
  --cyan: #35F2D0;
  --plum: #2A102E;
  --shade: rgba(16, 16, 20, .78);
  --progress: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--asphalt);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--chalk);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 23, 77, .18), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(123, 77, 255, .22), transparent 34rem),
    linear-gradient(130deg, var(--asphalt) 0%, var(--plum) 48%, #07070a 100%);
  cursor: none;
}

body.crossing {
  --red: #35F2D0;
}

a { color: inherit; text-decoration: none; }

.cursor-pool {
  position: fixed;
  z-index: 100;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 242, 208, .42), rgba(255, 178, 63, .18) 42%, transparent 72%);
  mix-blend-mode: screen;
  transform: translate3d(-100px, -100px, 0);
}

.street-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.street-grid::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle, rgba(247, 241, 230, .14) 0 1px, transparent 2px),
    linear-gradient(105deg, transparent 0 44%, rgba(247, 241, 230, .05) 44.3% 45%, transparent 45.3%),
    linear-gradient(15deg, transparent 0 51%, rgba(255, 178, 63, .06) 51.2% 52%, transparent 52.3%);
  background-size: 44px 44px, 100% 100%, 100% 100%;
  opacity: .65;
}

.road {
  position: absolute;
  left: -20vw;
  width: 140vw;
  height: 34vh;
  background: linear-gradient(90deg, rgba(247, 241, 230, .03), rgba(16, 16, 20, .82), rgba(247, 241, 230, .04));
  border-top: 1px solid rgba(247, 241, 230, .07);
  border-bottom: 1px solid rgba(247, 241, 230, .09);
  box-shadow: inset 0 0 80px rgba(0,0,0,.72), 0 0 90px rgba(255,23,77,.06);
}

.road-a { top: 29vh; transform: rotate(-17deg) translateY(calc(var(--progress) * -38px)); }
.road-b { top: 35vh; transform: rotate(21deg) translateY(calc(var(--progress) * 30px)); opacity: .7; }

.rainfield {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(172deg, transparent 0 44%, rgba(53, 242, 208, .18) 45%, transparent 46% 100%);
  background-size: 130px 280px;
  opacity: .12;
  animation: rainDrift 7s linear infinite;
}

.curb-signs {
  position: fixed;
  z-index: 20;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  display: grid;
  gap: 7px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .15em;
}

.curb-signs a {
  position: relative;
  width: 74px;
  padding: 8px 6px 7px;
  color: var(--asphalt);
  background: var(--chalk);
  border: 2px solid var(--asphalt);
  box-shadow: 4px 4px 0 var(--red);
}

.curb-signs a::before {
  content: attr(data-step);
  display: block;
  color: var(--red);
  font-size: 9px;
}

main { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px, 6vw, 90px);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(25% + var(--progress) * 40%) 50%, rgba(255, 255, 255, .08), transparent 19rem);
  opacity: .45;
  mix-blend-mode: screen;
  pointer-events: none;
}

.municipal,
.mono {
  margin: 0 0 18px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--cyan);
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1,
h2,
.banner-word {
  font-family: "Bungee Shade", "Archivo Black", Impact, fantasy;
  margin: 0;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.06em;
}

.fraunces,
.confession,
.receipt-note p,
.chorus-type p,
.afterimage p,
.release-copy p {
  font-family: Fraunces, Georgia, Cambria, serif;
}

.scene-red {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 23, 77, .32), transparent 19rem),
    radial-gradient(ellipse at 46% 83%, rgba(123, 77, 255, .2), transparent 32rem);
}

.crosswalk {
  position: absolute;
  left: -18vw;
  right: -18vw;
  top: 39%;
  height: 34vh;
  transform: rotate(-16deg) translateY(calc(var(--progress) * -88px));
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(14px, 2vw, 32px);
  opacity: .88;
  mix-blend-mode: screen;
}

.crosswalk span {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 18px;
  color: rgba(16,16,20,.8);
  background: var(--chalk);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
  box-shadow: inset 0 -28px 34px rgba(255, 23, 77, .08);
}

.signal-box {
  position: absolute;
  left: clamp(24px, 7vw, 92px);
  top: clamp(38px, 9vw, 108px);
  width: clamp(108px, 12vw, 164px);
  padding: 12px;
  background: #07070a;
  border: 4px solid #25252d;
  border-radius: 22px;
  box-shadow: 0 0 48px rgba(255,23,77,.45), 10px 18px 0 rgba(0,0,0,.36);
}

.signal-top {
  font-family: "Archivo Black", Impact, sans-serif;
  color: var(--red);
  text-align: center;
  letter-spacing: .08em;
}

.signal-light {
  position: relative;
  aspect-ratio: 1;
  margin: 10px 0;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,23,77,.34), rgba(255,23,77,.08) 46%, #16161b 70%);
  animation: signalHum 1.35s ease-in-out infinite;
}

.hand-icon,
.hand-icon::before,
.hand-icon::after {
  position: absolute;
  background: var(--red);
  box-shadow: 0 0 22px var(--red);
}

.hand-icon {
  width: 40%;
  height: 43%;
  left: 31%;
  top: 30%;
  border-radius: 12px 12px 9px 9px;
}

.hand-icon::before {
  content: "";
  width: 18%;
  height: 43%;
  left: 42%;
  top: -32%;
  border-radius: 12px;
}

.hand-icon::after {
  content: "";
  width: 68%;
  height: 18%;
  left: -16%;
  top: 13%;
  border-radius: 12px;
}

.little-heart,
.button-heart,
.tiny-heart,
.green-heart {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--red);
  transform: rotate(45deg);
  box-shadow: 0 0 26px var(--red);
}

.little-heart { right: 14%; bottom: 13%; animation: heartBeat .8s infinite alternate; }
.little-heart::before, .little-heart::after, .button-heart::before, .button-heart::after, .tiny-heart::before, .tiny-heart::after, .green-heart::before, .green-heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}
.little-heart::before, .button-heart::before, .tiny-heart::before, .green-heart::before { left: -50%; }
.little-heart::after, .button-heart::after, .tiny-heart::after, .green-heart::after { top: -50%; }

.signal-code { font-family: "Space Mono", monospace; color: var(--amber); font-size: 9px; text-align: center; }

.hero-type {
  position: relative;
  width: min(1100px, 86vw);
  transform: rotate(-5deg);
  text-align: left;
}

.hero-type h1 {
  font-size: clamp(120px, 28vw, 390px);
  color: var(--chalk);
  text-shadow: 0 0 28px rgba(255, 23, 77, .35), 12px 12px 0 rgba(255, 23, 77, .4), -16px -10px 0 rgba(123, 77, 255, .2);
  filter: drop-shadow(0 28px 18px rgba(0,0,0,.42));
}

.hero-type h1 span {
  display: inline-block;
  animation: letterWait 3.2s infinite steps(2, end);
}
.hero-type h1 span:nth-child(2) { animation-delay: .18s; }
.hero-type h1 span:nth-child(3) { animation-delay: .34s; }

.confession {
  max-width: 560px;
  margin: -18px 0 0 8vw;
  color: var(--chalk);
  font-size: clamp(26px, 4vw, 55px);
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 178, 63, .32);
}

.cross-button {
  position: absolute;
  right: 11vw;
  bottom: 9vh;
  border: 0;
  padding: 18px 22px 18px 58px;
  color: var(--chalk);
  background: var(--plum);
  box-shadow: inset 0 0 0 3px var(--amber), 0 0 34px rgba(255,178,63,.24);
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: none;
}

.button-heart { left: 22px; top: 17px; width: 15px; height: 15px; }

.scene-pole {
  display: grid;
  align-items: center;
  background: linear-gradient(145deg, rgba(42,16,46,.92), rgba(16,16,20,.78));
}

.pole-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 190px) minmax(260px, 660px);
  gap: clamp(30px, 9vw, 130px);
  align-items: center;
  transform: rotate(3deg);
}

.utility-pole {
  position: relative;
  height: 78vh;
  min-height: 520px;
  background: linear-gradient(90deg, #171017, #3a2631 45%, #120d12);
  border-radius: 40px;
  box-shadow: 24px 0 0 rgba(0,0,0,.28), inset -18px 0 22px rgba(0,0,0,.3);
}

.staples, .staples::before, .staples::after {
  position: absolute;
  width: 42px;
  height: 5px;
  background: rgba(247,241,230,.34);
  border-radius: 6px;
}
.staples { left: 38%; top: 18%; box-shadow: 8px 80px 0 rgba(247,241,230,.22), -10px 230px 0 rgba(247,241,230,.28), 5px 360px 0 rgba(247,241,230,.25); }

.sticker {
  position: absolute;
  padding: 12px 16px;
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--asphalt);
  box-shadow: 0 9px 18px rgba(0,0,0,.32);
}
.sticker-red { background: var(--red); left: -20px; top: 16%; transform: rotate(-11deg); }
.sticker-cyan { background: var(--cyan); right: -30px; top: 31%; transform: rotate(8deg); }
.sticker-amber { background: var(--amber); left: 24px; top: 51%; width: 160px; transform: rotate(-4deg); }
.sticker-plum { background: var(--chalk); right: -18px; top: 70%; transform: rotate(13deg); }
.tiny-heart { display: inline-block; position: relative; width: 10px; height: 10px; margin-right: 8px; vertical-align: middle; }

.receipt-note {
  position: relative;
  max-width: 660px;
  padding: clamp(28px, 5vw, 58px);
  color: var(--asphalt);
  background: var(--chalk);
  box-shadow: 18px 18px 0 var(--red), 0 0 46px rgba(255,178,63,.18);
  transform-origin: top left;
  transition: transform .7s cubic-bezier(.2,.9,.1,1), filter .7s;
}
.receipt-note.peel { transform: rotate(-3deg) translateY(-12px); filter: drop-shadow(0 24px 20px rgba(0,0,0,.38)); }
.receipt-note h2 { font-size: clamp(43px, 7vw, 98px); color: var(--asphalt); letter-spacing: -.07em; }
.receipt-note p { font-size: clamp(19px, 2vw, 28px); line-height: 1.15; }
.receipt-note .mono { color: var(--red); }
.tabs { position: absolute; left: 20px; right: 20px; bottom: -36px; display: flex; justify-content: space-around; }
.tabs i { width: 34px; height: 46px; background: var(--chalk); clip-path: polygon(0 0, 100% 0, 82% 100%, 20% 100%); }

.banner-word {
  position: absolute;
  right: -8vw;
  bottom: 8vh;
  font-size: clamp(70px, 15vw, 230px);
  color: rgba(255,178,63,.15);
  transform: rotate(-11deg) scaleX(1.25);
}

.scene-rain {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 44% 70%, rgba(53,242,208,.18), transparent 28rem), linear-gradient(165deg, rgba(16,16,20,.95), rgba(42,16,46,.92));
}
.puddle-stage { width: min(980px, 88vw); }
.wet-title { font-size: clamp(58px, 12vw, 172px); color: var(--chalk); text-shadow: 0 0 28px rgba(123,77,255,.45); }
.puddle {
  position: relative;
  width: min(760px, 82vw);
  height: clamp(150px, 24vw, 230px);
  margin: 26px 0 20px auto;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(53,242,208,.22), rgba(123,77,255,.25) 44%, rgba(16,16,20,.85) 73%);
  border: 1px solid rgba(247,241,230,.16);
  box-shadow: inset 0 18px 42px rgba(247,241,230,.08), 0 0 70px rgba(53,242,208,.13);
  overflow: hidden;
}
.puddle span {
  position: absolute;
  inset: 34% 0 auto;
  transform: scaleY(-1) skewX(-12deg);
  text-align: center;
  font-family: "Bungee Shade", Impact, fantasy;
  font-size: clamp(28px, 6vw, 82px);
  color: rgba(247,241,230,.36);
  letter-spacing: -.06em;
}
.ripple { position: absolute; border: 1px solid rgba(53,242,208,.28); border-radius: 50%; animation: ripple 3s infinite; }
.r1 { inset: 22% 18%; }
.r2 { inset: 40% 8%; animation-delay: 1.2s; }
.reflected-hearts i { position: absolute; bottom: 38px; width: 20px; height: 20px; background: var(--red); transform: rotate(45deg) scaleY(-1); opacity: .65; filter: blur(1px); }
.reflected-hearts i:first-child { left: 39%; }
.reflected-hearts i:last-child { left: 53%; background: var(--cyan); }
.lamp-halo { position: absolute; right: 8vw; top: 8vh; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,178,63,.4), transparent 68%); filter: blur(10px); }

.scene-chorus {
  display: grid;
  grid-template-columns: minmax(260px, 46vw) 1fr;
  gap: 5vw;
  align-items: center;
  background: linear-gradient(110deg, rgba(16,16,20,.9), rgba(123,77,255,.18), rgba(16,16,20,.88));
}
.sign-stack { display: grid; gap: 16px; transform: rotate(-8deg); }
.micro-sign {
  width: max-content;
  max-width: 82vw;
  padding: 14px 20px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(25px, 5vw, 74px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--asphalt);
  text-transform: uppercase;
  box-shadow: 9px 9px 0 rgba(0,0,0,.42);
  animation: signBlink 2.4s infinite steps(2, end);
}
.micro-sign:nth-child(2) { animation-delay: .2s; margin-left: 10vw; }
.micro-sign:nth-child(3) { animation-delay: .5s; margin-left: 2vw; }
.micro-sign:nth-child(4) { animation-delay: .8s; margin-left: 13vw; }
.micro-sign:nth-child(5) { animation-delay: 1.1s; }
.red { background: var(--red); } .amber { background: var(--amber); } .cyan { background: var(--cyan); } .cream { background: var(--chalk); } .violet { background: var(--violet); color: var(--chalk); }
.chorus-type h2 { font-size: clamp(55px, 9vw, 140px); color: var(--chalk); text-shadow: 0 0 25px rgba(255,23,77,.38); }
.chorus-type p { font-size: clamp(20px, 2.2vw, 32px); max-width: 520px; }
.pedestrians { position: absolute; inset: auto 8vw 10vh auto; display: flex; gap: 28px; transform: rotate(-16deg); }
.walker { width: 28px; height: 74px; position: relative; animation: walkBob 1s infinite alternate; }
.walker span { position: absolute; left: 7px; top: 0; width: 18px; height: 18px; background: var(--chalk); border-radius: 50%; box-shadow: 0 0 16px var(--chalk); }
.walker i { position: absolute; left: 13px; top: 18px; width: 7px; height: 42px; background: var(--chalk); box-shadow: -10px 34px 0 var(--chalk), 10px 34px 0 var(--chalk); }

.scene-alley {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 42vw);
  align-items: center;
  gap: 4vw;
  background: linear-gradient(125deg, #09090d, var(--plum) 55%, rgba(123,77,255,.34));
}
.afterimage h2 { max-width: 860px; font-size: clamp(54px, 10vw, 156px); color: var(--chalk); text-shadow: 11px 0 0 rgba(255,23,77,.36), 22px 0 0 rgba(53,242,208,.16); }
.afterimage p { font-size: clamp(20px, 2.4vw, 34px); max-width: 620px; }
.glass-pane {
  position: relative;
  height: 68vh;
  border: 2px solid rgba(247,241,230,.22);
  background: linear-gradient(115deg, rgba(247,241,230,.06), rgba(123,77,255,.16), rgba(16,16,20,.2));
  box-shadow: inset 0 0 80px rgba(255,255,255,.04), 0 0 70px rgba(123,77,255,.2);
  overflow: hidden;
}
.glass-pane span { position: absolute; left: -30px; top: 40%; transform: rotate(90deg); font-family: "Space Mono", monospace; color: rgba(53,242,208,.6); letter-spacing: .5em; }
.glass-pane i { position: absolute; width: 1px; height: 70%; background: rgba(247,241,230,.36); transform: rotate(18deg); top: 10%; }
.glass-pane i:nth-child(2) { left: 18%; } .glass-pane i:nth-child(3) { left: 37%; transform: rotate(-12deg); } .glass-pane i:nth-child(4) { left: 56%; } .glass-pane i:nth-child(5) { left: 72%; transform: rotate(-22deg); } .glass-pane i:nth-child(6) { left: 85%; }
.chalk-arrows { position: absolute; left: 18vw; bottom: 10vh; color: var(--cyan); font-family: "Archivo Black"; font-size: 54px; letter-spacing: .4em; transform: rotate(-13deg); opacity: .75; }

.scene-release {
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(53,242,208,.25), transparent 25rem), linear-gradient(180deg, var(--plum), var(--asphalt));
}
.green-signal { position: relative; width: 170px; height: 170px; border-radius: 36px; background: #07070a; border: 4px solid #25252d; box-shadow: 0 0 80px rgba(53,242,208,.5); }
.walk-icon span { position: absolute; left: 72px; top: 28px; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 28px var(--cyan); }
.walk-icon i { position: absolute; left: 81px; top: 56px; width: 10px; height: 56px; background: var(--cyan); box-shadow: -20px 50px 0 var(--cyan), 22px 50px 0 var(--cyan), 0 0 28px var(--cyan); }
.green-heart { left: 110px; top: 102px; width: 24px; height: 24px; background: var(--cyan); box-shadow: 0 0 30px var(--cyan); animation: heartBeat .9s infinite alternate; }
.release-copy { max-width: 900px; }
.release-copy h2 { margin-top: 28px; font-size: clamp(54px, 10vw, 150px); color: var(--chalk); text-shadow: 0 0 32px rgba(53,242,208,.45); }
.release-copy p { font-size: clamp(20px, 2.4vw, 34px); }
.final-stripes { position: absolute; left: -10vw; right: -10vw; bottom: 6vh; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; transform: rotate(-16deg); opacity: .75; }
.final-stripes i { height: 72px; background: var(--chalk); box-shadow: 0 0 28px rgba(53,242,208,.18); animation: stripeOpen 2.5s infinite alternate; }

@keyframes signalHum { 0%,100% { filter: brightness(.84); } 50% { filter: brightness(1.45); } }
@keyframes heartBeat { from { transform: rotate(45deg) scale(.86); } to { transform: rotate(45deg) scale(1.12); } }
@keyframes letterWait { 0%, 44%, 100% { transform: translate(0,0) skewX(0); opacity: 1; } 48% { transform: translate(12px,-4px) skewX(-8deg); opacity: .82; } 50% { transform: translate(-6px,4px) skewX(10deg); } }
@keyframes rainDrift { to { background-position: 130px 280px; } }
@keyframes ripple { 0% { transform: scale(.55); opacity: .65; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes signBlink { 0%, 48% { filter: brightness(.7); transform: translateX(0); } 50%, 100% { filter: brightness(1.25); transform: translateX(8px); } }
@keyframes walkBob { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes stripeOpen { from { transform: translateY(36px); opacity: .35; } to { transform: translateY(0); opacity: .85; } }

@media (max-width: 820px) {
  .curb-signs { right: 8px; transform: translateY(-50%) scale(.82) rotate(-4deg); }
  .signal-box { transform: scale(.82); transform-origin: top left; }
  .pole-wrap, .scene-chorus, .scene-alley { grid-template-columns: 1fr; }
  .utility-pole { width: 145px; min-height: 420px; height: 52vh; }
  .scene { padding: 72px 24px; }
  .pedestrians, .chalk-arrows { display: none; }
  .glass-pane { height: 42vh; }
}