:root {
    /* DESIGN font phrase tokens: IBM Plex Mono for log scraps; Space Grotesk** for readable body copy. */
    --asphalt: #0B0A0E;
    --amber: #FFB000;
    --acid: #39FF88;
    --violet: #6E3AFF;
    --primer: #B8B4A8;
    --brick: #8F1D2C;
    --chalk: #F4F1E8;
    --title: 'Bebas Neue', sans-serif;
    --body: 'Space Grotesk**', 'Space Grotesk', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --hand: 'Rock Salt', cursive;
    --design-grotesk-token: 'Grotesk**';
}

* { box-sizing: border-box; }

html { background: var(--asphalt); color: var(--chalk); }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--body);
    background:
        radial-gradient(circle at 82% 12%, rgba(255,176,0,.16), transparent 22rem),
        radial-gradient(circle at 12% 62%, rgba(110,58,255,.18), transparent 28rem),
        linear-gradient(120deg, #0B0A0E 0%, #151016 52%, #0B0A0E 100%);
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: .18;
    background-image:
        repeating-radial-gradient(circle at 20% 30%, rgba(244,241,232,.16) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(93deg, transparent 0 8px, rgba(184,180,168,.05) 9px 10px);
    mix-blend-mode: screen;
}

.flashlight {
    position: fixed;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    z-index: 30;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(244,241,232,.18), rgba(57,255,136,.08) 28%, transparent 64%);
    mix-blend-mode: screen;
    opacity: .4;
}

.route-meter {
    position: fixed;
    left: 1.2rem;
    top: 1.2rem;
    width: .42rem;
    height: calc(100vh - 2.4rem);
    border: 1px solid rgba(255,176,0,.45);
    z-index: 35;
    transform: rotate(-2deg);
    background: rgba(11,10,14,.7);
}

.route-meter span {
    display: block;
    width: 100%;
    height: 0%;
    background: linear-gradient(var(--amber), var(--acid), var(--violet));
    box-shadow: 0 0 18px var(--amber);
}

.stumble-loop {
    --lurch-x: 0px;
    transform: translate3d(var(--lurch-x), 0, 0);
    transition: transform 120ms steps(2, end);
}

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 8rem) clamp(1.4rem, 6vw, 7rem);
    isolation: isolate;
    border-top: 2px dashed rgba(184,180,168,.18);
}

.scene::before {
    content: attr(data-scene);
    position: absolute;
    right: 4vw;
    top: 4vh;
    font: 700 .72rem/1 var(--mono);
    letter-spacing: .26em;
    color: rgba(184,180,168,.45);
    text-transform: uppercase;
    transform: rotate(5deg);
}

.boot-curb {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(11,10,14,.15), rgba(11,10,14,.98)), radial-gradient(circle at 50% 100%, rgba(255,176,0,.16), transparent 45%);
}

.curb-line {
    position: absolute;
    left: -8vw;
    bottom: 18vh;
    width: 116vw;
    height: .55rem;
    transform: rotate(-3deg);
    background: repeating-linear-gradient(90deg, var(--amber) 0 7rem, transparent 7rem 9rem);
    filter: drop-shadow(0 0 16px var(--amber));
    animation: curbJitter .7s steps(2, end) infinite;
}

.lurch-mark { position: relative; text-align: center; }

.hero-mark span, .hero-mark h1 {
    display: block;
    margin: 0;
    font-family: var(--title);
    font-size: clamp(6.5rem, 23vw, 20rem);
    letter-spacing: .015em;
    line-height: .76;
    text-transform: uppercase;
}

.mark-shadow, .mark-outline {
    position: absolute;
    inset: 0;
}

.mark-shadow { color: var(--violet); transform: translate(-18px, 12px); opacity: .72; animation: impactOne 1.1s steps(3,end) both; }
.mark-outline { color: transparent; -webkit-text-stroke: 2px var(--acid); transform: translate(9px, -7px); opacity: .9; animation: impactTwo 1.25s steps(3,end) both; }
.hero-mark h1 { color: var(--chalk); text-shadow: 10px 0 0 var(--brick), -4px 4px 0 var(--amber); animation: impactThree 1.45s steps(4,end) both; }

.tagline {
    max-width: 42rem;
    margin: 1.4rem auto 0;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    color: var(--primer);
    text-align: center;
}

.graffiti-arrow, .rock-tag { font-family: var(--hand); color: var(--acid); text-shadow: 0 0 14px var(--acid); }
.graffiti-arrow { position: absolute; right: 9vw; bottom: 26vh; transform: rotate(-12deg); font-size: clamp(1rem, 2vw, 1.7rem); }

.log-scrap, .code-tag, .trace-stack ol, .commit-stamp {
    font-family: var(--mono);
    color: var(--acid);
}

.boot-log {
    position: absolute;
    left: 9vw;
    bottom: 9vh;
    display: grid;
    gap: .35rem;
    padding: 1rem;
    background: rgba(11,10,14,.78);
    border-left: 4px solid var(--amber);
    transform: rotate(2deg);
}

