:root {
    --black: #090706;
    --paper: #F2E2C7;
    --ochre: #A9792B;
    --wine: #6F102A;
    --acid: #B8FF3D;
    --violet: #4B235F;
    --blue: #B9D8E8;
    --red: #D92121;
    --font-compliance-note: "sparingly codes scratched calculation marks site does fall into repository’s overused mono-tech language.";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .24;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(242,226,199,.12) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(217,33,33,.10) 0 1px, transparent 1px),
        linear-gradient(115deg, transparent, rgba(185,216,232,.05), transparent);
    background-size: 11px 13px, 17px 19px, 100% 100%;
    mix-blend-mode: screen;
}

.red-thread {
    position: fixed;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100vh;
    z-index: 4;
    background: linear-gradient(var(--red), rgba(217,33,33,.15));
    transform: translateX(-50%);
    box-shadow: 0 0 18px var(--red);
    pointer-events: none;
}

.scene-rail {
    position: fixed;
    z-index: 30;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-rail button {
    width: 72px;
    padding: 7px 4px;
    border: 1px solid rgba(242,226,199,.38);
    background: rgba(9,7,6,.76);
    color: var(--paper);
    font-family: "Space Mono", monospace;
    font-size: 10px;
    letter-spacing: .08em;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.scene-rail button.active,
.scene-rail button:hover {
    background: var(--acid);
    color: var(--black);
    transform: translateX(-7px);
}

.chamber {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 80px 7vw;
    border-bottom: 1px solid rgba(242,226,199,.18);
}

.tag-door {
    background:
        radial-gradient(circle at 50% 28%, rgba(111,16,42,.42), transparent 34%),
        radial-gradient(circle at 20% 75%, rgba(75,35,95,.55), transparent 28%),
        var(--black);
}

.thread-drop {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 20vh;
    background: var(--red);
    transform: translateX(-50%);
    z-index: 2;
}

.giant-tag {
    position: relative;
    width: min(680px, 78vw);
    min-height: 500px;
    padding: 112px 52px 58px;
    color: var(--black);
    background:
        linear-gradient(140deg, rgba(169,121,43,.12), transparent 34%),
        var(--paper);
    clip-path: polygon(11% 0, 100% 0, 100% 83%, 88% 100%, 0 100%, 0 12%);
    box-shadow: 0 40px 70px rgba(0,0,0,.58), inset 0 0 0 3px rgba(169,121,43,.38);
    transform-origin: 50% 0;
    animation: tagEntrance 1.8s cubic-bezier(.17,.84,.34,1.02) both, tagSwing 5.5s 1.85s ease-in-out infinite;
}

.giant-tag.lifted { animation: tagLift .9s ease forwards; }

@keyframes tagEntrance {
    from { transform: translateY(-120vh) rotate(-24deg); }
    68% { transform: translateY(18px) rotate(7deg); }
    to { transform: translateY(0) rotate(0deg); }
}

@keyframes tagSwing {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.8deg); }
}

@keyframes tagLift {
    to { transform: translateY(-34px) rotate(-5deg) scale(.96); filter: drop-shadow(0 30px 0 rgba(217,33,33,.22)); }
}

.tag-hole {
    position: absolute;
    top: 32px;
    left: 50%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--black);
    border: 12px solid #A9792B;
    transform: translateX(-50%);
}

.bite {
    position: absolute;
    border-radius: 50%;
    background: var(--black);
}

.bite-one { width: 56px; height: 56px; right: -20px; top: 36%; }
.bite-two { width: 36px; height: 36px; right: 22px; top: 43%; }

.tag-code,
.receipt-code {
    margin: 0 0 18px;
    font-family: "Space Mono", monospace;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1,
h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    line-height: .9;
    letter-spacing: .12em;
    margin: 0;
}

h1 { font-size: clamp(86px, 18vw, 210px); }
h2 { font-size: clamp(58px, 10vw, 136px); }

