:root {
  /* Compliance note: Space Grotesk for readable copy, IBM Plex Mono in small uppercase stamped labels. */
  --deep: #07142E;
  --black: #030712;
  --steel: #A7B3C8;
  --chrome: #E6EDF7;
  --green: #B7FF4A;
  --orchid: #FF4FD8;
  --amber: #FFB547;
  --asphalt: #1C315B;
  --display: "Bungee Shade", "Impact", fantasy;
  --sticker: "Shrikhand", "Georgia", serif;
  --body: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--chrome);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 79, 216, 0.18), transparent 25rem),
    radial-gradient(circle at 80% 92%, rgba(183, 255, 74, 0.15), transparent 28rem),
    linear-gradient(145deg, var(--black), var(--deep) 42%, var(--asphalt));
  overflow-x: hidden;
}

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

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .21;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(230,237,247,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 62%, rgba(255,181,71,.15) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 48%, rgba(167,179,200,.08) 49% 51%, transparent 52%);
  background-size: 31px 37px, 43px 29px, 11px 100%;
}

.cursor-glow {
  position: fixed;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 49;
  pointer-events: none;
  background: var(--green);
  box-shadow: 0 0 18px var(--green), 0 0 55px rgba(183,255,74,.55), 0 0 120px rgba(255,79,216,.25);
  transform: translate(-50%, -50%);
  opacity: .7;
}

.bottle-compass {
  position: fixed;
  right: clamp(10px, 2vw, 32px);
  top: 50%;
  z-index: 60;
  display: grid;
  gap: 10px;
  transform: translateY(-50%) rotate(-4deg);
}

.bottle-compass a {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(167,179,200,.48);
  background: radial-gradient(circle at 35% 25%, var(--chrome), var(--asphalt) 28%, var(--black) 70%);
  color: var(--green);
  font: 600 11px/1 var(--mono);
  text-align: center;
  box-shadow: inset 0 0 12px rgba(3,7,18,.9), 0 0 18px rgba(183,255,74,.12);
  transition: transform .35s, border-color .35s, color .35s;
}

.bottle-compass a span { color: var(--steel); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.bottle-compass a:hover, .bottle-compass a.active { transform: rotate(18deg) scale(1.08); border-color: var(--green); color: var(--chrome); }

.stage {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 122px) clamp(24px, 7vw, 112px);
}

.stage::before {
  content: attr(data-beat);
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  top: 22px;
  z-index: -1;
  color: rgba(167,179,200,.13);
  font: 600 clamp(42px, 8vw, 138px)/.8 var(--mono);
  letter-spacing: -.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.coord {
  color: var(--amber);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero {
  background:
    linear-gradient(174deg, rgba(3,7,18,.92) 0 62%, rgba(28,49,91,.8) 63% 100%),
    radial-gradient(circle at 72% 32%, rgba(255,79,216,.18), transparent 22rem);
}

.hero .coord { position: absolute; top: 8vh; left: 7vw; }

.hero-sign {
  position: absolute;
  left: -5vw;
  top: 17vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(76px, 19vw, 292px);
  line-height: .78;
  letter-spacing: -.08em;
  color: var(--chrome);
  text-shadow: 0 7px 0 var(--asphalt), 0 0 28px rgba(255,79,216,.42), 0 0 70px rgba(183,255,74,.14);
  white-space: nowrap;
}

.puddle-reflection {
  position: absolute;
  left: -1vw;
  top: 52vh;
  font-family: var(--display);
  font-size: clamp(68px, 16vw, 230px);
  line-height: .75;
  letter-spacing: -.08em;
  color: rgba(167,179,200,.24);
  transform: scaleY(-.43) skewX(-14deg);
  filter: blur(2px);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 70%, transparent), linear-gradient(0deg, transparent, #000 30%, transparent 78%);
}

.hero-copy {
  position: absolute;
  right: 12vw;
  bottom: 13vh;
  max-width: 360px;
  margin: 0;
  padding: 18px 22px;
  font-size: clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--green);
  background: linear-gradient(110deg, rgba(7,20,46,.72), rgba(255,79,216,.12));
  transform: rotate(-3deg);
}

.mote {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 20px var(--green), 0 0 70px var(--green), 0 0 120px var(--orchid);
}

.leader-mote { left: 30%; top: 33%; animation: driftMote 9s ease-in-out infinite; }

.field-ring {
  position: absolute;
  border: 1px solid rgba(183,255,74,.34);
  border-radius: 50%;
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 12px rgba(183,255,74,.26));
}
.ring-a { left: 19vw; top: 21vh; width: 38vw; height: 21vw; }
.ring-b { left: 12vw; top: 28vh; width: 58vw; height: 31vw; border-color: rgba(255,79,216,.22); }