.broken-step { background: linear-gradient(97deg, rgba(143,29,44,.32), transparent 38%), var(--asphalt); }
.wall { position: absolute; inset: 0; z-index: -1; opacity: .42; }
.brick-wall { background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(143,29,44,.45) 39px 42px), repeating-linear-gradient(90deg, rgba(143,29,44,.22) 0 98px, transparent 99px 104px); }

.poster, .wall-copy, .trace-stack, .patch-board {
    max-width: 45rem;
    padding: clamp(1.4rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--primer), #d8d2c3);
    color: var(--asphalt);
    box-shadow: 20px 22px 0 rgba(110,58,255,.75), -10px -8px 0 rgba(143,29,44,.72);
    clip-path: polygon(2% 0, 100% 4%, 97% 92%, 82% 100%, 0 96%);
}

.rotate-left { transform: rotate(-5deg) translate(8vw, 6vh); }
.stencil { margin: 0 0 .5rem; font: 700 .8rem/1 var(--mono); letter-spacing: .28em; color: var(--brick); }
h2 { margin: 0; font-family: var(--title); font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: .82; letter-spacing: .02em; text-transform: uppercase; }
p { line-height: 1.45; }

.crosswalk { position: absolute; right: -6vw; bottom: 8vh; display: grid; gap: 1.1rem; transform: rotate(-18deg); }
.crosswalk span { display: block; width: 34vw; height: 1.1rem; background: var(--chalk); opacity: .74; clip-path: polygon(0 15%, 96% 0, 100% 70%, 6% 100%); }
.sticker-cluster { position: absolute; right: 12vw; top: 22vh; display: grid; gap: .5rem; transform: rotate(10deg); }
.sticker-cluster b { padding: .5rem .8rem; background: var(--amber); color: var(--asphalt); font-family: var(--mono); box-shadow: 5px 5px 0 var(--brick); }
.hidden-note { position: absolute; color: var(--chalk); font-family: var(--hand); opacity: .08; transition: opacity .18s steps(2,end), transform .18s steps(2,end); }
.hidden-note.revealed { opacity: 1; transform: rotate(-4deg) scale(1.04); }
.broken-step .hidden-note { left: 12vw; bottom: 19vh; }