.korean-line {
    font-family: "Gowun Dodum", sans-serif;
    color: var(--wine);
    font-size: clamp(22px, 4vw, 42px);
    margin: 10px 0 32px;
}

.invitation,
.scene-token {
    border: 1px solid var(--black);
    background: var(--red);
    color: var(--paper);
    padding: 14px 24px;
    font-family: "Space Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .13em;
    box-shadow: 8px 8px 0 var(--black);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.invitation:hover,
.scene-token:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--black);
    background: var(--violet);
}

.orbit-note,
.pinned-note {
    position: absolute;
    max-width: 240px;
    font-family: "Gowun Dodum", sans-serif;
    color: var(--blue);
    font-size: 17px;
    transform: rotate(-8deg);
}

.note-a { left: 8vw; bottom: 18vh; }
.note-b { right: 11vw; top: 19vh; transform: rotate(9deg); color: var(--acid); }

.appraisal-table {
    background:
        linear-gradient(90deg, rgba(169,121,43,.08) 1px, transparent 1px),
        radial-gradient(circle at 72% 20%, rgba(184,255,61,.12), transparent 18%),
        #130d0a;
    background-size: 42px 42px, auto, auto;
}

.table-slab {
    position: relative;
    width: min(980px, 82vw);
    min-height: 560px;
    border: 3px solid var(--ochre);
    background: linear-gradient(155deg, rgba(242,226,199,.13), rgba(75,35,95,.38));
    box-shadow: 0 36px 0 rgba(0,0,0,.34), inset 0 0 80px rgba(9,7,6,.55);
}

.magnifier {
    position: absolute;
    left: 9%;
    top: 16%;
    width: 250px;
    height: 250px;
    border: 16px solid var(--blue);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(185,216,232,.12);
    box-shadow: 28px 28px 0 rgba(9,7,6,.34);
    transition: transform .5s ease;
}

.magnifier::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 24px;
    background: var(--blue);
    right: -110px;
    bottom: 18px;
    transform: rotate(42deg);
    transform-origin: left center;
}

.magnifier span {
    font-family: "Gowun Dodum", sans-serif;
    font-size: 112px;
    color: var(--acid);
}

.abacus {
    position: absolute;
    right: 8%;
    top: 16%;
    width: 310px;
    height: 230px;
    border-top: 8px solid var(--paper);
    border-bottom: 8px solid var(--paper);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.abacus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 56px, rgba(242,226,199,.65) 56px 60px);
}

.abacus span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ochre);
    z-index: 1;
    box-shadow: 16px 22px 0 rgba(9,7,6,.4);
    transform: translateY(var(--bead, 0));
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.abacus span:nth-child(2) { --bead: -48px; background: var(--red); }
.abacus span:nth-child(3) { --bead: 58px; background: var(--acid); }
.abacus span:nth-child(4) { --bead: -22px; background: var(--violet); }
.abacus span:nth-child(5) { --bead: 38px; background: var(--blue); }
.abacus.shifted span { transform: translateY(calc(var(--bead, 0px) * -1)); }

.appraisal-label {
    position: absolute;
    left: 35%;
    bottom: 58px;
    max-width: 520px;
    color: var(--paper);
}

.appraisal-label p { font-family: "Space Mono", monospace; color: var(--acid); }
.appraisal-label h2 { font-size: clamp(46px, 7vw, 90px); }
.appraisal-table .scene-token { position: absolute; right: 9vw; bottom: 8vh; }
.appraisal-table .pinned-note { left: 9vw; top: 12vh; }

