:root {
    --deep-blue: #07111F;
    --ivory: #F4EBDD;
    --violet: #9D7CFF;
    --coral: #FF6B5E;
    --mint: #8BE0C6;
    --ash: #2D3038;
    --trace: #FFE8A3;
    --display: "Fraunces", serif;
    --sans: "DM Sans", sans-serif;
    --mono: "Fragment Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ivory);
    font-family: var(--sans);
    background:
        radial-gradient(circle at 22% 10%, rgba(157, 124, 255, .34), transparent 34rem),
        radial-gradient(circle at 82% 40%, rgba(139, 224, 198, .14), transparent 28rem),
        linear-gradient(135deg, #07111F 0%, #0b1424 46%, #07111F 100%);
    overflow-x: hidden;
}

.rewind-chamber {
    position: relative;
    isolation: isolate;
}

.grain,
.grain::before,
.grain::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
}

.grain {
    opacity: .28;
    background-image:
        repeating-radial-gradient(circle at 17% 27%, rgba(244, 235, 221, .08) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(100deg, transparent 0 7px, rgba(255, 232, 163, .035) 7px 8px);
    mix-blend-mode: screen;
}

.grain::before {
    content: "";
    background: linear-gradient(90deg, transparent, rgba(244, 235, 221, .08), transparent);
    animation: scanner 7s linear infinite reverse;
}

.chamber-map {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 1.05rem;
    z-index: 40;
}

.map-dot {
    width: .72rem;
    height: .72rem;
    border: 1px solid rgba(244, 235, 221, .48);
    border-radius: 50%;
    background: rgba(45, 48, 56, .85);
    box-shadow: 0 0 0 0 rgba(157, 124, 255, .1);
    cursor: pointer;
    transition: background .5s, box-shadow .5s, transform .5s;
}

.map-dot.is-active {
    background: var(--violet);
    transform: scale(1.38);
    box-shadow: 0 0 24px rgba(157, 124, 255, .86);
}

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(3rem, 6vw, 7rem);
    overflow: hidden;
}

.scene::before {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(244, 235, 221, .12);
    transform: skewY(-4deg);
    pointer-events: none;
}

.scene::after {
    content: attr(data-scene);
    position: absolute;
    left: 2rem;
    bottom: 1.4rem;
    font-family: var(--mono);
    color: rgba(255, 232, 163, .3);
    font-size: .75rem;
}

.hero-object {
    position: relative;
    justify-self: center;
}

.scene-number,
.restoration-tag,
.drawer span,
.faint-trace {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
}

.scene-number { color: var(--trace); }

.scene-title-block {
    max-width: 34rem;
    z-index: 2;
}

.scene-title-block h2,
.clean-void h2 {
    margin: .5rem 0 1rem;
    font-family: var(--display);
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: .88;
    font-weight: 650;
    color: var(--ivory);
    text-shadow: 0 0 35px rgba(157, 124, 255, .25);
}

.scene-title-block p,
.scene-copy,
.clean-void p {
    margin: 0;
    color: rgba(244, 235, 221, .76);
    line-height: 1.7;
    font-size: clamp(1rem, 1.6vw, 1.22rem);
}

.mistake-field {
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(157, 124, 255, .2), transparent 30rem),
        linear-gradient(160deg, transparent, rgba(45, 48, 56, .46));
}

.mistake-field .scene-number {
    position: absolute;
    left: clamp(2rem, 6vw, 7rem);
    top: clamp(2rem, 6vw, 5rem);
}

.glass-pane {
    width: min(76vw, 58rem);
    min-height: 34rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 235, 221, .2);
    background: linear-gradient(140deg, rgba(244, 235, 221, .07), rgba(157, 124, 255, .08) 42%, rgba(7, 17, 31, .55));
    box-shadow: inset 0 0 80px rgba(244, 235, 221, .05), 0 30px 90px rgba(0, 0, 0, .36);
    border-radius: 2rem;
    transform: rotate(-2deg);
}

.wordmark {
    position: relative;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(4rem, 11vw, 12rem);
    font-weight: 760;
    line-height: .82;
    letter-spacing: -.07em;
    z-index: 4;
}

.wordmark i { color: var(--mint); font-style: normal; }

.ghost-state {
    position: absolute;
    font-family: var(--display);
    font-size: clamp(4rem, 11vw, 12rem);
    font-weight: 760;
    letter-spacing: -.07em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 235, 221, .16);
    pointer-events: none;
}

