:root {
  --black: #071014;
  --blue: #123B5D;
  --cyan: #9EF6D8;
  --violet: #3B2048;
  --paper: #E9E1CF;
  --red: #D8474F;
  --brass: #A76D3B;
  --title: 'Bodoni Moda', serif;
  --tag: 'Spline Sans Condensed', sans-serif;
  --text: 'Newsreader', serif;
  --kr: 'Noto Serif KR', serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--black); color: var(--paper); }

body {
  font-family: var(--text);
  cursor: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(18, 59, 93, .62), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(59, 32, 72, .72), transparent 42%),
    linear-gradient(135deg, #071014 0%, #09161b 45%, #05090c 100%);
}

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

.grain, .rain-field, .inspection-lamp, .glass-refraction { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

.grain {
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(233,225,207,.22) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(101deg, rgba(158,246,216,.08) 0 1px, transparent 1px 9px);
}

.rain-field {
  opacity: .33;
  background-image: linear-gradient(108deg, transparent 0 48%, rgba(158,246,216,.22) 49%, transparent 51%);
  background-size: 130px 260px;
  animation: rainDrift 8s linear infinite;
}

.inspection-lamp {
  z-index: 30;
  background: radial-gradient(circle 180px at var(--lamp-x, 52%) var(--lamp-y, 44%), rgba(158,246,216,.36), rgba(233,225,207,.14) 28%, rgba(7,16,20,.78) 64%);
  mix-blend-mode: screen;
  transition: background .08s linear;
}

.glass-refraction {
  z-index: 25;
  opacity: .36;
  transform: translate3d(var(--refract-x, 0px), var(--refract-y, 0px), 0);
  background:
    linear-gradient(116deg, transparent 0 22%, rgba(233,225,207,.1) 23%, transparent 25% 58%, rgba(158,246,216,.09) 60%, transparent 62%),
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(233,225,207,.14) 59%, transparent 62%);
}