.cost-autopsy {
    background:
        radial-gradient(circle at 50% 50%, rgba(111,16,42,.65), transparent 38%),
        linear-gradient(180deg, #090706, #1a0710);
}

.autopsy-board {
    width: min(1050px, 86vw);
    min-height: 600px;
    border: 1px solid rgba(242,226,199,.42);
    padding: 46px;
    position: relative;
}

.autopsy-board h2 { color: var(--paper); }
.fraunces-call { max-width: 560px; font-size: clamp(21px, 2.6vw, 36px); color: var(--blue); }

.specimen {
    position: absolute;
    right: 9%;
    top: 18%;
    width: 380px;
    height: 380px;
    border-radius: 48% 52% 43% 57%;
    background: var(--paper);
    color: var(--black);
    box-shadow: inset 0 0 0 12px rgba(169,121,43,.35), 0 28px 0 rgba(0,0,0,.36);
}

.wax-seal {
    position: absolute;
    left: -34px;
    top: 42px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--red);
    color: var(--paper);
    font-family: "Fraunces", serif;
    font-size: 54px;
    box-shadow: 0 0 0 8px rgba(217,33,33,.28);
}

.cut-line {
    position: absolute;
    inset: 44px 50%;
    width: 3px;
    background: repeating-linear-gradient(var(--red) 0 18px, transparent 18px 30px);
}

.organ {
    position: absolute;
    padding: 13px 18px;
    border: 2px solid var(--black);
    background: var(--acid);
    font-family: "Space Mono", monospace;
    text-transform: uppercase;
    transition: transform .4s ease;
}

.organ-one { left: 68px; top: 112px; }
.organ-two { right: 48px; top: 142px; background: var(--blue); }
.organ-three { left: 98px; bottom: 92px; background: var(--red); color: var(--paper); }
.organ-four { right: 58px; bottom: 78px; background: var(--ochre); }
.specimen.open .organ-one { transform: translate(-34px, -18px) rotate(-9deg); }
.specimen.open .organ-two { transform: translate(42px, -5px) rotate(8deg); }
.specimen.open .organ-three { transform: translate(-50px, 28px) rotate(7deg); }
.specimen.open .organ-four { transform: translate(36px, 25px) rotate(-10deg); }
.receipt-code { position: absolute; bottom: 30px; left: 7vw; color: var(--acid); }

.bargain-theater {
    background: radial-gradient(ellipse at center, rgba(169,121,43,.3), transparent 45%), var(--violet);
}