.ghost-one { transform: translate(-2.4rem, -1.8rem); }
.ghost-two { transform: translate(2rem, 1.7rem); color: rgba(255, 107, 94, .1); }

.scratch {
    position: absolute;
    height: .28rem;
    width: 42%;
    background: linear-gradient(90deg, transparent, var(--coral), var(--trace), transparent);
    z-index: 5;
    transform-origin: left center;
    filter: drop-shadow(0 0 10px rgba(255, 107, 94, .65));
    animation: liftScratch 5.5s ease-in-out infinite reverse;
}

.scratch-a { top: 44%; left: 28%; transform: rotate(-5deg); }
.scratch-b { top: 52%; left: 34%; transform: rotate(8deg); animation-delay: -.9s; }
.scratch-c { top: 59%; left: 24%; transform: rotate(-12deg); animation-delay: -1.8s; }

.healing-crack {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    fill: none;
    stroke: var(--mint);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .78;
    filter: drop-shadow(0 0 13px rgba(139, 224, 198, .45));
}

.healing-crack path {
    stroke-dasharray: 680;
    stroke-dashoffset: 0;
    animation: healCrack 6s ease-in-out infinite alternate;
}

.spool-orbit {
    position: absolute;
    border: 1px solid rgba(157, 124, 255, .72);
    border-radius: 50%;
    animation: counterSpin 12s linear infinite reverse;
    box-shadow: 0 0 32px rgba(157, 124, 255, .34), inset 0 0 28px rgba(157, 124, 255, .12);
}

.spool-orbit span {
    position: absolute;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--trace);
    box-shadow: 0 0 14px var(--trace);
}

.spool-orbit span:nth-child(1) { left: 50%; top: -.28rem; }
.spool-orbit span:nth-child(2) { right: 7%; bottom: 18%; background: var(--mint); }
.spool-orbit span:nth-child(3) { left: 10%; bottom: 12%; background: var(--coral); }

.hero-orbit { width: 27rem; height: 27rem; }
.spool-large { width: 23rem; height: 23rem; left: 50%; top: 50%; margin: -11.5rem 0 0 -11.5rem; }

.restoration-tag {
    position: absolute;
    color: var(--deep-blue);
    background: linear-gradient(110deg, rgba(255, 232, 163, .94), rgba(244, 235, 221, .84));
    padding: .8rem 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .24);
    transform: rotate(-4deg);
    text-align: left;
}

.restoration-tag b,
.restoration-tag span { display: block; }
.restoration-tag span { opacity: .72; margin-top: .18rem; }
.tag-hero { right: 8%; bottom: 12%; }
.tag-spool { left: 12%; bottom: 10%; }
.tag-final { right: 14%; bottom: 18%; }

.scene-copy {
    max-width: 38rem;
    margin-top: -4rem;
    z-index: 2;
}

.reverse-spool {
    background: radial-gradient(circle at 72% 48%, rgba(157, 124, 255, .25), transparent 28rem);
}

.cassette-window {
    width: min(45rem, 80vw);
    height: 28rem;
    border-radius: 2rem;
    border: 1px solid rgba(244, 235, 221, .18);
    background: linear-gradient(145deg, rgba(45, 48, 56, .72), rgba(7, 17, 31, .92));
    box-shadow: inset 0 0 70px rgba(244, 235, 221, .06), 0 28px 90px rgba(0, 0, 0, .34);
    overflow: hidden;
}

.cassette-window::before {
    content: "";
    position: absolute;
    inset: 18% 11%;
    border: 1px solid rgba(244, 235, 221, .18);
    border-radius: 12rem;
    background: rgba(244, 235, 221, .04);
}

.tape-reel {
    position: absolute;
    top: 50%;
    width: 10rem;
    height: 10rem;
    margin-top: -5rem;
    border-radius: 50%;
    border: 1rem solid rgba(244, 235, 221, .12);
    background: radial-gradient(circle, var(--deep-blue) 0 18%, rgba(157, 124, 255, .22) 19% 26%, transparent 27%), conic-gradient(from 40deg, rgba(139, 224, 198, .2), rgba(157, 124, 255, .32), rgba(255, 107, 94, .18), rgba(139, 224, 198, .2));
    animation: counterSpin 6s linear infinite reverse;
}