.syntax-wall { background: linear-gradient(100deg, rgba(110,58,255,.35), transparent 50%), #130d16; }
.syntax-rain { position: absolute; inset: 0; font-family: var(--mono); color: var(--acid); opacity: .34; pointer-events: none; }
.syntax-rain span { position: absolute; animation: buzz 1.1s steps(3,end) infinite; }
.neon-bracket { position: absolute; left: 3vw; top: 5vh; font-family: var(--title); font-size: 38rem; line-height: .7; color: transparent; -webkit-text-stroke: 3px var(--acid); opacity: .32; filter: drop-shadow(0 0 18px var(--acid)); }
.wall-copy { margin-left: auto; transform: rotate(3deg) translateY(8vh); }
.code-tag { position: absolute; left: 8vw; bottom: 12vh; display: grid; gap: .45rem; padding: 1.2rem; background: rgba(11,10,14,.86); border: 1px solid rgba(57,255,136,.5); transform: rotate(-3deg); }
.rock-tag { position: absolute; right: 11vw; bottom: 15vh; font-size: clamp(1.2rem, 3vw, 2.3rem); transform: rotate(15deg); }

.stairwell { background: radial-gradient(circle at 74% 34%, rgba(255,176,0,.11), transparent 20rem), linear-gradient(180deg, #100d12, #0B0A0E); }
.rebar { position: absolute; right: 12vw; top: 8vh; height: 82vh; width: 18rem; overflow: visible; }
.rebar path { fill: none; stroke: var(--brick); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(143,29,44,.8)); stroke-dasharray: 34 18; animation: dripPath 5s linear infinite; }
.trace-stack { transform: rotate(-2deg) translate(5vw, 9vh); background: linear-gradient(135deg, #151018, #24152a); color: var(--chalk); box-shadow: 18px 20px 0 var(--brick), -10px -10px 0 var(--amber); }
.trace-stack .stencil { color: var(--amber); }
.trace-stack ol { padding-left: 1.5rem; font-size: clamp(.9rem, 1.5vw, 1.15rem); }
.rat-cable { position: absolute; right: 21vw; bottom: 13vh; width: 9rem; height: 4rem; transform: rotate(-8deg); }
.rat-body { position: absolute; width: 4rem; height: 2rem; border-radius: 50% 55% 35% 50%; background: var(--primer); bottom: .8rem; left: 1rem; box-shadow: 2.8rem .45rem 0 -.7rem var(--primer); }
.rat-tail, .cable { position: absolute; height: .25rem; background: var(--acid); transform-origin: left center; }
.rat-tail { width: 3.8rem; left: 0; bottom: 1.4rem; transform: rotate(164deg); }
.cable { width: 5.8rem; right: 0; bottom: 1.5rem; border-radius: 99px; }
.stairwell .hidden-note { left: 52vw; top: 18vh; }

.patch-tunnel { background: radial-gradient(ellipse at 50% 50%, rgba(110,58,255,.45), transparent 28rem), #0B0A0E; display: grid; place-items: center; }
.tunnel-mouth { position: absolute; inset: 9vh 12vw; border-radius: 50% 50% 8% 8%; background: radial-gradient(ellipse at center, transparent 0 34%, rgba(11,10,14,.92) 35% 54%, rgba(255,176,0,.32) 55% 56%, transparent 57%); transform: skewX(-8deg); }
.patch-board { position: relative; z-index: 1; transform: rotate(2deg); }
.patches { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.3rem 0; }
.patch-chip { border: 0; padding: .8rem 1rem; background: var(--asphalt); color: var(--acid); font: 700 .82rem/1 var(--mono); box-shadow: 5px 5px 0 var(--brick); cursor: pointer; transform: rotate(var(--r, -2deg)); transition: transform .12s steps(2,end), background .12s steps(2,end); }
.patch-chip:nth-child(2) { --r: 3deg; color: var(--amber); }
.patch-chip:nth-child(3) { --r: -5deg; color: var(--chalk); }
.patch-chip.active { background: var(--violet); transform: translate(8px, -8px) rotate(0deg); }
.drip-field span { position: absolute; top: 8vh; width: .45rem; height: 6rem; background: var(--acid); border-radius: 0 0 99px 99px; opacity: .6; animation: drip 2.2s ease-in infinite; }
.drip-field span:nth-child(1) { left: 19%; animation-delay: .1s; }
.drip-field span:nth-child(2) { left: 34%; height: 9rem; animation-delay: .7s; background: var(--amber); }
.drip-field span:nth-child(3) { left: 58%; animation-delay: .35s; background: var(--brick); }
.drip-field span:nth-child(4) { left: 72%; height: 7rem; animation-delay: 1.1s; }
.drip-field span:nth-child(5) { left: 85%; height: 10rem; animation-delay: .5s; background: var(--violet); }

.dawn-commit { display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, #0B0A0E 0%, #2b1620 56%, #FFB000 170%); }
.sun-strip { position: absolute; left: -10vw; right: -10vw; bottom: 0; height: 32vh; background: linear-gradient(180deg, transparent, rgba(255,176,0,.5)); transform: rotate(-2deg); }
.final-mark span { position: absolute; inset: 0; font: 400 clamp(4.6rem, 15vw, 13rem)/.82 var(--title); color: var(--violet); opacity: .42; text-transform: uppercase; }
.final-mark span:first-child { transform: translate(-12px, 9px); color: var(--brick); }
.final-mark span:nth-child(2) { transform: translate(12px, -7px); color: var(--acid); }
.final-mark h2 { position: relative; max-width: 58rem; color: var(--chalk); text-shadow: 8px 0 0 var(--brick); }
.dawn-commit p { max-width: 42rem; color: var(--primer); font-size: 1.25rem; }
.commit-stamp { padding: .8rem 1.1rem; border: 2px solid var(--acid); color: var(--acid); background: rgba(11,10,14,.76); transform: rotate(-2deg); }

.scene.is-active .poster, .scene.is-active .wall-copy, .scene.is-active .trace-stack, .scene.is-active .patch-board { animation: posterHit .5s steps(3,end) both; }

@keyframes curbJitter { 0%,100% { transform: translateX(0) rotate(-3deg); } 38% { transform: translateX(16px) rotate(-4deg); } 64% { transform: translateX(-8px) rotate(-2deg); } }
@keyframes impactOne { 0% { opacity: 0; transform: translate(-70px, 40px) skewX(-12deg); } 45%,100% { opacity: .72; transform: translate(-18px, 12px); } }
@keyframes impactTwo { 0%,35% { opacity: 0; transform: translate(48px, -26px); } 70%,100% { opacity: .9; transform: translate(9px, -7px); } }
@keyframes impactThree { 0%,55% { opacity: 0; transform: translateX(-34px); } 76% { opacity: 1; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes buzz { 0%,100% { transform: translate(0,0); opacity: .2; } 45% { transform: translate(8px,-4px); opacity: .75; } 60% { transform: translate(-5px,8px); opacity: .38; } }
@keyframes posterHit { from { transform: translate(-28px, 18px) rotate(-8deg); clip-path: polygon(8% 0, 94% 8%, 100% 90%, 76% 100%, 0 91%); } to { } }
@keyframes dripPath { to { stroke-dashoffset: -104; } }
@keyframes drip { 0% { transform: translateY(-20vh) scaleY(.2); opacity: 0; } 18% { opacity: .75; } 75%,100% { transform: translateY(100vh) scaleY(1); opacity: 0; } }

@media (max-width: 760px) {
    .scene { padding-left: 2.2rem; }
    .rotate-left, .wall-copy, .trace-stack { transform: rotate(-2deg) translate(0, 8vh); }
    .sticker-cluster, .crosswalk, .rebar { opacity: .55; }
    .hero-mark span, .hero-mark h1 { font-size: 24vw; }
    h2 { font-size: 4rem; }
}