.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32vw;
    background: repeating-linear-gradient(90deg, #6F102A 0 34px, #4e0b1f 34px 62px);
    box-shadow: inset 0 0 60px rgba(0,0,0,.45);
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.left-curtain { left: 0; }
.right-curtain { right: 0; }
.bargain-theater.revealed .left-curtain { transform: translateX(-78%); }
.bargain-theater.revealed .right-curtain { transform: translateX(78%); }

.paddle-stage {
    text-align: center;
    max-width: 790px;
    z-index: 1;
}

.auction-paddle {
    width: 170px;
    height: 250px;
    margin: 0 auto 28px;
    border-radius: 46% 46% 50% 50%;
    background: var(--paper);
    color: var(--red);
    font-family: "Bebas Neue", sans-serif;
    font-size: 180px;
    line-height: 1.1;
    box-shadow: 0 24px 0 rgba(9,7,6,.35);
}

.paddle-stage p { font-size: clamp(24px, 3vw, 42px); }
.moth { position: absolute; font-family: "Space Mono", monospace; color: var(--acid); filter: drop-shadow(0 0 12px var(--acid)); animation: moth 8s ease-in-out infinite; }
.moth-one { left: 18%; top: 24%; font-size: 40px; }
.moth-two { right: 18%; top: 31%; font-size: 34px; animation-delay: -2s; }
.moth-three { left: 62%; bottom: 18%; font-size: 28px; animation-delay: -4s; }
@keyframes moth { 50% { transform: translate(30px, -28px) rotate(16deg); } }

.receipt-aviary {
    background:
        linear-gradient(180deg, rgba(185,216,232,.16), transparent 52%),
        #0b1114;
}

.aviary-title { position: absolute; left: 8vw; top: 12vh; max-width: 560px; }
.aviary-title p:last-child { font-size: 28px; color: var(--blue); }
.birds { width: 100%; height: 100vh; position: absolute; inset: 0; }
.receipt-bird {
    position: absolute;
    width: 190px;
    height: 82px;
    background: var(--paper);
    color: var(--black);
    clip-path: polygon(0 52%, 36% 0, 58% 38%, 100% 6%, 76% 58%, 100% 100%, 52% 72%, 24% 100%);
    display: grid;
    place-items: center;
    font-family: "Space Mono", monospace;
    box-shadow: 0 18px 0 rgba(0,0,0,.25);
    animation: birdFloat 9s ease-in-out infinite;
}

.receipt-bird span { transform: rotate(-6deg); }
.bird-one { right: 15vw; top: 24vh; }
.bird-two { right: 34vw; top: 52vh; animation-delay: -1.5s; background: var(--blue); }
.bird-three { left: 18vw; bottom: 18vh; animation-delay: -3s; background: var(--acid); font-family: "Gowun Dodum", sans-serif; font-size: 26px; }
.bird-four { right: 13vw; bottom: 15vh; animation-delay: -5s; background: var(--ochre); }
@keyframes birdFloat { 50% { transform: translateY(-48px) translateX(28px) rotate(5deg); } }
.blue-note { right: 9vw; top: 16vh; color: var(--paper); }

.final-weight {
    background:
        radial-gradient(circle at 20% 20%, rgba(184,255,61,.12), transparent 24%),
        radial-gradient(circle at 78% 70%, rgba(217,33,33,.18), transparent 24%),
        var(--black);
    grid-template-columns: 1.1fr .9fr;
    gap: 6vw;
}

.scale {
    width: min(640px, 82vw);
    height: 520px;
    position: relative;
    transition: transform .8s ease;
}

.scale.tilt { transform: rotate(-3deg); }
.scale-arm { position: absolute; left: 8%; right: 8%; top: 31%; height: 10px; background: var(--paper); transform: rotate(-5deg); box-shadow: 0 0 0 3px var(--ochre); }
.scale-stem { position: absolute; left: 50%; top: 31%; width: 12px; height: 280px; background: var(--paper); transform: translateX(-50%); }
.scale-stem::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 210px; height: 30px; background: var(--paper); transform: translateX(-50%); }
.pan {
    position: absolute;
    top: 43%;
    width: 190px;
    height: 88px;
    border: 5px solid var(--ochre);
    border-top: 0;
    border-radius: 0 0 90px 90px;
    display: grid;
    place-items: center;
    font-family: "Space Mono", monospace;
    text-transform: uppercase;
}
.left-pan { left: 1%; color: var(--blue); }
.right-pan { right: 3%; top: 51%; color: var(--red); }
.final-copy { max-width: 600px; }
.final-copy h2 { color: var(--acid); }
.final-copy p:not(.tag-code) { font-size: clamp(21px, 2.4vw, 34px); line-height: 1.18; color: var(--paper); }

.is-visible .magnifier { transform: rotate(-8deg) scale(1.04); }
.is-visible .auction-paddle { animation: knock 1s ease both; }
@keyframes knock { 35% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } }

@media (max-width: 820px) {
    .scene-rail { display: none; }
    .chamber { padding: 64px 6vw; }
    .giant-tag { width: 90vw; padding: 100px 30px 42px; }
    .table-slab, .autopsy-board { width: 92vw; }
    .magnifier, .abacus, .specimen { position: relative; left: auto; right: auto; top: auto; margin: 24px auto; }
    .appraisal-label { position: relative; left: auto; bottom: auto; padding: 26px; }
    .appraisal-table .scene-token { position: relative; right: auto; bottom: auto; margin-top: 26px; }
    .curtain { width: 44vw; }
    .final-weight { grid-template-columns: 1fr; }
    .orbit-note, .pinned-note { display: none; }
}