:root {
  --black: #050403;
  --gold: #e8b45a;
  --gold-hi: #ffdc9a;
  --ink: #ece4d6;
  --muted: #a39a8b;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--sans); font-weight: 300; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the scene (home page: one screen, never scrolls) ---------- */

body.scene { height: 100vh; height: 100dvh; overflow: hidden; }
#stage { position: fixed; inset: 0; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* when the scene is zoomed out to fit, a dim blur of it fills the margins */
#backdrop {
  position: absolute; inset: -60px; background: center / cover no-repeat;
  filter: blur(32px) brightness(.42) saturate(1.15); opacity: 0; transition: opacity 1.8s ease;
}
#backdrop.on { opacity: 1; }
#lines, #tips, #trace { mix-blend-mode: screen; pointer-events: none; }
#trace { opacity: 0; transition: opacity .5s ease; }
#trace.on { opacity: 1; }

.page .wordmark, .page .menu { font-family: var(--serif); letter-spacing: .08em; color: var(--ink); text-decoration: none; }
.page .wordmark { font-size: 22px; }
.page .menu { display: flex; gap: 22px; font-size: 17px; }
.page .menu a { text-decoration: none; opacity: .85; }
.page .menu a:hover, .page .menu a:focus-visible { color: var(--gold-hi); opacity: 1; }

/* hotspots: unlabelled until you come close */
.hs {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity 1s ease; outline: none;
}
.hs.on { opacity: 1; pointer-events: auto; }
.hs .dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold-hi);
  box-shadow: 0 0 10px 3px rgba(232, 180, 90, .7), 0 0 40px 10px rgba(232, 180, 90, .25);
  animation: breathe 3.2s ease-in-out infinite;
}
.hs .ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold);
  opacity: 0; transform: scale(.2);
}
.hs.on .ring { animation: ripple 1.4s ease-out 1; }
.hs.awake .dot { animation-duration: 1.1s; }

/* phones: one object at a time breathes a faint gold outline */
#pulse { opacity: 0; pointer-events: none; }
#pulse.beat { animation: beat 2.8s ease-in-out 1; }
@keyframes beat { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* the veil that dims everything but the object you're pointing at */
#dim { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#dim.on { opacity: 1; }

/* the object's name: large, gold, rising out of the scene */
.hl {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none;
  padding: 34px 78px; white-space: nowrap; text-align: center;
  background: radial-gradient(closest-side, rgba(5, 4, 3, .86), rgba(5, 4, 3, .55) 55%, rgba(5, 4, 3, 0));
  opacity: 0; transition: opacity .55s ease;
}
.hl span {
  display: inline-block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 3.9vw, 54px); letter-spacing: .14em; color: #ffe2a8;
  text-shadow: 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .95), 0 0 26px rgba(255, 200, 110, .6);
  transform: translateY(10px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), letter-spacing .9s ease;
}
.hl span::after {
  content: ""; display: block; height: 1px; margin: 8px auto 0; width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: scaleX(0); transition: transform .9s ease .15s;
}
.hl.on { opacity: 1; }
.hl.on span { transform: none; letter-spacing: .08em; }
.hl.on span::after { transform: scaleX(1); }

@keyframes breathe { 0%, 100% { transform: scale(.8); opacity: .75; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }

/* gold bloom that carries you through a hotspot */
.bloom {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), var(--gold-hi) 0, var(--gold) 8%, var(--black) 30%);
  clip-path: circle(0 at var(--bx, 50%) var(--by, 50%));
  transition: clip-path .7s cubic-bezier(.7, 0, .3, 1);
}
.bloom.go { clip-path: circle(150% at var(--bx, 50%) var(--by, 50%)); }


/* ---------- content pages (these scroll) ---------- */

body.page { min-height: 100vh; animation: arrive .9s ease both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.page header { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 24px; }
.page .menu a[aria-current] { color: var(--gold-hi); }
.page main { max-width: 720px; margin: 0 auto; padding: 8vh 24px 14vh; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 68px); line-height: 1.05; margin: 0 0 .5em; color: var(--gold-hi); }
.page h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; margin: 2.2em 0 .5em; color: var(--gold); }
.page p, .page li { font-size: 17px; line-height: 1.7; color: var(--ink); }
.page .tbd { color: var(--muted); font-style: italic; border-left: 1px solid var(--gold); padding-left: 14px; }
.page .rule { width: 64px; height: 1px; background: var(--gold); margin: 0 0 2.5em; }
.page footer { text-align: center; padding: 0 24px 40px; color: var(--muted); font-size: 13px; }