:root {
    /* DESIGN typography tokens: Space Grotesk** Grotesk* for short explanatory lines and quieter narrative copy. Add **IBM Plex Mono only for small paste-up serial numbers */
    --brick: #8F2D1F;
    --acid: #A7FF38;
    --hazard: #FFB000;
    --paper: #F2E1BD;
    --black: #11100F;
    --pink: #FF2E88;
    --gray: #78746C;
    --cyan: #00D7FF;
    --stage-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--paper);
    background: var(--black);
    font-family: "Space Grotesk", "Inter", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 18% 20%, rgba(0, 215, 255, .16), transparent 26%),
        radial-gradient(circle at 82% 28%, rgba(255, 46, 136, .14), transparent 28%),
        linear-gradient(105deg, #070706 0%, #171412 42%, #090807 100%);
}

.alley {
    min-height: 920vh;
    position: relative;
    isolation: isolate;
}

.wall-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    perspective: 900px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 86px 100%,
        linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 68px,
        linear-gradient(125deg, #24211d 0%, #11100F 52%, #2d201b 100%);
}

.masonry-grid, .buff-paint, .rain-field, .side-stickers, .spray-halo {
    pointer-events: none;
}

.masonry-grid {
    position: absolute;
    inset: -6%;
    opacity: .45;
    background:
        repeating-linear-gradient(0deg, transparent 0 62px, rgba(242,225,189,.07) 63px 65px),
        repeating-linear-gradient(90deg, transparent 0 118px, rgba(242,225,189,.055) 119px 121px);
    transform: rotate(-1deg) translateY(calc(var(--stage-progress) * -16px));
}

.buff-paint {
    position: absolute;
    width: 78vw;
    height: 62vh;
    transform: rotate(-3deg);
    opacity: calc(.78 - var(--stage-progress) * .52);
    background:
        linear-gradient(105deg, rgba(242,225,189,.7), rgba(120,116,108,.55)),
        radial-gradient(circle at 30% 40%, rgba(143,45,31,.35), transparent 40%);
    clip-path: polygon(3% 8%, 96% 1%, 91% 92%, 9% 98%, 0 58%);
    mix-blend-mode: screen;
    filter: saturate(.65);
}

.poster-stack {
    width: min(76vw, 980px);
    height: min(72vh, 690px);
    position: relative;
    transform: rotateX(3deg) rotateY(-5deg) rotateZ(-1.5deg) translateY(calc(var(--stage-progress) * -8px));
    filter: drop-shadow(0 40px 60px rgba(0,0,0,.65));
}

.poster-layer {
    position: absolute;
    inset: 0;
    padding: clamp(28px, 5vw, 74px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translate3d(0, 38px, -80px) rotate(var(--tilt, 0deg)) scale(.94);
    transition: opacity .65s ease, transform .8s cubic-bezier(.2,.8,.1,1), clip-path .8s ease;
    clip-path: polygon(4% 7%, 97% 2%, 94% 87%, 84% 94%, 7% 98%, 0 61%);
    overflow: hidden;
}

.poster-layer::before {
    content: attr(data-event);
    position: absolute;
    right: clamp(18px, 4vw, 54px);
    top: clamp(8px, 2vw, 22px);
    font-family: "Bungee Shade", "Archivo Black", cursive;
    font-size: clamp(6rem, 19vw, 15rem);
    line-height: .8;
    opacity: .2;
}

.poster-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.2) 0 1px, transparent 2px) 0 0 / 16px 18px,
        linear-gradient(135deg, transparent 0 48%, rgba(17,16,15,.12) 49% 52%, transparent 53%);
    mix-blend-mode: multiply;
}

.poster-layer.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)) scale(1);
    z-index: 10;
}