.case-header { position: fixed; top: 26px; left: 34px; right: 34px; z-index: 35; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.case-mark { font-family: var(--title); font-size: clamp(24px, 3vw, 48px); letter-spacing: .04em; color: var(--paper); text-shadow: 0 0 22px rgba(158,246,216,.28); }
.case-status { font-family: var(--tag); text-transform: uppercase; letter-spacing: .22em; color: var(--cyan); font-size: 13px; max-width: 330px; text-align: right; }

.case-nav { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 35; display: grid; gap: 12px; }
.case-nav button { background: rgba(7,16,20,.54); border: 1px solid rgba(233,225,207,.18); padding: 9px 12px; font-family: var(--tag); text-transform: uppercase; letter-spacing: .14em; color: rgba(233,225,207,.72); backdrop-filter: blur(10px); transition: .35s ease; }
.case-nav button.is-active, .case-nav button:hover { color: var(--cyan); border-color: var(--red); transform: translateX(-8px); box-shadow: 0 0 22px rgba(216,71,79,.18); }

.reliquary { height: 100vh; transition: transform 900ms cubic-bezier(.22,.84,.16,1); }
.chamber { position: relative; height: 100vh; width: 100vw; overflow: hidden; padding: 118px 9vw 70px; display: grid; align-items: center; }
.chamber::before { content: attr(data-index); position: absolute; left: 5vw; bottom: 4vh; font-family: var(--tag); font-size: 16vw; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(233,225,207,.08); }

.tray { position: relative; border: 1px solid rgba(233,225,207,.22); background: linear-gradient(135deg, rgba(233,225,207,.12), rgba(18,59,93,.18) 42%, rgba(7,16,20,.58)); box-shadow: inset 0 0 42px rgba(233,225,207,.08), 0 30px 80px rgba(0,0,0,.56); backdrop-filter: blur(12px); transform: translateX(-8vw) rotate(-1.5deg); opacity: .68; transition: transform 900ms cubic-bezier(.22,.84,.16,1), opacity 700ms ease, filter 700ms ease; }
.is-current .tray, .tray.is-open { transform: translateX(0) rotate(var(--tray-tilt, -1.5deg)); opacity: 1; filter: saturate(1.1); }
.drawer-number { font-family: var(--tag); color: var(--red); text-transform: uppercase; letter-spacing: .24em; font-size: 14px; }
h1, h2 { font-family: var(--title); font-weight: 700; margin: 12px 0 20px; line-height: .88; letter-spacing: -.04em; }
h1 { font-size: clamp(76px, 15vw, 210px); }
h2 { font-size: clamp(52px, 9vw, 138px); max-width: 760px; }
.statement { color: rgba(233,225,207,.82); font-size: clamp(20px, 2vw, 32px); line-height: 1.18; max-width: 690px; }

.hero-sleeve { width: min(980px, 72vw); min-height: 56vh; padding: 58px; margin-left: 6vw; --tray-tilt: -2.4deg; }
.drawer-shadow { position: absolute; width: 80vw; height: 64vh; left: 3vw; top: 20vh; border: 1px solid rgba(158,246,216,.12); transform: rotate(-5deg); background: rgba(7,16,20,.34); box-shadow: 0 0 0 18px rgba(233,225,207,.025); }
.evidence-tag { position: absolute; right: 22vw; bottom: 22vh; font-family: var(--tag); text-transform: uppercase; letter-spacing: .25em; color: var(--black); background: var(--paper); padding: 12px 24px; box-shadow: 0 18px 38px rgba(0,0,0,.3); }
.tilted { transform: rotate(8deg); }
.marginalia { position: absolute; left: 7vw; top: 22vh; writing-mode: vertical-rl; font-family: var(--kr); color: rgba(158,246,216,.66); letter-spacing: .18em; }
.drawer-handle, .reset-case { position: absolute; left: 10vw; bottom: 10vh; border: 1px solid var(--brass); background: rgba(167,109,59,.16); color: var(--paper); font-family: var(--tag); text-transform: uppercase; letter-spacing: .2em; padding: 14px 24px; }

.rain-ripples { position: absolute; right: 8%; bottom: 11%; width: 250px; height: 170px; }
.rain-ripples i { position: absolute; inset: 22%; border: 1px solid rgba(158,246,216,.38); border-radius: 50%; animation: ripple 3.8s infinite ease-out; }
.rain-ripples i:nth-child(2) { animation-delay: 1.1s; }
.rain-ripples i:nth-child(3) { animation-delay: 2.2s; }

.chamber-drawer { background: radial-gradient(circle at 70% 30%, rgba(167,109,59,.16), transparent 28%); }
.specimen-grid { position: absolute; inset: 13vh 12vw; transform: rotate(4deg); background-image: linear-gradient(rgba(233,225,207,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(233,225,207,.08) 1px, transparent 1px); background-size: 58px 58px; border: 1px solid rgba(233,225,207,.1); }
.object-vault { width: min(850px, 64vw); padding: 50px; margin-left: 20vw; --tray-tilt: 2.2deg; }
.impossible-object { position: absolute; right: -90px; top: 26%; width: 300px; height: 300px; filter: drop-shadow(0 0 28px rgba(158,246,216,.3)); }
.key-bone { position: absolute; left: 128px; top: 40px; width: 44px; height: 220px; border-radius: 28px; background: linear-gradient(var(--paper), rgba(158,246,216,.75)); transform: rotate(38deg); }
.key-bone::before { content: ''; position: absolute; width: 92px; height: 92px; border: 14px solid var(--paper); border-radius: 50%; top: -42px; left: -24px; }
.moth-wing { position: absolute; width: 126px; height: 178px; top: 70px; background: radial-gradient(circle at 50% 35%, rgba(216,71,79,.42), transparent 20%), linear-gradient(135deg, rgba(158,246,216,.34), rgba(233,225,207,.12)); border: 1px solid rgba(233,225,207,.28); border-radius: 80% 10% 70% 20%; }
.moth-wing.left { left: 20px; transform: rotate(-28deg); }
.moth-wing.right { right: 10px; transform: scaleX(-1) rotate(-28deg); }
.chalk-outline { position: absolute; inset: 18px; border: 2px dashed rgba(233,225,207,.38); border-radius: 42% 58% 48% 52%; transform: rotate(-14deg); }
.acetate-note { position: absolute; left: 12vw; bottom: 18vh; font-family: var(--tag); color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; border-top: 1px solid rgba(158,246,216,.32); padding-top: 12px; }

.thread-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.thread-line { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 14 10; filter: drop-shadow(0 0 10px rgba(216,71,79,.55)); animation: threadMove 9s linear infinite; }
.thread-line.dim { stroke: rgba(216,71,79,.46); animation-direction: reverse; }
.pin { fill: var(--brass); stroke: var(--paper); stroke-width: 2; }
.map-panel { width: min(760px, 58vw); padding: 48px; margin-left: 28vw; --tray-tilt: -3deg; }
.pin-card { position: absolute; padding: 16px 20px; background: rgba(233,225,207,.92); color: var(--black); font-family: var(--tag); text-transform: uppercase; letter-spacing: .12em; max-width: 240px; box-shadow: 0 18px 34px rgba(0,0,0,.34); }
.card-a { left: 9vw; bottom: 18vh; transform: rotate(-7deg); }
.card-b { right: 12vw; top: 26vh; transform: rotate(5deg); }
.card-c { left: 45vw; bottom: 11vh; transform: rotate(2deg); }

.negative-plate { width: min(900px, 66vw); padding: 54px; margin-left: 10vw; --tray-tilt: 1deg; }
.photo-negative { position: absolute; right: -120px; top: 12%; width: 340px; height: 470px; background: linear-gradient(160deg, rgba(158,246,216,.15), rgba(7,16,20,.88)); border: 1px solid rgba(233,225,207,.24); box-shadow: inset 0 0 70px rgba(158,246,216,.16); }
.missing-face { position: absolute; left: 88px; top: 70px; width: 150px; height: 205px; border-radius: 50% 50% 43% 43%; background: radial-gradient(circle at 50% 48%, rgba(233,225,207,.82), rgba(233,225,207,.12) 56%, transparent 60%); filter: blur(2px); }
.fingerprint { position: absolute; left: 48px; bottom: 42px; width: 240px; height: 135px; border-radius: 50%; background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 8px, rgba(158,246,216,.36) 9px 11px); transform: rotate(-9deg); }
.vertical-label { position: absolute; right: 13vw; top: 18vh; writing-mode: vertical-rl; font-family: var(--tag); letter-spacing: .24em; color: var(--red); text-transform: uppercase; }
.botanical-shadow { position: absolute; left: 2vw; bottom: -6vh; width: 44vw; height: 48vh; opacity: .23; background: radial-gradient(ellipse at 20% 80%, rgba(158,246,216,.7), transparent 6%), radial-gradient(ellipse at 42% 64%, rgba(158,246,216,.6), transparent 7%), radial-gradient(ellipse at 60% 72%, rgba(158,246,216,.55), transparent 8%), linear-gradient(78deg, transparent 48%, rgba(158,246,216,.5) 49%, transparent 50%); filter: blur(1px); }

.final-light { width: min(940px, 68vw); padding: 56px; margin-left: 18vw; text-align: left; --tray-tilt: -1deg; }
.lens { position: absolute; right: -70px; bottom: -70px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(233,225,207,.48); background: radial-gradient(circle at 35% 28%, rgba(233,225,207,.38), rgba(158,246,216,.16) 32%, rgba(18,59,93,.36) 62%, rgba(7,16,20,.75)); box-shadow: inset 0 0 45px rgba(233,225,207,.2), 0 0 70px rgba(158,246,216,.24); }
.lens span { position: absolute; inset: 30%; border-radius: 50%; background: var(--black); box-shadow: 0 0 28px var(--cyan); }
.case-closure { position: absolute; left: 9vw; top: 28vh; font-family: var(--tag); color: var(--cyan); text-transform: uppercase; letter-spacing: .2em; transform: rotate(-6deg); }
.reset-case { left: auto; right: 11vw; bottom: 12vh; }

.progress-rail { position: fixed; left: 34px; top: 20vh; bottom: 9vh; width: 2px; background: rgba(233,225,207,.15); z-index: 35; }
.progress-rail span { display: block; width: 100%; height: 20%; background: linear-gradient(var(--red), var(--cyan)); transition: height 700ms ease; }

@keyframes rainDrift { to { background-position: 0 260px; } }
@keyframes ripple { 0% { transform: scale(.35); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes threadMove { to { stroke-dashoffset: -240; } }

@media (max-width: 760px) {
  .case-nav { right: 10px; transform: translateY(-50%) scale(.78); transform-origin: right center; }
  .case-status { display: none; }
  .chamber { padding: 108px 22px 70px; }
  .hero-sleeve, .object-vault, .map-panel, .negative-plate, .final-light { width: calc(100vw - 72px); margin-left: 26px; padding: 30px; }
  .impossible-object, .photo-negative, .lens { opacity: .58; right: -150px; }
  .pin-card { font-size: 12px; max-width: 175px; }
}