/* ============================================================
   AUREA — Divine Ratio Archive
   Visual system: Renaissance luxury colliding with engineering
   blueprints. Obsidian void, laser cyan, crimson focus, sacred
   gold, and editorial paper — nothing in between.
   ============================================================ */

/* ── type ──────────────────────────────────────────────────── */
@font-face{
  font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/bodoni-moda-normal-400-900.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('fonts/bodoni-moda-italic-400-900.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-mono-normal-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/space-mono-normal-700.woff2') format('woff2');
}

:root{
  /* palette */
  --void:#000000;
  --void-2:#121212;
  --cyan:#e8e6e1;        /* neutral: was a blue accent */
  --crimson:#c9c5bd;     /* neutral: was a red accent */
  --gold:#d8d4cc;         /* neutral: was gold */
  --gold-2:#b8b4ac;
  --paper:#d8d2c4;

  /* type */
  --display:'Bodoni Moda', 'Didot', 'Bodoni MT', serif;
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --zh:'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  /* hud metrics */
  --pad:clamp(14px, 2.2vw, 30px);
  --hair:1px;
  --hud-ink:rgba(216,210,196,.74);
  --hud-ink-dim:rgba(216,210,196,.44);
  --hud-line:rgba(216,210,196,.24);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
html{background:var(--void)}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor:none;
  overscroll-behavior:none;
}
body.has-touch{cursor:auto}

#stage{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:0;
  touch-action:none;
}

/* ── film-grade overlays ───────────────────────────────────── */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40}

.fx-grain{
  opacity:.022;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* no animation: the grain was reading as shimmer */
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}

.fx-vignette{
  background:radial-gradient(ellipse 88% 80% at 50% 50%,
    transparent 0%, transparent 58%, rgba(0,0,0,.22) 82%, rgba(0,0,0,.45) 100%);
}

.fx-scan{
  opacity:0;display:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  transition:opacity .6s ease;
}
.fx-scan.on{opacity:1}

.fx-flash{
  opacity:0;background:#fff;
  transition:opacity .12s ease-out;
}
.fx-flash.pulse{opacity:.5;transition:opacity .06s ease-in}

/* ── HUD shell ─────────────────────────────────────────────── */
.hud{
  position:fixed;inset:0;z-index:30;
  pointer-events:none;
  padding:var(--pad);
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:1fr;
  opacity:0;transition:opacity 1.2s ease .3s;
}
.hud.ready{opacity:1}
.hud > *{pointer-events:none}
.hud button,.hud nav{pointer-events:auto}

/* ── top bar ───────────────────────────────────────────────── */
.hud-top{
  grid-row:1;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:start;gap:12px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hud-ink);
}
.hud-left{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand{
  font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:.42em;color:var(--paper);
}
.brand-sub{
  font-size:9px;letter-spacing:.3em;color:var(--hud-ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hud-centre{display:flex;align-items:center;gap:8px;justify-content:center}
.tc{color:var(--cyan);letter-spacing:.14em}
.sep{color:var(--hud-ink-dim)}
.act{color:var(--gold)}
.hud-right{display:flex;gap:8px;justify-content:flex-end}
.hud-btn{
  font:inherit;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hud-ink);background:transparent;
  border:1px solid var(--hud-line);
  padding:6px 11px;cursor:none;
  transition:color .3s,border-color .3s,background .3s;
}
.hud-btn:hover{color:var(--paper);border-color:var(--hud-ink)}
.hud-btn[aria-pressed="true"]{
  color:var(--void);background:var(--cyan);border-color:var(--cyan);
}

/* ── registration crosses ──────────────────────────────────── */
.cross{
  position:absolute;width:15px;height:15px;opacity:.5;
}
.cross::before,.cross::after{
  content:'';position:absolute;background:var(--hud-ink);
}
.cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.cross.tl{top:calc(var(--pad) + 34px);left:var(--pad)}
.cross.tr{top:calc(var(--pad) + 34px);right:var(--pad)}
.cross.bl{bottom:calc(var(--pad) + 62px);left:var(--pad)}
.cross.br{bottom:calc(var(--pad) + 62px);right:var(--pad)}

/* ── edge rulers ───────────────────────────────────────────── */
.ruler{
  position:absolute;top:22%;bottom:22%;width:1px;
  background:var(--hud-line);
}
.ruler-left{left:calc(var(--pad) + 6px)}
.ruler-right{right:calc(var(--pad) + 6px)}
.ruler::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,
    var(--hud-ink) 0 1px, transparent 1px 26px);
  opacity:.5;
}

