:root {
    --compliance-font-token: "Condensed** Condensed\*\* Condense";
    --midnight: #080711;
    --chrome: #D7D9E3;
    --oxblood: #6E1028;
    --sole: #17120E;
    --amber: #D8892E;
    --cherry: #FF2E63;
    --parchment: #F2D7A0;
    --ice: #A9F5FF;
    --display: "Bungee Shade", sans-serif;
    --condensed: "IBM Plex Sans Condensed", sans-serif;
    --whisper: "Cormorant Garamond", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--midnight); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--chrome); font-family: var(--condensed); background: radial-gradient(circle at 18% 12%, rgba(169,245,255,.13), transparent 28rem), radial-gradient(circle at 78% 8%, rgba(255,46,99,.15), transparent 25rem), linear-gradient(135deg, #080711 0%, #17120E 45%, #080711 100%); }
body::before { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at var(--mx,52%) var(--my,44%), transparent 0 12rem, rgba(8,7,17,.28) 19rem, rgba(8,7,17,.72) 100%); mix-blend-mode: multiply; }
.flashlight { position: fixed; width: 22rem; height: 22rem; left: var(--mx,50%); top: var(--my,50%); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 20; background: radial-gradient(circle, rgba(242,215,160,.13), rgba(169,245,255,.08) 36%, transparent 68%); filter: blur(4px); }
.evidence-nav { position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 50; display: grid; gap: .72rem; width: 11rem; }
.evidence-nav a { text-decoration: none; font: 700 .72rem/1 var(--condensed); letter-spacing: .11em; text-transform: uppercase; padding: .55rem .55rem .48rem; background: linear-gradient(100deg, rgba(242,215,160,.96), rgba(216,137,46,.82)); color: var(--sole); clip-path: polygon(0 8%, 92% 0, 100% 72%, 9% 100%); box-shadow: .1rem .25rem 1rem rgba(0,0,0,.45); rotate: var(--rot,-2deg); transition: transform .35s ease, filter .35s ease; }
.evidence-nav a:nth-child(even) { --rot: 2deg; } .evidence-nav a.active, .evidence-nav a:hover { transform: translateX(-.7rem) rotate(-1deg); filter: drop-shadow(0 0 .55rem var(--ice)); } .evidence-nav span { font-family: var(--display); margin-right: .35rem; color: var(--oxblood); }
.act { min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; padding: clamp(4.5rem,8vw,7rem) clamp(1.4rem,5vw,5rem); }
.act::before { content: attr(data-act); position: absolute; left: clamp(1rem,4vw,4rem); top: 1.1rem; z-index: -1; font-family: var(--display); font-size: clamp(5rem,20vw,18rem); color: rgba(216,137,46,.08); text-shadow: 0 0 2rem rgba(255,46,99,.08); }
.act-threshold { background: linear-gradient(115deg, rgba(215,217,227,.06) 0 1px, transparent 1px 60px), radial-gradient(circle at 20% 75%, rgba(216,137,46,.13), transparent 20rem), linear-gradient(145deg, #080711 0%, #17120E 78%); }
.surface-noise, .tile-grid, .leather-grain { position: absolute; inset: 0; z-index: -2; opacity: .55; background-image: radial-gradient(rgba(215,217,227,.22) 1px, transparent 1px); background-size: 7px 7px; mix-blend-mode: overlay; }
.neon-sign { position: absolute; left: clamp(1.5rem,8vw,8rem); top: 9vh; transform: rotate(-4deg); }
.case-kicker, .stamp { font: 700 .82rem/1 var(--condensed); letter-spacing: .24em; text-transform: uppercase; color: var(--ice); }
h1, h2, .final-sign, .reversed-sign { font-family: var(--display); margin: 0; font-weight: 400; }
h1 { font-size: clamp(4.2rem,11vw,12rem); line-height: .86; color: var(--amber); text-shadow: 0 0 .45rem #D8892E, .22rem .16rem 0 #6E1028, -.18rem -.12rem .8rem #A9F5FF; animation: neonPulse 4.8s infinite steps(1,end); }
.mirror-wordmark { margin-top: .3rem; transform: scaleY(-1) skewX(-18deg); color: rgba(169,245,255,.22); font-family: var(--display); font-size: clamp(2.7rem,7vw,8rem); filter: blur(1px); }
.opening-trail { position: absolute; inset: 0; opacity: 0; animation: trailStain 2.2s .45s forwards ease-out; }
.boot { position: absolute; width: 4rem; height: 7.3rem; border: 0; padding: 0; background: transparent; transform: rotate(var(--r,-22deg)); cursor: pointer; filter: drop-shadow(0 .25rem .5rem rgba(169,245,255,.18)); }
.boot::before { content: ""; position: absolute; inset: .2rem .58rem; border-radius: 48% 48% 38% 38%; background: repeating-linear-gradient(90deg, rgba(169,245,255,.15) 0 4px, transparent 4px 8px), linear-gradient(#17120E, rgba(23,18,14,.72)); border: 1px solid rgba(169,245,255,.28); box-shadow: inset 0 0 1.2rem rgba(169,245,255,.18), 0 0 1rem rgba(169,245,255,.12); transition: transform .45s ease, filter .45s ease; }
.boot i, .boot b { position: absolute; left: 1.1rem; width: 1.8rem; height: .42rem; background: rgba(169,245,255,.38); border-radius: 50%; } .boot i { top: 1.8rem; } .boot b { top: 4.4rem; }
.boot:hover::before, .boot.smeared::before { transform: translateX(var(--smear,.8rem)) skewX(-13deg) scaleX(1.28); filter: blur(1px); } .boot-1 { left: 12%; bottom: 7%; --r: -27deg; } .boot-2 { left: 28%; bottom: 23%; --r: -16deg; } .boot-3 { left: 45%; bottom: 38%; --r: -28deg; } .boot-4 { left: 63%; bottom: 53%; --r: -12deg; }
.coaster-ring { position: absolute; border: 0; background: radial-gradient(circle, transparent 48%, rgba(242,215,160,.16) 50%, rgba(216,137,46,.65) 54%, transparent 59%); border-radius: 50%; cursor: pointer; color: var(--parchment); font-family: var(--condensed); transition: transform .35s ease, filter .35s ease; }
.coaster-ring:hover { transform: scale(1.08) rotate(8deg); filter: drop-shadow(0 0 1rem var(--amber)); } .ring-1 { left: 55%; bottom: 34%; width: 9rem; height: 9rem; }
.receipt-note, .chapter-card, .archive-card { position: relative; max-width: 31rem; padding: 1.35rem 1.45rem; color: var(--sole); background: linear-gradient(92deg, rgba(242,215,160,.96), rgba(242,215,160,.82)), repeating-linear-gradient(0deg, transparent 0 20px, rgba(110,16,40,.12) 21px 22px); box-shadow: .6rem .8rem 2rem rgba(0,0,0,.42); clip-path: polygon(0 2%, 96% 0, 100% 92%, 84% 100%, 4% 96%); }
.threshold-note { position: absolute; right: 12%; bottom: 10%; transform: rotate(2deg); } .receipt-note .stamp, .chapter-card .stamp, .archive-card .stamp { color: var(--oxblood); }
h2 { font-size: clamp(2.3rem,5vw,5.1rem); line-height: .94; color: var(--oxblood); text-shadow: .06rem .08rem 0 rgba(216,137,46,.45); } p { font-size: clamp(1.05rem,1.35vw,1.28rem); line-height: 1.35; letter-spacing: .02em; } blockquote { margin: 1rem 0 0; font-family: var(--whisper); font-size: clamp(1.35rem,2.2vw,2.1rem); color: var(--oxblood); }
.chrome-rail { position: absolute; height: .45rem; border-radius: 999px; background: linear-gradient(180deg, #D7D9E3, #A9F5FF 42%, #17120E 55%, #D8892E); box-shadow: 0 0 1.4rem rgba(169,245,255,.45); } .rail-a { width: 58vw; left: -8vw; bottom: 22vh; transform: rotate(-28deg); }
.act-coaster { background: radial-gradient(circle at 72% 32%, rgba(255,46,99,.18), transparent 18rem), linear-gradient(90deg, rgba(110,16,40,.18), transparent), #17120E; } .tile-grid { background-image: linear-gradient(rgba(215,217,227,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(215,217,227,.08) 1px, transparent 1px); background-size: 7rem 7rem; opacity: 1; } .fan-shadow { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent 0 18deg, rgba(0,0,0,.28) 18deg 33deg, transparent 33deg 74deg); animation: fanSweep 13s linear infinite; }
.coaster-card { margin: 7vh 0 0 9vw; transform: rotate(-3deg); } .ring-field .large { width: 18rem; height: 18rem; right: 17vw; top: 17vh; } .ring-field .medium { width: 12rem; height: 12rem; right: 32vw; bottom: 13vh; } .ring-field .small { width: 7rem; height: 7rem; left: 18vw; bottom: 11vh; } .coaster-ring span { position: absolute; inset: 43% 0 auto; text-align: center; letter-spacing: .22em; color: var(--amber); } .jukebox-strip { position: absolute; right: 4rem; bottom: 3rem; display: grid; gap: .35rem; transform: rotate(-8deg); } .jukebox-strip span { padding: .35rem 1rem; color: var(--ice); background: rgba(8,7,17,.7); border-left: .25rem solid var(--cherry); letter-spacing: .18em; }
.act-mirror { background: linear-gradient(120deg, rgba(215,217,227,.2), transparent 38%), radial-gradient(circle at 50% 20%, rgba(169,245,255,.24), transparent 20rem), #080711; } .mirror-card { margin: 16vh 14vw 0 auto; transform: rotate(2deg); background: linear-gradient(100deg, rgba(215,217,227,.92), rgba(169,245,255,.38)); color: var(--midnight); }
.mirror-shards span { position: absolute; display: block; background: linear-gradient(130deg, rgba(215,217,227,.55), rgba(169,245,255,.12)); border: 1px solid rgba(215,217,227,.45); box-shadow: inset 0 0 2rem rgba(255,255,255,.15), 0 0 2rem rgba(169,245,255,.13); transition: transform .18s ease; } .mirror-shards span:nth-child(1) { width: 32vw; height: 44vh; left: 6vw; top: 11vh; clip-path: polygon(0 6%, 100% 0, 78% 100%, 16% 78%); } .mirror-shards span:nth-child(2) { width: 19vw; height: 28vh; left: 34vw; top: 26vh; clip-path: polygon(14% 0, 100% 24%, 72% 100%, 0 78%); } .mirror-shards span:nth-child(3) { width: 24vw; height: 20vh; right: 8vw; bottom: 12vh; clip-path: polygon(0 20%, 91% 0, 100% 88%, 21% 100%); } .mirror-shards span:nth-child(4) { width: 15vw; height: 39vh; left: 18vw; bottom: 6vh; clip-path: polygon(30% 0, 100% 12%, 72% 96%, 0 100%); }
.reversed-sign { position: absolute; left: 8vw; bottom: 18vh; font-size: clamp(2rem,5vw,5rem); color: rgba(169,245,255,.34); transform: scaleX(-1) rotate(-9deg); text-shadow: 0 0 1rem #A9F5FF; } .lipstick-arc { position: absolute; right: 30vw; top: 11vh; width: 11rem; height: 5rem; border-top: .65rem solid var(--cherry); border-radius: 50%; transform: rotate(18deg); filter: drop-shadow(0 0 .7rem #FF2E63); } .plaque { position: absolute; left: 49vw; bottom: 14vh; padding: .8rem 1.4rem; color: var(--sole); background: linear-gradient(#D8892E, #F2D7A0 45%, #6E1028 48%, #D8892E); transform: rotate(5deg); letter-spacing: .18em; font-weight: 700; }
.act-backroom { background: radial-gradient(circle at 22% 20%, rgba(216,137,46,.18), transparent 21rem), linear-gradient(135deg, #6E1028, #17120E 65%); } .leather-grain { opacity: .45; background-image: radial-gradient(rgba(242,215,160,.13) 1px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.24), transparent 45%, rgba(255,255,255,.04)); background-size: 13px 9px, 100% 100%; } .drag-card { margin: 11vh auto 0 8vw; transform: rotate(3deg); } .drag-mark { position: absolute; left: 21vw; right: 12vw; top: 56vh; height: 5rem; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(23,18,14,.74), rgba(169,245,255,.15), transparent); filter: blur(5px); transform: rotate(-11deg); animation: dragGlow 4.5s ease-in-out infinite; } .matchbook { position: absolute; right: 17vw; top: 19vh; width: 12rem; height: 8rem; padding: 1rem; background: linear-gradient(145deg, #F2D7A0, #D8892E); color: var(--oxblood); transform: rotate(-12deg); box-shadow: .6rem .8rem 1.6rem rgba(0,0,0,.5); text-align: center; } .matchbook span { font-family: var(--display); font-size: 1.35rem; } .matchbook b { display: block; font-size: 2.9rem; letter-spacing: .18em; } .matchbook small { color: var(--sole); } .swizzle-flags { position: absolute; right: 8vw; bottom: 8vh; display: flex; gap: .6rem; transform: rotate(7deg); } .swizzle-flags span { color: var(--parchment); background: var(--cherry); padding: .5rem .8rem; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 82%); text-transform: uppercase; letter-spacing: .12em; }
.act-archive { background: radial-gradient(circle at 50% 54%, rgba(169,245,255,.14), transparent 24rem), linear-gradient(135deg, #080711, #17120E 80%); } .floor-plan { position: absolute; inset: 6vh 6vw; } .floor-plan svg { width: 100%; height: 100%; overflow: visible; } .plan-line, .counter-line, .booth-line { fill: none; stroke: var(--ice); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 .8rem #A9F5FF); } .counter-line { stroke: var(--amber); stroke-width: 5; } .booth-line { stroke: var(--cherry); stroke-width: 5; } .act-archive.in-view .plan-line, .act-archive.in-view .counter-line, .act-archive.in-view .booth-line { animation: drawPlan 2.8s forwards ease-out; } .plan-dot { position: absolute; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-family: var(--display); color: var(--sole); background: var(--parchment); border-radius: 50%; box-shadow: 0 0 1rem rgba(216,137,46,.6); } .d1 { left: 7%; bottom: 9%; } .d2 { left: 31%; top: 43%; } .d3 { left: 55%; top: 34%; } .d4 { right: 16%; top: 12%; } .d5 { right: 7%; top: 5%; } .archive-card { position: absolute; left: 8vw; bottom: 8vh; transform: rotate(-2deg); } .final-sign { position: absolute; right: 8vw; bottom: 12vh; color: var(--amber); font-size: clamp(3rem,7vw,7rem); text-shadow: 0 0 1rem #D8892E, -.15rem .12rem 0 #A9F5FF; animation: finalFlicker 6s infinite; }
.quote-pop { position: fixed; z-index: 80; max-width: 18rem; pointer-events: none; opacity: 0; transform: translate(-50%, -130%) rotate(-2deg) scale(.95); padding: .9rem 1rem; color: var(--sole); background: var(--parchment); box-shadow: 0 .7rem 1.7rem rgba(0,0,0,.45); font-family: var(--whisper); font-size: 1.35rem; transition: opacity .22s ease, transform .22s ease; clip-path: polygon(0 8%, 100% 0, 95% 100%, 8% 92%); } .quote-pop.visible { opacity: 1; transform: translate(-50%, -138%) rotate(1deg) scale(1); } .act.in-view .chapter-card, .act.in-view .receipt-note, .act.in-view .archive-card { animation: paperArrive .85s both cubic-bezier(.2,.9,.2,1); }
@keyframes trailStain { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } } @keyframes neonPulse { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .45; } 92% { opacity: 1; } 94% { opacity: .62; } } @keyframes fanSweep { to { transform: rotate(360deg); } } @keyframes dragGlow { 0%, 100% { opacity: .55; transform: rotate(-11deg) scaleX(.9); } 50% { opacity: 1; transform: rotate(-11deg) scaleX(1.05); } } @keyframes drawPlan { to { stroke-dashoffset: 0; } } @keyframes finalFlicker { 0%, 88%, 100% { opacity: 1; } 89%, 91% { opacity: .35; } 90%, 92% { opacity: 1; } } @keyframes paperArrive { from { opacity: .2; transform: translateY(2rem) rotate(-6deg); } to { opacity: 1; } }
@media (max-width: 800px) { .evidence-nav { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; transform: none; display: flex; overflow: hidden; } .evidence-nav a { flex: 1 0 8rem; font-size: .62rem; } .threshold-note, .archive-card, .final-sign, .mirror-card { left: 1.2rem; right: 1.2rem; bottom: 7rem; margin: 0; } .chapter-card { max-width: calc(100vw - 2.4rem); } .coaster-card, .drag-card { margin: 8vh 0 0; } .ring-field .large { right: -4rem; top: 40vh; } .matchbook { right: 1.2rem; top: 50vh; } }