@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('../fonts/cormorant.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --base: #0a0908;
  --bone: #e9e2d0;
  --gilt: #c9a227;
  --ui: 'Inter', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--base); }
html.lenis, html.lenis body { height: auto; }
body { background: var(--base); color: var(--bone); font-family: var(--ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gilt); color: var(--base); }

/* preloader */
.preloader { position: fixed; inset: 0; z-index: 100; background: var(--base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity .8s, visibility .8s; }
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__frame { width: 120px; height: 150px; border: 3px solid var(--gilt); animation: gilt 1.6s ease-in-out infinite; }
@keyframes gilt { 50% { box-shadow: 0 0 34px rgba(201,162,39,.45); } }
.preloader__title { letter-spacing: .5em; font-size: 13px; color: var(--gilt); }

/* grain */
.grain { position: fixed; inset: -100%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* masthead */
.masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: space-between; padding: 20px 32px; font-size: 11px; letter-spacing: .35em; mix-blend-mode: difference; }
.masthead__era { color: var(--gilt); }

/* corridor */
.corridor { height: 760vh; position: relative; }
.corridor__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 900px; }
.corridor__track { position: absolute; inset: 0; transform-style: preserve-3d; }
.corridor-frame { position: absolute; top: 50%; width: 26vw; aspect-ratio: 4/5; transform: translate(-50%,-50%); border: 10px solid var(--gilt); box-shadow: 0 0 60px rgba(0,0,0,.8), inset 0 0 24px rgba(0,0,0,.5); background-size: cover; background-position: center; will-change: transform, opacity; }
.corridor-frame__label { position: absolute; bottom: -44px; left: 0; font-size: 11px; letter-spacing: .3em; color: var(--bone); opacity: .7; }
.corridor__hint { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .4em; opacity: .5; text-transform: uppercase; }

/* room dive */
.room__dive { height: 320vh; position: relative; }
.room__dive-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--base); }
.dive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__dive-caption { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; color: var(--bone); opacity: .8; white-space: nowrap; text-align: center; }