/* ── chapter caption ───────────────────────────────────────── */
.caption{
  position:absolute;left:var(--pad);bottom:calc(var(--pad) + 74px);
  max-width:min(430px,40vw);
}
.cap-rule{
  width:64px;height:1px;background:var(--gold);margin-bottom:16px;
  transform-origin:left;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.caption.in .cap-rule{transform:scaleX(1)}
.cap-index{
  font-size:10px;letter-spacing:.3em;color:var(--gold);
  display:flex;gap:6px;align-items:baseline;margin-bottom:8px;
}
.cap-of{color:var(--hud-ink-dim)}
.cap-title{
  font-family:var(--display);
  font-size:clamp(27px,4.4vw,52px);
  font-weight:500;line-height:.95;
  letter-spacing:.14em;
  margin:0 0 10px;
  color:var(--paper);
  text-transform:uppercase;
}
.cap-sub{
  font-family:var(--zh);
  font-size:13px;letter-spacing:.34em;
  color:var(--hud-ink);margin:0 0 12px;
}
.cap-line{
  font-size:12px;line-height:1.75;letter-spacing:.06em;
  color:var(--hud-ink);margin:0;
  max-width:44ch;
}
.caption .cap-index,.caption .cap-title,.caption .cap-sub,.caption .cap-line{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.caption.in .cap-index{opacity:1;transform:none;transition-delay:.05s}
.caption.in .cap-title{opacity:1;transform:none;transition-delay:.12s}
.caption.in .cap-sub{opacity:1;transform:none;transition-delay:.2s}
.caption.in .cap-line{opacity:1;transform:none;transition-delay:.28s}

/* ── spec block (right) ────────────────────────────────────── */
.spec{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  text-align:right;opacity:0;transition:opacity .8s ease .4s;
}
.spec.in{opacity:1}
.spec-row{display:flex;gap:12px;justify-content:flex-end;align-items:baseline}
.spec-row span{color:var(--hud-ink-dim);min-width:44px}
.spec-row b{color:var(--gold-2);font-weight:400;letter-spacing:.1em;min-width:76px;text-align:right}

/* ── annotations (pinned labels) ───────────────────────────── */
.annotations{position:absolute;inset:0}
.note{
  position:absolute;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);white-space:nowrap;
  padding:5px 11px 4px;
  background:rgba(10,10,10,.72);
  border:1px solid rgba(255,59,48,.55);
  border-left:2px solid var(--crimson);
  backdrop-filter:blur(2px);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.5);
  opacity:0;transform:translate(-50%,-50%) translateY(6px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.note.on{opacity:1;transform:translate(-50%,-50%)}
.note::before{
  content:'';position:absolute;left:-5px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;
  background:var(--crimson);border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,59,48,.18), 0 0 14px rgba(255,59,48,.85);
  animation:notePulse 1.9s ease-in-out infinite;
}
.note::after{
  content:'';position:absolute;left:100%;top:50%;width:52px;height:1px;
  background:linear-gradient(90deg, rgba(255,59,48,.7), transparent);
  margin-left:6px;
}
@keyframes notePulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── bottom bar ────────────────────────────────────────────── */
.hud-bottom{
  grid-row:3;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;
}
.chapters{
  display:flex;gap:2px;flex-wrap:wrap;
  border:1px solid var(--hud-line);
  background:rgba(8,8,8,.4);
}
.ch-tab{
  font:inherit;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hud-ink-dim);background:transparent;border:0;
  padding:9px 13px;cursor:none;position:relative;
  transition:color .3s,background .3s;
  white-space:nowrap;
}
.ch-tab b{font-weight:400;color:inherit;opacity:.55;margin-right:6px}
.ch-tab:hover{color:var(--paper);background:rgba(216,210,196,.05)}
.ch-tab[aria-current="true"]{color:var(--void);background:var(--gold)}
.ch-tab[aria-current="true"] b{opacity:.6}
.ch-tab::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ch-tab.live::after{transform:scaleX(1)}

.hud-stats{
  display:flex;gap:9px;align-items:center;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hud-ink-dim);white-space:nowrap;
}
.hud-stats b{color:var(--cyan);font-weight:400}
#shaderLabel{color:var(--gold-2)}

/* ── golden overlay ────────────────────────────────────────── */
.golden{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:20;
}
.golden path,.golden line,.golden circle,.golden rect,.golden polyline{
  fill:none;stroke:rgba(232,230,225,.34);stroke-width:1;vector-effect:non-scaling-stroke;
}


