/* ============================================================
   THE ARCHIVE — design tokens & base atmosphere
   ============================================================ */

:root {
  /* warm analog palette */
  --black:        #0a0806;
  --black-2:      #120d09;
  --ink:          #1a130d;
  --walnut-deep:  #20140b;
  --walnut:       #3a2616;
  --walnut-2:     #4e3420;
  --walnut-hi:    #6b4a2d;
  --brass-dark:   #7a5a2e;
  --brass:        #b08a4a;
  --champagne:    #d8c08a;
  --gold:         #c9a86a;
  --amber:        #f0a94b;
  --amber-hot:    #ffcf86;
  --amber-glow:   #ffb35a;
  --ivory:        #efe7d6;
  --ivory-dim:    #cabfa9;
  --ivory-faint:  rgba(239,231,214,0.55);

  --screen-glow:  #f6ecd6;

  /* type */
  --serif:  "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --mono:   "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;

  --ease-mech: cubic-bezier(0.34, 0.02, 0.1, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}

#root { height: 100%; }

button { font-family: inherit; color: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* ---- the room ---- */
.stage {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(60,38,20,0.30), transparent 55%),
    radial-gradient(150% 120% at 50% 120%, rgba(40,26,14,0.55), transparent 60%),
    linear-gradient(180deg, #0c0907 0%, #0a0806 40%, #080604 100%);
  overflow: hidden;
  isolation: isolate;
}

/* faint ambient room light from the lamp, washes the whole scene */
.room-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 60%, rgba(255,160,70,0.10), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
  z-index: 1;
}
.stage[data-lamp="on"] .room-light { opacity: 1; }

/* vignette over everything */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(130% 100% at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}

/* the wooden desk surface */
.desk {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.25) 100%),
    repeating-linear-gradient(91deg,
      rgba(0,0,0,0.10) 0px, rgba(0,0,0,0) 2px, rgba(255,200,150,0.018) 5px, rgba(0,0,0,0) 9px),
    linear-gradient(180deg, #2a1a0f 0%, #1d120a 55%, #130b06 100%);
  box-shadow: inset 0 40px 80px -40px rgba(0,0,0,0.8);
  z-index: 2;
  transform-origin: bottom center;
}
.desk::before {
  /* edge highlight where desk meets back wall */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,190,120,0.18) 35%, rgba(255,190,120,0.22) 65%, transparent);
}
.desk::after {
  /* soft reflection of the lamp on polished wood */
  content: "";
  position: absolute;
  left: 50%; top: -2%;
  width: 46%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(60% 90% at 50% 0%, rgba(255,170,80,0.16), transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
  mix-blend-mode: screen;
}
.stage[data-lamp="on"] .desk::after { opacity: 1; }

/* ---- generic helpers ---- */
.center-col {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.no-select { user-select: none; -webkit-user-select: none; }

/* the scene column — screen / projector / slides, always fits viewport */
.layout {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2.2vh, 30px) 0 0;
}
.proj-band {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 0 0 auto;
  height: clamp(130px, 25vh, 280px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
/* the projector steps back when the lit screen becomes the invitation */
.stage[data-finale="on"] .proj-band { opacity: 0; transform: translateY(28px); pointer-events: none; }
.stage[data-finale="on"] .beam-layer,
.stage[data-finale="on"] .dust-host { opacity: 0; }
.stage[data-finale="on"] .screen-frame { visibility: hidden; }
.proj-band .projector-wrap {
  transform: scale(var(--pscale, 1));
}

/* fade utility driven by JS */
.fade { opacity: 0; transition: opacity .8s var(--ease-soft); }
.fade.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.2s !important; }
}