.tape-reel i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1rem;
    height: 4rem;
    margin: -2rem 0 0 -.5rem;
    border-radius: 1rem;
    background: rgba(244, 235, 221, .35);
    transform-origin: center;
}

.tape-reel i:nth-child(2) { transform: rotate(90deg); }
.tape-reel i:nth-child(3) { transform: rotate(45deg); }
.tape-reel i:nth-child(4) { transform: rotate(135deg); }
.reel-left { left: 15%; }
.reel-right { right: 15%; animation-duration: 8s; }

.tape-thread {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 50%;
    height: .34rem;
    background: linear-gradient(90deg, var(--coral), var(--trace), var(--mint));
    box-shadow: 0 0 20px rgba(255, 232, 163, .4);
}

.receipt-scrap {
    position: absolute;
    padding: .65rem 1rem;
    color: var(--deep-blue);
    background: var(--ivory);
    font-family: var(--mono);
    font-size: .74rem;
    clip-path: polygon(0 7%, 9% 0, 18% 8%, 28% 0, 38% 8%, 48% 0, 58% 8%, 69% 0, 78% 8%, 88% 0, 100% 7%, 100% 100%, 0 100%);
}

.scrap-one { top: 11%; right: 10%; transform: rotate(8deg); }
.scrap-two { bottom: 14%; left: 10%; transform: rotate(-9deg); }

.branch-cabinet {
    background: radial-gradient(circle at 24% 55%, rgba(139, 224, 198, .16), transparent 25rem);
}

.cabinet-shell {
    width: min(43rem, 82vw);
    display: grid;
    gap: 1rem;
    transform: perspective(900px) rotateY(9deg) rotateZ(-2deg);
}

.drawer {
    position: relative;
    min-height: 5.6rem;
    padding: 1rem 2rem;
    border: 1px solid rgba(244, 235, 221, .14);
    background: linear-gradient(100deg, rgba(45, 48, 56, .92), rgba(244, 235, 221, .07));
    box-shadow: inset 0 0 35px rgba(244, 235, 221, .035), 0 18px 50px rgba(0, 0, 0, .2);
    transition: transform .7s ease, border-color .7s ease;
}

.drawer::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 3.6rem;
    height: 1.3rem;
    border: 1px solid var(--violet);
    border-radius: 50%;
    transform: translateY(-50%);
}

.drawer b {
    display: block;
    margin-top: .35rem;
    font-family: var(--display);
    font-size: clamp(1.45rem, 3vw, 2.4rem);
    font-weight: 560;
}

.drawer span { color: var(--trace); }
.drawer.is-open { transform: translateX(var(--drawer-shift, 2rem)); border-color: rgba(139, 224, 198, .55); }
.drawer-a { --drawer-shift: -1.8rem; }
.drawer-b { --drawer-shift: 4.4rem; }
.drawer-c { --drawer-shift: -.7rem; }
.drawer-d { --drawer-shift: 3rem; }
.drawer-halo { width: 15rem; height: 15rem; right: -4rem; top: 8rem; opacity: .75; }
.right-label { justify-self: start; }

.restoration-table {
    grid-template-columns: minmax(20rem, .85fr) minmax(25rem, 1.15fr);
    background: radial-gradient(circle at 66% 55%, rgba(255, 107, 94, .13), transparent 28rem);
}

.repair-bench {
    width: min(48rem, 82vw);
    height: 34rem;
    border-radius: 48% 52% 45% 55%;
    background: linear-gradient(135deg, rgba(244, 235, 221, .9), rgba(255, 232, 163, .55));
    color: var(--deep-blue);
    box-shadow: inset -30px -35px 80px rgba(45, 48, 56, .14), 0 35px 90px rgba(0, 0, 0, .35);
    transform: rotate(3deg);
}

.palimpsest-layer {
    position: absolute;
    color: rgba(7, 17, 31, .62);
    font-family: var(--display);
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    background: rgba(244, 235, 221, .5);
    border: 1px solid rgba(7, 17, 31, .12);
    padding: 1.1rem 1.5rem;
    box-shadow: 0 15px 40px rgba(7, 17, 31, .13);
}

.layer-a { left: 13%; top: 18%; transform: rotate(-8deg); }
.layer-b { right: 11%; top: 37%; transform: rotate(6deg); }
.layer-c { left: 22%; bottom: 18%; transform: rotate(-2deg); }