.diagonal-curb {
  position: absolute;
  inset: auto -8vw 16vh -8vw;
  height: 18px;
  background: repeating-linear-gradient(90deg, var(--chrome) 0 56px, var(--black) 56px 92px);
  transform: rotate(-8deg);
  box-shadow: 0 0 20px rgba(230,237,247,.18);
}

.artifact {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--black);
  font: 700 10px/1 var(--mono);
  text-transform: uppercase;
  transform-origin: 50% 50%;
  transition: transform .18s linear;
}
.artifact span { transform: rotate(8deg); }
.cap { left: 9vw; top: 58vh; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle, var(--amber), var(--asphalt) 48%, var(--black) 72%); border: 4px dashed var(--steel); color: var(--green); }
.key { right: 21vw; top: 23vh; width: 108px; height: 24px; background: var(--steel); border-radius: 40px; box-shadow: 42px 0 0 -4px var(--chrome); }
.key::before { content: ""; position: absolute; left: -28px; width: 42px; height: 42px; border: 8px solid var(--steel); border-radius: 50%; }
.sticker { right: 8vw; top: 48vh; width: 92px; height: 58px; background: var(--orchid); clip-path: polygon(12% 0, 100% 16%, 85% 100%, 0 80%); color: var(--chrome); }

.gather {
  background:
    radial-gradient(circle at 16% 74%, rgba(183,255,74,.14), transparent 24rem),
    linear-gradient(105deg, var(--deep), var(--black) 58%, #111b3b);
}

.vertical-sign {
  position: absolute;
  left: 2vw;
  top: 10vh;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: clamp(76px, 10vw, 180px);
  color: rgba(255,79,216,.74);
  text-shadow: 0 0 26px rgba(255,79,216,.6);
}

.photo-strip {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(230,237,247,.34);
  box-shadow: 0 34px 70px rgba(3,7,18,.58);
  background: var(--black);
  transform: translateX(-12vw) skewX(-9deg);
  opacity: .35;
  transition: transform 1s cubic-bezier(.2,.8,.1,1), opacity 1s;
}

.photo-strip.in-view, .portrait.in-view { transform: translateX(0) skewX(-9deg); opacity: 1; }

.strip-crosswalk { left: 12vw; top: 17vh; width: min(48vw, 620px); height: 62vh; }
.stripe-set {
  position: absolute;
  inset: -12%;
  background:
    linear-gradient(115deg, rgba(255,79,216,.7), transparent 42%),
    repeating-linear-gradient(100deg, var(--chrome) 0 42px, var(--asphalt) 42px 74px, var(--black) 74px 112px);
  filter: saturate(1.4) contrast(1.1);
  mix-blend-mode: screen;
}
.photo-strip span { position: absolute; left: 18px; bottom: 18px; font: 600 10px var(--mono); letter-spacing: .15em; color: var(--green); text-transform: uppercase; }

.leaning-panel {
  position: absolute;
  right: 9vw;
  top: 21vh;
  width: min(430px, 42vw);
  padding: 30px;
  background: linear-gradient(135deg, rgba(28,49,91,.88), rgba(3,7,18,.72));
  border: 1px solid rgba(167,179,200,.5);
  border-right: 5px solid var(--amber);
  transform: rotate(4deg);
}

h2 { font-family: var(--sticker); font-weight: 400; line-height: .95; }
.leaning-panel h2, .map-copy h2, .roof-copy h2 { margin: 12px 0 16px; font-size: clamp(38px, 5vw, 70px); color: var(--chrome); }
p { line-height: 1.55; color: var(--steel); }

.token { right: 29vw; bottom: 15vh; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, var(--green), var(--asphalt) 54%, var(--black)); color: var(--black); border: 2px solid var(--chrome); }
.pin { left: 52vw; top: 18vh; width: 150px; height: 18px; background: var(--chrome); border-radius: 16px; transform: rotate(-28deg); }
.pin::before { content: ""; position: absolute; left: -18px; top: -19px; width: 48px; height: 48px; border: 5px solid var(--chrome); border-radius: 50%; }
.moth { right: 12vw; bottom: 20vh; width: 96px; height: 76px; background: linear-gradient(90deg, var(--orchid), var(--green)); clip-path: polygon(50% 42%, 0 0, 12% 92%, 50% 58%, 88% 92%, 100% 0); }

.flux-svg { position: absolute; inset: 12vh 4vw auto auto; width: 60vw; height: 72vh; pointer-events: none; }
.flux-svg path { fill: none; stroke: rgba(183,255,74,.4); stroke-width: 2; stroke-dasharray: 8 13; }

.map-stage {
  background:
    linear-gradient(90deg, rgba(3,7,18,.9), rgba(7,20,46,.7)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(167,179,200,.08) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(167,179,200,.06) 47px 48px);
}

.map-copy {
  position: absolute;
  z-index: 2;
  left: 8vw;
  top: 14vh;
  width: min(480px, 46vw);
  padding: 28px 34px;
  background: rgba(3,7,18,.74);
  border-top: 4px solid var(--green);
  transform: rotate(-2deg);
}

.transit-map {
  position: absolute;
  right: -3vw;
  bottom: 4vh;
  width: min(78vw, 980px);
  height: 72vh;
  filter: drop-shadow(0 0 24px rgba(183,255,74,.22));
}
.route { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.8s ease; }
.route-one { stroke: var(--green); }
.route-two { stroke: var(--orchid); }
.route-three { stroke: var(--amber); }
.transit-map.drawn .route { stroke-dashoffset: 0; }
.stations circle { fill: var(--black); stroke: var(--chrome); stroke-width: 5; }

.tiny-door { right: 18vw; top: 18vh; width: 70px; height: 112px; border-radius: 34px 34px 3px 3px; background: var(--green); color: var(--black); border: 3px solid var(--chrome); box-shadow: 0 0 42px rgba(183,255,74,.8); }
.coin-sun { left: 45vw; bottom: 18vh; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle, var(--amber), transparent 62%); border: 3px dashed var(--steel); }
.ticket-wing { right: 37vw; bottom: 11vh; width: 118px; height: 76px; background: linear-gradient(135deg, var(--steel), var(--orchid)); clip-path: polygon(0 12%, 100% 0, 80% 100%, 12% 76%); }

.wall {
  background:
    radial-gradient(circle at 76% 30%, rgba(255,79,216,.18), transparent 24rem),
    linear-gradient(150deg, var(--black), var(--deep) 48%, var(--asphalt));
}
.wall-title {
  position: absolute;
  left: 5vw;
  top: 7vh;
  max-width: 780px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 120px);
  line-height: .84;
  color: var(--chrome);
  text-shadow: 0 0 34px rgba(255,79,216,.42);
}
.portrait-grid { position: absolute; right: 8vw; bottom: 10vh; display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 32px); }
.portrait { width: clamp(150px, 18vw, 260px); margin: 0; opacity: .35; transform: translateX(8vw) skewX(-6deg); transition: transform 1s, opacity 1s; }
.portrait:nth-child(2) { margin-bottom: 12vh; transition-delay: .12s; }
.portrait:nth-child(3) { margin-bottom: 4vh; transition-delay: .24s; }
.portrait div { height: clamp(230px, 39vh, 420px); border: 1px solid rgba(230,237,247,.36); box-shadow: 0 28px 60px rgba(3,7,18,.55); }
.photo-one div { background: radial-gradient(circle at 42% 34%, var(--amber), transparent 15%), linear-gradient(125deg, rgba(255,79,216,.7), transparent 46%), repeating-linear-gradient(90deg, var(--black) 0 22px, var(--asphalt) 22px 30px, var(--steel) 30px 34px); }
.photo-two div { background: radial-gradient(circle at 60% 42%, var(--green), transparent 18%), repeating-linear-gradient(45deg, rgba(167,179,200,.7) 0 3px, transparent 3px 18px), linear-gradient(135deg, var(--black), var(--orchid)); }
.photo-three div { background: radial-gradient(ellipse at 50% 68%, rgba(183,255,74,.7), transparent 28%), linear-gradient(160deg, var(--asphalt), var(--black) 58%, var(--orchid)); }
figcaption { margin-top: 10px; font: 600 10px var(--mono); letter-spacing: .16em; color: var(--amber); text-transform: uppercase; }
.wall-note { position: absolute; left: 12vw; bottom: 14vh; max-width: 380px; padding-left: 20px; border-left: 2px solid var(--orchid); }
.sticker-halo { right: 37vw; top: 40vh; width: 120px; height: 90px; border-radius: 48% 52% 44% 56%; background: var(--amber); color: var(--black); box-shadow: 0 0 0 12px rgba(255,181,71,.13), 0 0 44px rgba(255,181,71,.55); transform: rotate(13deg); }