.layer-1 { --tilt: -1.5deg; background: linear-gradient(135deg, #78746C, #F2E1BD 58%, #11100F); color: #11100F; }
.layer-2 { --tilt: 1.2deg; background: linear-gradient(140deg, #A7FF38 0%, #F2E1BD 52%, #FFB000 100%); color: #11100F; }
.layer-3 { --tilt: -2.7deg; background: linear-gradient(100deg, #11100F 0%, #8F2D1F 55%, #FF2E88 100%); color: #F2E1BD; }
.layer-4 { --tilt: 2.1deg; background: linear-gradient(165deg, #00D7FF 0%, #11100F 48%, #8F2D1F 100%); color: #F2E1BD; }
.layer-5 { --tilt: -1deg; background: linear-gradient(120deg, #F2E1BD 0%, #FFB000 45%, #8F2D1F 100%); color: #11100F; }
.layer-6 { --tilt: 1.8deg; background: linear-gradient(135deg, #11100F 0%, #78746C 40%, #A7FF38 100%); color: #F2E1BD; }
.layer-7 { --tilt: -2.2deg; background: linear-gradient(90deg, #00D7FF 0%, #FF2E88 50%, #11100F 100%); color: #F2E1BD; }
.layer-8 { --tilt: 2.8deg; background: conic-gradient(from 90deg, #A7FF38, #FFB000, #FF2E88, #00D7FF, #8F2D1F, #F2E1BD, #A7FF38); color: #11100F; }
.layer-9 { --tilt: -.4deg; background: linear-gradient(140deg, #11100F 0%, #8F2D1F 38%, #78746C 68%, #F2E1BD 100%); color: #F2E1BD; }

.wordmark {
    position: absolute;
    top: 9%;
    left: 7%;
    margin: 0;
    font-family: "Bungee Shade", "Archivo Black", cursive;
    font-size: clamp(4.2rem, 13vw, 11rem);
    letter-spacing: -.08em;
    transform: rotate(-4deg);
    color: #11100F;
    text-shadow: 8px 8px 0 rgba(255,176,0,.6), -5px -5px 0 rgba(0,215,255,.5);
}

h2 {
    margin: 0;
    font-family: "Archivo Black", "Inter", sans-serif;
    text-transform: uppercase;
    font-size: clamp(3.4rem, 10vw, 10rem);
    letter-spacing: -.075em;
    line-height: .78;
    max-width: 850px;
    position: relative;
    z-index: 2;
    text-shadow: 5px 5px 0 rgba(17,16,15,.28);
}

p {
    margin: 24px 0 0;
    max-width: 640px;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.25;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.serial {
    position: absolute;
    top: 24px;
    left: 28px;
    z-index: 3;
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    letter-spacing: .12em;
    background: #11100F;
    color: #A7FF38;
    padding: 8px 11px;
    transform: rotate(-2deg);
}

.tape {
    position: absolute;
    width: 150px;
    height: 44px;
    background: rgba(242,225,189,.65);
    border: 2px dashed rgba(17,16,15,.35);
    z-index: 4;
}
.tape-a { top: -8px; left: 42%; transform: rotate(6deg); }
.tape-b { bottom: 40px; right: -20px; transform: rotate(-11deg); }

.poster-scar {
    position: absolute;
    left: 5vw;
    bottom: 10vh;
    width: clamp(170px, 22vw, 300px);
    height: clamp(260px, 48vh, 480px);
    transform: rotate(-8deg) translateY(calc(var(--stage-progress) * -36px));
    z-index: 13;
    filter: drop-shadow(12px 18px 20px rgba(0,0,0,.45));
}

.poster-scar span {
    position: absolute;
    inset: calc(var(--i, 0) * 9px) calc(var(--i, 0) * 5px) auto auto;
    width: calc(100% - var(--i, 0) * 10px);
    height: calc(100% - var(--i, 0) * 17px);
    background: var(--c, #F2E1BD);
    clip-path: polygon(0 0, 100% 4%, 85% 86%, 60% 100%, 10% 92%);
    border: 2px solid rgba(17,16,15,.42);
}
.poster-scar span:nth-child(1){--i:0;--c:#8F2D1F}.poster-scar span:nth-child(2){--i:1;--c:#A7FF38}.poster-scar span:nth-child(3){--i:2;--c:#FFB000}.poster-scar span:nth-child(4){--i:3;--c:#F2E1BD}.poster-scar span:nth-child(5){--i:4;--c:#11100F}.poster-scar span:nth-child(6){--i:5;--c:#FF2E88}.poster-scar span:nth-child(7){--i:6;--c:#78746C}.poster-scar span:nth-child(8){--i:7;--c:#00D7FF}.poster-scar span:nth-child(9){--i:8;--c:#F2E1BD}

.loose-corner {
    position: absolute;
    right: 14vw;
    top: 17vh;
    width: 180px;
    height: 180px;
    z-index: 16;
    background: linear-gradient(135deg, #F2E1BD 0 58%, #A7FF38 59% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    transform-origin: 100% 0;
    transform: rotate(calc(-8deg - var(--stage-progress) * 55deg)) skew(calc(var(--stage-progress) * -10deg));
    box-shadow: -12px 18px 25px rgba(0,0,0,.35);
}

.loose-corner span {
    position: absolute;
    right: 24px;
    top: 22px;
    color: #11100F;
    font-family: "Archivo Black", sans-serif;
    transform: rotate(45deg);
}

.tag-cloud {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
}
.tag-cloud b {
    position: absolute;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2rem, 7vw, 7rem);
    color: transparent;
    -webkit-text-stroke: 2px #00D7FF;
    opacity: calc(.08 + var(--stage-progress) * .28);
    transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 18px), 0) rotate(-11deg);
}
.tag-cloud b:nth-child(1){left:13%;top:19%;}.tag-cloud b:nth-child(2){right:12%;bottom:19%;-webkit-text-stroke-color:#FF2E88;}.tag-cloud b:nth-child(3){left:24%;bottom:9%;-webkit-text-stroke-color:#A7FF38;}.tag-cloud b:nth-child(4){right:22%;top:24%;-webkit-text-stroke-color:#FFB000;}.tag-cloud b:nth-child(5){left:47%;top:8%;-webkit-text-stroke-color:#F2E1BD;}

.stencil-rat {
    position: absolute;
    width: 110px;
    height: 44px;
    background: #11100F;
    clip-path: polygon(8% 68%, 24% 28%, 58% 18%, 84% 48%, 100% 42%, 89% 58%, 74% 69%, 34% 76%);
    z-index: 18;
    opacity: calc(var(--stage-progress) * .85);
}
.stencil-rat span { color: #A7FF38; font-family: "IBM Plex Mono", monospace; margin-left: 40px; }
.rat-one { left: 18vw; top: 64vh; transform: rotate(-6deg); }
.rat-two { right: 18vw; top: 28vh; transform: rotate(9deg) scaleX(-1); }

.side-stickers {
    position: fixed;
    right: 18px;
    top: 14vh;
    z-index: 30;
    display: grid;
    gap: 14px;
    transform: translateY(calc(var(--stage-progress) * -90px));
}
.side-stickers span {
    font-family: "IBM Plex Mono", monospace;
    font-size: .74rem;
    color: #11100F;
    background: #F2E1BD;
    border: 2px solid #11100F;
    padding: 9px 12px;
    transform: rotate(var(--r, -3deg));
    box-shadow: 5px 6px 0 #FFB000;
}
.side-stickers span:nth-child(2){--r:4deg;background:#A7FF38}.side-stickers span:nth-child(3){--r:-7deg;background:#00D7FF}.side-stickers span:nth-child(4){--r:2deg;background:#FF2E88;color:#F2E1BD}

.event-rail {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 35;
    display: grid;
    gap: 7px;
}
.event-rail button {
    border: 0;
    background: rgba(17,16,15,.72);
    color: #F2E1BD;
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.event-rail button.active { background: #A7FF38; color: #11100F; transform: translateX(8px) rotate(-2deg); }

.rain-field {
    position: fixed;
    inset: -10%;
    z-index: 50;
    background: repeating-linear-gradient(102deg, transparent 0 13px, rgba(0,215,255,.12) 14px 16px, transparent 17px 28px);
    opacity: .22;
    animation: rain 1.2s linear infinite;
}
@keyframes rain { to { transform: translate3d(-40px, 80px, 0); } }

.spray-halo { position: absolute; width: 45vw; height: 45vw; border-radius: 50%; filter: blur(45px); opacity: .2; z-index: 1; }
.halo-one { background: #00D7FF; left: -15vw; top: 8vh; }
.halo-two { background: #FF2E88; right: -16vw; bottom: 3vh; }

.scroll-story {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}
.story-step { height: 100vh; display: flex; align-items: end; padding: 0 4vw 7vh; }
.story-step span, .story-step strong { font-family: "IBM Plex Mono", monospace; opacity: 0; }

body.event-7 .wall-stage, body.event-8 .wall-stage { animation: signalPulse 1.6s ease-in-out infinite alternate; }
@keyframes signalPulse { from { filter: saturate(1); } to { filter: saturate(1.45) contrast(1.1); } }

@media (max-width: 760px) {
    .poster-stack { width: 86vw; height: 68vh; }
    .event-rail { left: 10px; top: auto; bottom: 12px; transform: none; grid-template-columns: repeat(3, 1fr); }
    .event-rail button { font-size: .58rem; padding: 6px; }
    .poster-scar { left: -20px; bottom: 12vh; }
    .side-stickers { display: none; }
    .loose-corner { right: 4vw; width: 120px; height: 120px; }
}