/* ── work credit (the real object) ─────────────────────────── */
.work{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) + 74px);
  text-align:right;max-width:min(300px,34vw);
  opacity:0;transition:opacity .9s ease .5s;
}
.work.in{opacity:1}
.work-rule{
  height:1px;background:linear-gradient(90deg,transparent,var(--gold));
  margin-bottom:10px;transform-origin:right;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .2s;
}
.work.in .work-rule{transform:scaleX(1)}
.work-label{
  font-size:8.5px;letter-spacing:.34em;color:var(--hud-ink-dim);
  margin-bottom:7px;
}
.work-title{
  font-family:var(--display);font-size:15px;font-weight:500;
  letter-spacing:.05em;color:var(--paper);line-height:1.25;
  margin-bottom:5px;
}
.work-meta{
  font-size:9.5px;letter-spacing:.12em;color:var(--gold-2);margin-bottom:3px;
}
.work-museum{
  font-size:8.5px;letter-spacing:.1em;color:var(--hud-ink-dim);line-height:1.5;
}
@media (max-width:900px){ .work{display:none} }

/* ── reticle ───────────────────────────────────────────────── */
.reticle{
  position:fixed;left:0;top:0;width:64px;height:64px;
  margin:-32px 0 0 -32px;
  z-index:50;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
}
.reticle.on{opacity:1}
.reticle svg{width:64px;height:64px;overflow:visible}
.ret-ring,.ret-dot,.ret-tick{
  fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke;
}
.ret-ring{opacity:.32;transition:opacity .3s,stroke .3s,transform .3s;transform-origin:32px 32px}
.ret-dot{fill:var(--paper);stroke:none;opacity:.7}
.ret-tick{opacity:.4}
.reticle.hot .ret-ring{opacity:1;stroke:var(--cyan);transform:scale(1.22)}
.reticle.hot .ret-dot{fill:var(--cyan);opacity:1}
.reticle.hot .ret-tick{stroke:var(--cyan);opacity:.85}
.ret-read,.ret-cue{
  position:absolute;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;color:var(--hud-ink);
}
.ret-read{left:74px;top:26px}
.ret-cue{
  left:74px;top:42px;color:var(--cyan);
  opacity:0;transform:translateX(-5px);
  transition:opacity .3s,transform .3s;
}
.reticle.hot .ret-cue{opacity:1;transform:none}

/* ── enter gate ────────────────────────────────────────────── */
.enter{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  background:var(--void);
  cursor:auto;
  transition:opacity 1s ease;
}
.enter.gone{opacity:0;pointer-events:none}
.enter-inner{
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:24px;
}
.enter-brand{
  font-family:var(--display);font-size:clamp(38px,9vw,84px);font-weight:500;
  letter-spacing:.5em;color:var(--paper);text-indent:.5em;
}
.enter-line{width:min(340px,60vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.enter-copy{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--hud-ink);margin:0;
}
.enter-btn{
  font:inherit;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper);background:transparent;
  border:1px solid var(--hud-line);padding:15px 34px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:color .4s,border-color .4s;
}
.enter-btn::before{
  content:'';position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.enter-btn span{position:relative;z-index:1}
.enter-btn:hover{color:var(--void);border-color:var(--gold)}
.enter-btn:hover::before{transform:none}
.enter-hint{font-size:9px;letter-spacing:.2em;color:var(--hud-ink-dim);margin:0;text-transform:uppercase}

/* ── sealed / live state flourish ──────────────────────────── */
body.live .cross{opacity:.8}
body.live .fx-grain{opacity:.075}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .spec{display:none}
  .caption{max-width:min(88vw,520px);bottom:calc(var(--pad) + 84px)}
  .cap-title{font-size:clamp(26px,8.4vw,44px);letter-spacing:.1em}
  .hud-centre{display:none}
  .cross{display:none}
  .ruler{display:none}
  .hud-bottom{flex-direction:column;align-items:stretch;gap:10px}
  .chapters{justify-content:flex-start}
  .ch-tab{padding:9px 10px;font-size:8.5px}
  .hud-stats{justify-content:flex-end}
}
@media (max-width:560px){
  .brand-sub{display:none}
  .cap-line{display:none}
  .ch-tab b{margin-right:4px}
}

/* the reticle is meaningless without a pointer */
@media (hover:none),(pointer:coarse){
  .reticle{display:none}
  body{cursor:auto}
}

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