/* room world — layered: painting < fx (interaction) < hotspots < UI */
.room__world { position: relative; min-height: 100vh; overflow: hidden; background: var(--base); }
.room__painting { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.room__fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* torch (Baroque) */
.torch-shade { position: absolute; inset: 0;
  background: radial-gradient(circle 190px at var(--tx, 50%) var(--ty, 50%),
    transparent 0%, rgba(10,9,8,.25) 45%, rgba(10,9,8,.96) 78%, #0a0908 100%); }
.room__world.all-lit .torch-shade { background: rgba(10,9,8,.15); transition: background 1.2s ease; }

/* resolve (Impressionism) — painting soft; a sharp lens follows the cursor */
.room__world[data-interaction="resolve"] .room__painting { filter: blur(5px) saturate(1.05); }
.resolve-lens { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
  -webkit-mask-image: radial-gradient(circle 150px at var(--lx,50%) var(--ly,50%), #000 0%, rgba(0,0,0,.6) 55%, transparent 75%);
  mask-image: radial-gradient(circle 150px at var(--lx,50%) var(--ly,50%), #000 0%, rgba(0,0,0,.6) 55%, transparent 75%); }
.room__world.lensing .resolve-lens { opacity: 1; }

/* gap (High Renaissance) — igniting glow when the spark completes */
.room__world .room__painting { transition: filter .5s ease; }
.room.ignited .room__world[data-interaction="gap"] .room__painting { filter: brightness(1.18) contrast(1.05); }

/* hotspots */
.hotspots { position: absolute; inset: 0; z-index: 3; }
.hotspot { position: absolute; width: 64px; height: 64px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(233,226,208,.22); background: transparent; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.hotspot::after { content: ''; position: absolute; inset: 44%; border-radius: 50%; background: rgba(233,226,208,.5); }
.hotspot:hover { border-color: var(--gilt); }
.hotspot.lit { border-color: var(--gilt); box-shadow: 0 0 22px rgba(201,162,39,.5); }
.hotspot.lit::after { background: var(--gilt); }
.hotspot:focus-visible { outline: 2px solid var(--gilt); outline-offset: 4px; }
/* torch room hides the markers until lit by the light */
.room__world[data-interaction="torch"] .hotspot { border-color: transparent; }
.room__world[data-interaction="torch"] .hotspot::after { background: transparent; }
.room__world[data-interaction="torch"] .hotspot.lit { border-color: var(--gilt); }
.room__world[data-interaction="torch"] .hotspot.lit::after { background: var(--gilt); }
/* every hotspot chimes — pulse when it sounds a note */
.hotspot.chiming { border-color: var(--gilt); box-shadow: 0 0 26px 4px rgba(201,162,39,.5); }
.hotspot.chiming::after { background: var(--gilt); transform: scale(1.4); }
/* instrument (Abstraction) — larger, instrument-like targets + stronger ring */
.hotspot--instrument { width: 82px; height: 82px; }
.hotspot--instrument.chiming { box-shadow: 0 0 34px 8px rgba(201,162,39,.6); transform: translate(-50%,-50%) scale(1.14); }

.plaque { position: absolute; top: 10vh; left: 32px; max-width: 300px; padding: 18px 20px; background: rgba(10,9,8,.82); border-left: 3px solid var(--gilt); backdrop-filter: blur(8px); }
.plaque__movement { font-family: 'Cormorant', serif; font-size: 15px; letter-spacing: .3em; color: var(--gilt); }
.plaque__line { margin-top: 10px; font-size: 14px; line-height: 1.6; }

.factcard { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); width: min(520px, 88vw); padding: 22px 26px; background: rgba(10,9,8,.9); border: 1px solid rgba(201,162,39,.5); backdrop-filter: blur(10px); }
.factcard[hidden] { display: none; }
.factcard__title { font-family: 'Cormorant', serif; font-size: 18px; letter-spacing: .2em; color: var(--gilt); text-transform: uppercase; }
.factcard__body { margin-top: 10px; font-size: 14px; line-height: 1.65; }

.xray-btn { position: absolute; top: 10vh; right: 32px; padding: 12px 18px; background: transparent; border: 1px solid rgba(233,226,208,.4); color: var(--bone); font-family: var(--ui); font-size: 11px; letter-spacing: .3em; cursor: pointer; }
.xray-btn[aria-pressed="true"], .xray-btn:hover { border-color: var(--gilt); color: var(--gilt); }
.room__world.xray .room__painting { filter: grayscale(1) invert(.88) contrast(1.25); }

.pigment-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 14px; padding: 18px 28px; background: rgba(10,9,8,.95); border: 1px solid var(--gilt); font-size: 12px; letter-spacing: .3em; z-index: 5; }
.pigment-toast[hidden] { display: none; }
.pigment-toast__chip { width: 22px; height: 22px; border-radius: 50%; background: #f4f1e8; box-shadow: 0 0 14px rgba(244,241,232,.6); }

.palette-tin { position: fixed; bottom: 24px; right: 24px; z-index: 85; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding: 10px 12px; background: rgba(10,9,8,.85); border: 1px solid rgba(201,162,39,.55); min-height: 40px; max-width: 232px; }
.palette-tin__chip { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.5); }
.palette-tin__chip--empty { border: 1px dashed rgba(233,226,208,.3); box-shadow: none; }

/* corridor intro overlay */
.corridor__intro { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); text-align: center; width: 90vw; pointer-events: none; }
.corridor__h1 { font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: .12em; color: var(--bone); }
.corridor__tag { margin-top: 12px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt); }

/* finale */
.finale { position: relative; min-height: 100vh; background: var(--base); display: flex; align-items: center; justify-content: center; padding: 12vh 24px; }
.finale__inner { max-width: 1040px; width: 100%; text-align: center; }
.finale__eyebrow { font-size: 12px; letter-spacing: .45em; color: var(--gilt); }
.finale__title { font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(2.2rem, 6.5vw, 5.5rem); line-height: 1.02; letter-spacing: .04em; margin: 18px 0 34px; text-transform: uppercase; }
.finale__canvas { width: 100%; max-width: 1000px; aspect-ratio: 5/3; border: 1px solid rgba(201,162,39,.3); background: var(--base); }
.finale__note { margin-top: 22px; font-size: 14px; letter-spacing: .12em; color: rgba(233,226,208,.7); }
.finale__cta { display: inline-block; margin-top: 22px; padding: 15px 34px; border-radius: 999px; text-decoration: none; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(233,226,208,.3); color: rgba(233,226,208,.4); pointer-events: none; transition: all .3s; }
.finale__cta.ready { background: var(--gilt); color: var(--base); border-color: var(--gilt); pointer-events: auto; font-weight: 600; }
.finale__cta.ready:hover { transform: translateY(-3px); box-shadow: 0 16px 44px -12px rgba(201,162,39,.5); }
.colophon { margin-top: 72px; font-size: 11px; letter-spacing: .1em; color: rgba(233,226,208,.32); line-height: 1.8; }

@media (max-width: 720px) {
  .plaque { max-width: 62vw; top: 8vh; left: 18px; padding: 12px 14px; }
  .plaque__line { font-size: 12px; }
  .xray-btn { top: 8vh; right: 16px; padding: 9px 12px; font-size: 10px; }
  .factcard { width: 92vw; bottom: 4vh; padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }