:root {
  /* Design compliance terms: Use custom properties palette and create reusable classes such as `.alley-scene`; crisp street-gallery captions and short atmospheric copy. Use IBM Plex Mono only for tiny coordinate labels. */
  --blue-ice: #A9D7E8;
  --crystal-violet: #B8A8FF;
  --wet-asphalt: #111820;
  --marble-white: #E7EAED;
  --deep-alley: #06080B;
  --fog-gray: #9BA6B0;
  --cold-mint: #C8FFF4;
  --graphite: #232B33;
  --scroll: 0;
  --scene: 0;
  --word-stretch: 118;
  --word-weight: 820;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html {
  background: var(--deep-alley);
  color: var(--marble-white);
  font-family: "Space Grotesk", "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 500vh;
  overflow-x: hidden;
  cursor: crosshair;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(200, 255, 244, .055), transparent 13rem),
    radial-gradient(circle at 72% 8%, rgba(184, 168, 255, .18), transparent 26vw),
    radial-gradient(circle at 12% 38%, rgba(169, 215, 232, .13), transparent 32vw),
    linear-gradient(180deg, #06080B 0%, #111820 42%, #232B33 74%, #06080B 100%);
}

.grain-layer,
.rain-layer,
.cursor-prism {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain-layer {
  z-index: 90;
  opacity: .36;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 31%, rgba(231, 234, 237, .16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 61% 72%, rgba(155, 166, 176, .14) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 22%, rgba(169, 215, 232, .1) 0 1px, transparent 1.4px),
    repeating-linear-gradient(13deg, transparent 0 6px, rgba(255, 255, 255, .025) 6px 7px);
  background-size: 31px 29px, 47px 43px, 19px 23px, 100% 100%;
}

.rain-layer {
  z-index: 91;
  opacity: .24;
  background-image: linear-gradient(105deg, transparent 0 47%, rgba(231, 234, 237, .16) 48%, transparent 49% 100%);
  background-size: 42px 180px;
  animation: rainSlide 3.8s linear infinite;
}

.cursor-prism {
  z-index: 92;
  inset: auto;
  left: var(--mx);
  top: var(--my);
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(200, 255, 244, .24);
  clip-path: polygon(50% 0, 100% 62%, 35% 100%, 0 35%);
  transform: translate(-50%, -50%) rotate(calc(var(--scroll) * 220deg));
  opacity: .38;
  box-shadow: inset 0 0 24px rgba(169, 215, 232, .18), 0 0 30px rgba(184, 168, 255, .12);
}

.fixed-nav {
  position: fixed;
  left: 2.2vw;
  right: 2.2vw;
  top: 1.35rem;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(231, 234, 237, .62);
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: clamp(.56rem, .72vw, .75rem);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.alley-scene {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(231, 234, 237, .06);
}

.alley-scene::before,
.alley-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.alley-scene::before {
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(169, 215, 232, .08), transparent 30vw),
    linear-gradient(90deg, rgba(6, 8, 11, .66), transparent 18%, transparent 82%, rgba(6, 8, 11, .74));
}

.alley-scene::after {
  inset: -18vh -10vw;
  opacity: .16;
  background: repeating-linear-gradient(118deg, transparent 0 26px, rgba(231, 234, 237, .12) 27px, transparent 29px 78px);
  transform: translate3d(calc(var(--scroll) * -3vw), calc(var(--scroll) * 2vh), 0);
}

.scene-one { background: radial-gradient(circle at 65% 40%, rgba(35, 43, 51, .72), transparent 34vw), #06080B; }
.scene-two { margin-top: -100vh; background: linear-gradient(150deg, rgba(17, 24, 32, .94), rgba(35, 43, 51, .78)), #111820; }
.scene-three { margin-top: -100vh; background: radial-gradient(circle at 45% 50%, rgba(184, 168, 255, .12), transparent 28vw), #06080B; }
.scene-four { margin-top: -100vh; background: radial-gradient(circle at 50% 45%, rgba(169, 215, 232, .17), transparent 34vw), linear-gradient(180deg, #111820, #06080B); }
.scene-five { margin-top: -100vh; background: linear-gradient(180deg, #06080B 0%, #111820 48%, #232B33 100%); }

.scene-label {
  position: absolute;
  left: 4vw;
  top: 8vh;
  z-index: 12;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  color: rgba(169, 215, 232, .62);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: translateX(calc(var(--scroll) * 4vw));
}

.marble-wall {
  position: absolute;
  inset: 8vh 7vw 7vh 9vw;
  z-index: 2;
  overflow: hidden;
  transform: rotate(-2.2deg) translate3d(calc(var(--scroll) * -14px), 0, 0);
  background:
    linear-gradient(120deg, rgba(231, 234, 237, .92), rgba(155, 166, 176, .36) 36%, rgba(35, 43, 51, .84) 100%),
    radial-gradient(circle at 28% 18%, rgba(169, 215, 232, .24), transparent 18rem),
    repeating-linear-gradient(92deg, rgba(6, 8, 11, .1) 0 1px, transparent 1px 18px);
  box-shadow: inset 0 0 90px rgba(6, 8, 11, .65), 0 35px 90px rgba(0, 0, 0, .42);
  clip-path: polygon(0 6%, 94% 0, 100% 88%, 8% 100%);
}

.marble-wall::before,
.marble-slab::before,
.glass-plate::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: .58;
  background:
    linear-gradient(134deg, transparent 0 18%, rgba(6, 8, 11, .18) 19%, transparent 20% 48%, rgba(169, 215, 232, .22) 49%, transparent 50%),
    linear-gradient(42deg, transparent 0 26%, rgba(184, 168, 255, .18) 27%, transparent 28% 100%),
    radial-gradient(ellipse at 40% 60%, rgba(200, 255, 244, .09), transparent 42%);
  filter: blur(.2px);
}

.marble-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 70%, rgba(6, 8, 11, .2), transparent 18rem), repeating-linear-gradient(4deg, rgba(6, 8, 11, .08) 0 1px, transparent 1px 10px);
  mix-blend-mode: multiply;
}

.vein-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.crack { fill: none; stroke: rgba(6, 8, 11, .48); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: calc(900 - (var(--scroll) * 900)); filter: drop-shadow(0 0 8px rgba(169, 215, 232, .32)); }

.spray-wordmark,
.levitating-tag h2,
.peel-strip,
.fractured-type {
  font-family: "Anybody", "Arial Black", Impact, Haettenschweiler, ui-sans-serif, system-ui, sans-serif;
  font-stretch: condensed;
  font-variation-settings: "wdth" var(--word-stretch), "wght" var(--word-weight);
}

.spray-wordmark {
  position: absolute;
  left: -3vw;
  top: 21vh;
  z-index: 3;
  margin: 0;
  font-size: clamp(5.6rem, 17vw, 19rem);
  line-height: .72;
  letter-spacing: -.105em;
  color: rgba(6, 8, 11, .88);
  text-shadow: 0 0 2px rgba(6, 8, 11, .9), 0 0 24px rgba(169, 215, 232, .2), 18px 22px 0 rgba(184, 168, 255, .08);
  transform: translate3d(calc(var(--scroll) * 44px), calc(var(--scroll) * -20px), 0) skewX(-8deg);
  mix-blend-mode: multiply;
}

.wet-reflection {
  position: absolute;
  left: 3vw;
  bottom: 8vh;
  z-index: 2;
  transform: scaleY(-1) skewX(-10deg);
  font: 900 clamp(4rem, 12vw, 14rem)/.8 "Arial Black", Impact, sans-serif;
  letter-spacing: -.1em;
  color: rgba(169, 215, 232, .1);
  filter: blur(5px);
  opacity: .78;
}

.spray-cloud { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(circle, rgba(6, 8, 11, .32), transparent 64%); filter: blur(12px); }
.cloud-a { width: 42vw; height: 22vh; left: 2vw; top: 30vh; }
.cloud-b { width: 30vw; height: 16vh; right: 12vw; top: 47vh; }

.fog-curtain {
  position: absolute;
  left: -20vw;
  right: -20vw;
  height: 42vh;
  bottom: -7vh;
  z-index: 10;
  background: linear-gradient(90deg, transparent, rgba(155, 166, 176, .22), rgba(231, 234, 237, .18), transparent);
  filter: blur(26px);
  transform: translate3d(calc(var(--scroll) * -16vw), 0, 0);
}

.stencil-note,
.mono-tag {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.stencil-note {
  position: absolute;
  z-index: 12;
  max-width: 22rem;
  margin: 0;
  color: rgba(231, 234, 237, .66);
  font-size: clamp(.62rem, .85vw, .86rem);
  line-height: 1.7;
}

.note-left { left: 4vw; bottom: 12vh; }
.note-right { right: 5vw; top: 18vh; writing-mode: vertical-rl; }
.note-center { left: 50%; bottom: 12vh; transform: translateX(-50%); text-align: center; }
.note-final { right: 6vw; bottom: 9vh; text-align: right; }

.slab-field { position: absolute; inset: 0; z-index: 2; transform: translateY(calc((1 - var(--scroll)) * 4vh)); }
.marble-slab { position: absolute; overflow: hidden; background: linear-gradient(110deg, rgba(231, 234, 237, .92), rgba(155, 166, 176, .34)), repeating-linear-gradient(138deg, transparent 0 20px, rgba(6, 8, 11, .16) 21px, transparent 23px 54px); box-shadow: inset 0 0 70px rgba(6, 8, 11, .46), 0 26px 70px rgba(0, 0, 0, .35); }
.slab-a { left: -6vw; top: 11vh; width: 56vw; height: 72vh; clip-path: polygon(0 0, 92% 8%, 78% 100%, 8% 90%); transform: translateX(calc(var(--scroll) * -14vw)) rotate(-8deg); }
.slab-b { right: -7vw; top: 5vh; width: 52vw; height: 61vh; clip-path: polygon(12% 0, 100% 14%, 82% 86%, 0 100%); transform: translateX(calc(var(--scroll) * 16vw)) rotate(7deg); }
.slab-c { left: 28vw; bottom: -11vh; width: 46vw; height: 45vh; clip-path: polygon(0 22%, 100% 0, 88% 100%, 8% 82%); transform: translateY(calc(var(--scroll) * 14vh)) rotate(3deg); }

.caption-shard,
.panel {
  position: absolute;
  z-index: 8;
  padding: 1.1rem 1.25rem;
  color: rgba(231, 234, 237, .86);
  background: linear-gradient(135deg, rgba(231, 234, 237, .14), rgba(169, 215, 232, .06));
  border: 1px solid rgba(231, 234, 237, .18);
  box-shadow: inset 0 0 32px rgba(184, 168, 255, .08), 0 30px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  clip-path: polygon(10% 0, 100% 14%, 88% 100%, 0 82%);
}

.caption-shard p,
.panel p,
.levitating-tag p { margin: .6rem 0 0; font-size: clamp(.95rem, 1.4vw, 1.25rem); line-height: 1.45; letter-spacing: .03em; }
.shard-note-a { left: 12vw; top: 26vh; max-width: 23rem; transform: translate3d(calc(var(--scroll) * 5vw), calc(var(--scroll) * -3vh), 0); }
.sticker-ghost { right: 14vw; bottom: 18vh; max-width: 18rem; transform: translate3d(calc(var(--scroll) * -4vw), calc(var(--scroll) * 4vh), 0) rotate(2deg); }

.crystal-shard { position: absolute; z-index: 7; background: linear-gradient(135deg, rgba(169, 215, 232, .18), rgba(184, 168, 255, .14) 52%, rgba(231, 234, 237, .08)); border: 1px solid rgba(231, 234, 237, .23); backdrop-filter: blur(10px); box-shadow: inset 0 0 30px rgba(200, 255, 244, .05); }
.edge-shard { width: 12vw; height: 28vh; clip-path: polygon(50% 0, 100% 62%, 35% 100%, 0 35%); opacity: .4; }
.edge-one { right: 3vw; top: 12vh; transform: rotate(18deg); }
.edge-two { left: 2vw; top: 52vh; transform: rotate(-23deg); }
.shard-ice { width: 16vw; height: 32vh; clip-path: polygon(42% 0, 100% 44%, 62% 100%, 0 72%); }
.shard-one { right: 14vw; bottom: 16vh; transform: translateY(calc(var(--scroll) * -12vh)) rotate(14deg); }
.shard-two { right: 35vw; top: 15vh; width: 10vw; height: 18vh; transform: translateY(calc(var(--scroll) * 8vh)) rotate(-22deg); }

.poster-stack { position: absolute; inset: 14vh 10vw; z-index: 4; }
.peel-strip { position: absolute; padding: 1rem 2rem; background: rgba(231, 234, 237, .88); color: #06080B; font-size: clamp(2.5rem, 8vw, 8rem); line-height: .85; letter-spacing: -.07em; box-shadow: 0 28px 80px rgba(0, 0, 0, .36); clip-path: polygon(0 14%, 94% 0, 100% 76%, 7% 100%); }
.strip-one { left: 2vw; top: 5vh; transform: translateX(calc(var(--scroll) * -18vw)) rotate(-5deg); }
.strip-two { right: 6vw; top: 26vh; transform: translateX(calc(var(--scroll) * 18vw)) rotate(6deg); }
.strip-three { left: 22vw; bottom: 3vh; font-size: clamp(1.2rem, 3vw, 3.5rem); color: rgba(6, 8, 11, .7); transform: translateY(calc(var(--scroll) * 12vh)) rotate(-1deg); }

.fractured-type { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: clamp(.08rem, 1vw, 1rem); font-size: clamp(4.2rem, 14vw, 16rem); line-height: 1; letter-spacing: -.1em; color: rgba(231, 234, 237, .92); mix-blend-mode: difference; }
.fractured-type span { display: inline-block; transform: translate3d(calc((var(--i, 1) - 4) * var(--scroll) * 2.2vw), calc((4 - var(--i, 1)) * var(--scroll) * .9vh), 0) rotate(calc((var(--i, 1) - 4) * var(--scroll) * 2deg)); }
.fractured-type span:nth-child(1) { --i: 1; } .fractured-type span:nth-child(2) { --i: 2; } .fractured-type span:nth-child(3) { --i: 3; } .fractured-type span:nth-child(4) { --i: 4; } .fractured-type span:nth-child(5) { --i: 5; } .fractured-type span:nth-child(6) { --i: 6; } .fractured-type span:nth-child(7) { --i: 7; }

.barcode-stencil { position: absolute; right: 10vw; bottom: 18vh; z-index: 8; width: 11rem; height: 3rem; background: repeating-linear-gradient(90deg, rgba(231, 234, 237, .58) 0 3px, transparent 3px 8px, rgba(169, 215, 232, .42) 8px 10px, transparent 10px 17px); opacity: .55; }
.folded-corner { position: absolute; left: 11vw; bottom: 18vh; z-index: 8; width: 8rem; height: 8rem; background: linear-gradient(135deg, rgba(231, 234, 237, .16), rgba(169, 215, 232, .04)); border-top: 1px solid rgba(231, 234, 237, .24); clip-path: polygon(0 0, 100% 0, 0 100%); transform: rotate(-12deg); }

.chamber-core { position: absolute; inset: 0; z-index: 4; perspective: 900px; }
.panel { max-width: 18rem; transition: transform .3s ease, box-shadow .3s ease; }
.panel-a { left: 13vw; top: 22vh; transform: translateZ(80px) rotate(-8deg); }
.panel-b { right: 12vw; top: 34vh; transform: translateZ(130px) rotate(9deg); }
.panel-c { left: 38vw; bottom: 13vh; transform: translateZ(40px) rotate(3deg); }
.panel.is-lit { box-shadow: inset 0 0 42px rgba(200, 255, 244, .14), 0 0 46px rgba(169, 215, 232, .13), 0 30px 70px rgba(0, 0, 0, .28); }

.prism-glint { position: absolute; z-index: 3; width: 46vw; height: 2px; background: linear-gradient(90deg, transparent, #A9D7E8, #B8A8FF, #C8FFF4, transparent); filter: blur(.3px) drop-shadow(0 0 18px rgba(200, 255, 244, .5)); transform-origin: center; animation: glintSweep 5.5s ease-in-out infinite; }
.glint-one { left: 25vw; top: 34vh; transform: rotate(-28deg); }
.glint-two { left: 35vw; top: 62vh; transform: rotate(18deg); animation-delay: -2.1s; }

.broken-hex { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(58vw, 42rem); height: min(58vw, 42rem); transform: translate(-50%, -50%) rotate(calc(var(--scroll) * 16deg)); opacity: .38; }
.broken-hex path { fill: none; stroke: rgba(231, 234, 237, .62); stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: calc(260 - (var(--scroll) * 260)); }

.sky-horizon { position: absolute; inset: auto 0 0; z-index: 2; height: 36vh; background: linear-gradient(180deg, transparent, rgba(6, 8, 11, .72)), repeating-linear-gradient(90deg, rgba(35, 43, 51, .8) 0 9vw, rgba(17, 24, 32, .95) 9vw 15vw); clip-path: polygon(0 32%, 8% 24%, 17% 34%, 26% 18%, 35% 28%, 48% 12%, 58% 31%, 70% 22%, 82% 38%, 100% 21%, 100% 100%, 0 100%); }
.levitating-tag { position: absolute; left: 50%; top: 42%; z-index: 7; width: min(72vw, 56rem); min-height: 20rem; transform: translate(-50%, -50%) translateY(calc((1 - var(--scroll)) * 12vh)); display: grid; place-items: center; text-align: center; }
.glass-plate { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, rgba(231, 234, 237, .14), rgba(169, 215, 232, .06) 45%, rgba(184, 168, 255, .12)); border: 1px solid rgba(231, 234, 237, .2); box-shadow: inset 0 0 80px rgba(169, 215, 232, .08), 0 40px 110px rgba(0, 0, 0, .42); clip-path: polygon(8% 0, 100% 18%, 86% 100%, 0 82%); }
.levitating-tag h2 { position: relative; margin: 0; font-size: clamp(4rem, 15vw, 16rem); line-height: .82; letter-spacing: -.1em; color: rgba(231, 234, 237, .9); text-shadow: 0 0 28px rgba(169, 215, 232, .25), 0 0 48px rgba(184, 168, 255, .18); }
.levitating-tag p { position: relative; max-width: 30rem; color: rgba(231, 234, 237, .72); }
.quiet-action { position: absolute; left: 50%; bottom: 12vh; z-index: 12; transform: translateX(-50%); padding: .85rem 1.25rem; font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace; font-size: .7rem; letter-spacing: .24em; color: #C8FFF4; border: 1px solid rgba(200, 255, 244, .28); background: rgba(6, 8, 11, .16); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); transition: box-shadow .25s ease, letter-spacing .25s ease; }
.quiet-action.is-traced { letter-spacing: .32em; box-shadow: 0 0 36px rgba(200, 255, 244, .2), inset 0 0 24px rgba(169, 215, 232, .12); }

@keyframes rainSlide { to { background-position: 42px 180px; } }
@keyframes glintSweep { 0%, 100% { opacity: .08; filter: blur(2px); } 45%, 58% { opacity: .95; filter: blur(.2px) drop-shadow(0 0 22px rgba(200, 255, 244, .58)); } }

@media (max-width: 760px) {
  .fixed-nav { font-size: .52rem; letter-spacing: .12em; }
  .fixed-nav span:nth-child(2) { display: none; }
  .marble-wall { inset: 12vh 2vw 10vh 4vw; }
  .spray-wordmark { top: 26vh; }
  .note-right { writing-mode: initial; top: auto; bottom: 20vh; right: 5vw; }
  .caption-shard, .panel { max-width: 15rem; }
  .sticker-ghost { right: 5vw; bottom: 12vh; }
  .panel-a { left: 6vw; top: 18vh; }
  .panel-b { right: 5vw; }
  .panel-c { left: 18vw; }
  .levitating-tag { width: 90vw; }
}