.redaction-strip {
    position: absolute;
    height: 1.1rem;
    background: var(--ash);
    animation: peelStrip 5s ease-in-out infinite alternate;
}

.strip-a { left: 16%; top: 31%; width: 38%; }
.strip-b { right: 18%; bottom: 30%; width: 32%; animation-delay: -1.5s; }

.repair-seam {
    position: absolute;
    width: 2px;
    height: 70%;
    background: linear-gradient(var(--coral), var(--mint), var(--trace));
    filter: drop-shadow(0 0 9px rgba(139, 224, 198, .62));
}

.seam-one { left: 49%; top: 12%; transform: rotate(31deg); }
.seam-two { left: 55%; top: 18%; transform: rotate(-48deg); height: 52%; }

.eraser-dust span {
    position: absolute;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--coral);
    opacity: .58;
    animation: dustReturn 4s ease-in-out infinite alternate;
}

.eraser-dust span:nth-child(1) { left: 20%; bottom: 22%; }
.eraser-dust span:nth-child(2) { left: 67%; top: 24%; animation-delay: -.5s; }
.eraser-dust span:nth-child(3) { right: 22%; bottom: 18%; animation-delay: -1s; }
.eraser-dust span:nth-child(4) { left: 39%; top: 15%; animation-delay: -1.5s; }
.eraser-dust span:nth-child(5) { right: 36%; top: 54%; animation-delay: -2s; }

.clean-state {
    grid-template-columns: 1fr;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(244, 235, 221, .95), rgba(244, 235, 221, .7) 34%, rgba(139, 224, 198, .2) 58%, rgba(7, 17, 31, .95) 100%);
    color: var(--deep-blue);
    text-align: center;
}

.clean-state::before { border-color: rgba(7, 17, 31, .14); }

.clean-void {
    width: min(48rem, 82vw);
    min-height: 28rem;
    display: grid;
    place-items: center;
    padding: 4rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 235, 221, .98), rgba(255, 232, 163, .4));
    box-shadow: 0 0 90px rgba(139, 224, 198, .4), inset 0 0 80px rgba(7, 17, 31, .06);
}

.clean-void h2 {
    color: var(--deep-blue);
    margin: 0;
}

.clean-void p {
    max-width: 30rem;
    color: rgba(7, 17, 31, .68);
}

.clean-orbit { width: min(38rem, 80vw); height: min(38rem, 80vw); opacity: .55; }

.faint-trace {
    position: absolute;
    color: rgba(45, 48, 56, .2);
}

.trace-one { left: 15%; top: 26%; transform: rotate(-18deg); }
.trace-two { right: 12%; top: 38%; transform: rotate(14deg); }
.trace-three { left: 28%; bottom: 18%; transform: rotate(4deg); }

.is-visible .glass-pane { animation: paneBreathe 7s ease-in-out infinite; }
.is-visible .palimpsest-layer { animation: alignScraps 5.5s ease-in-out infinite alternate; }

@keyframes counterSpin { to { transform: rotate(-360deg); } }
@keyframes scanner { to { transform: translateX(100%); } }
@keyframes paneBreathe { 50% { transform: rotate(1deg) scale(1.018); } }
@keyframes healCrack { to { stroke-dashoffset: 680; opacity: .22; } }
@keyframes liftScratch { 50% { opacity: .12; transform: translateY(-1.5rem) rotate(-18deg) scaleX(.42); } }
@keyframes peelStrip { to { transform: translateX(-2rem) scaleX(.28); opacity: .36; } }
@keyframes dustReturn { to { transform: translate(-1.8rem, -1rem) scale(.25); opacity: .1; } }
@keyframes alignScraps { to { transform: rotate(0deg) translate(0, 0); } }

@media (max-width: 860px) {
    .scene,
    .restoration-table {
        grid-template-columns: 1fr;
        padding: 5rem 1.25rem;
    }

    .chamber-map { right: .75rem; }
    .glass-pane { width: 92vw; min-height: 26rem; }
    .hero-orbit { width: 18rem; height: 18rem; }
    .scene-copy { margin-top: 0; }
    .cassette-window { height: 24rem; }
    .tape-reel { width: 7rem; height: 7rem; margin-top: -3.5rem; }
    .repair-bench { height: 28rem; }
    .tag-final { right: 1rem; bottom: 5rem; }
}