.roof {
  background:
    radial-gradient(circle at 50% 24%, rgba(183,255,74,.2), transparent 22rem),
    radial-gradient(circle at 83% 12%, rgba(230,237,247,.18), transparent 26rem),
    linear-gradient(180deg, var(--deep), var(--black) 74%);
}
.roofline { position: absolute; left: -5vw; right: -5vw; bottom: 0; height: 29vh; background: linear-gradient(180deg, transparent, var(--black) 26%), repeating-linear-gradient(90deg, var(--black) 0 88px, var(--asphalt) 88px 132px); clip-path: polygon(0 34%, 12% 30%, 18% 12%, 25% 31%, 39% 22%, 48% 36%, 56% 18%, 68% 34%, 75% 16%, 84% 28%, 100% 20%, 100% 100%, 0 100%); }
.antenna { position: absolute; right: 24vw; bottom: 23vh; width: 5px; height: 35vh; background: var(--steel); transform: rotate(5deg); box-shadow: -36px 58px 0 -1px var(--steel), 38px 48px 0 -1px var(--steel); }
.final-one { position: absolute; left: 50%; top: 28vh; width: 300px; height: 300px; transform: translateX(-50%); }
.one-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 118px; color: var(--green); text-shadow: 0 0 30px var(--green), 0 0 90px rgba(255,79,216,.45); }
.align { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--chrome); box-shadow: 0 0 22px var(--green); transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.cap-dot { left: 22px; top: 130px; background: var(--amber); }
.key-dot { left: 128px; top: 22px; background: var(--steel); }
.token-dot { right: 28px; top: 142px; background: var(--green); }
.moth-dot { left: 134px; bottom: 22px; background: var(--orchid); }
.final-one.aligned .cap-dot { transform: translate(74px, -38px); }
.final-one.aligned .key-dot { transform: translate(0, 88px); }
.final-one.aligned .token-dot { transform: translate(-72px, -32px); }
.final-one.aligned .moth-dot { transform: translate(0, -74px); }
.roof-copy { position: absolute; right: 9vw; bottom: 18vh; width: min(430px, 42vw); padding: 28px; background: rgba(7,20,46,.72); border: 1px solid rgba(230,237,247,.28); border-bottom: 5px solid var(--green); transform: rotate(2deg); }
.pollen-field i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pollenFloat var(--dur, 6s) ease-in-out infinite alternate; }

.light-catch { background-position: 0% 50%; background-size: 220% 100%; }
.light-catch.lit { box-shadow: inset 0 0 0 1px rgba(230,237,247,.36), 0 0 42px rgba(183,255,74,.12); }

@keyframes driftMote {
  0%, 100% { transform: translate(0,0); }
  28% { transform: translate(28vw, -4vh); }
  58% { transform: translate(43vw, 18vh); }
  82% { transform: translate(10vw, 24vh); }
}

@keyframes pollenFloat {
  from { transform: translateY(0) translateX(0) scale(.7); opacity: .35; }
  to { transform: translateY(-120px) translateX(32px) scale(1.3); opacity: 1; }
}

@media (max-width: 820px) {
  .bottle-compass { right: 8px; gap: 6px; }
  .bottle-compass a { width: 44px; height: 44px; font-size: 9px; }
  .hero-sign { top: 19vh; }
  .hero-copy, .leaning-panel, .map-copy, .roof-copy { width: calc(100vw - 96px); left: 24px; right: auto; top: auto; bottom: 12vh; }
  .strip-crosswalk { left: 9vw; width: 72vw; height: 54vh; }
  .vertical-sign { opacity: .45; }
  .transit-map { width: 112vw; right: -32vw; }
  .portrait-grid { right: 58px; gap: 10px; }
  .portrait { width: 29vw; }
  .wall-note { left: 24px; bottom: 7vh; width: 52vw; }
  .final-one { top: 20vh; transform: translateX(-50%) scale(.78); }
}