/* THE SYSTEM · shared spine
   tokens, grain, veil, cursor, chart, log register.
   Every page loads this first. Page css only adds its room's physics. */

/* ONE BLUE · measured, not chosen.
   All 147 photographs on @carekilledthecat_ reduced to nine colours in oklab.
   Exactly one came back with chroma: #2454B9 at 3.4%. The other eight are
   neutral, running from #F3F4F3 to black. Ground is #131111, her single most
   common colour. Old token names are kept so nothing downstream breaks. */
:root {
  --void: #131111;        /* her ground, 17.8% of all her photographs */
  --ikb: #2454B9;         /* the one colour that survives, 3.4% */
  --ikb-deep: #17307A;
  --bone: #F3F4F3;        /* her paper, 12.4% */
  --dim: #9BA0A5;         /* 11.3% */
  --blood: #C03B34;       /* the other colour, only in The Exception */
  --skin: #86746F;        /* 11.0% */
  --deep: #302B2E;        /* 17.0% */
  --ink: #000000;
  --mono: "IBM Plex Mono", monospace;
  --serif: "Spectral", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--void); }

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
}

@media (pointer: fine) {
  body.sys-cursor, body.sys-cursor a, body.sys-cursor button { cursor: none; }
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; }

/* ---------- register ---------- */
.log {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: lowercase;
}

::selection { background: var(--ikb); color: var(--bone); }

/* ---------- grain ---------- */
#sys-grain {
  position: fixed; inset: -60px;
  pointer-events: none;
  z-index: 60;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: sys-grain-jitter 0.9s steps(4) infinite;
}
@keyframes sys-grain-jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-18px, 12px); }
  50% { transform: translate(10px, -16px); }
  75% { transform: translate(-8px, -9px); }
  100% { transform: translate(0, 0); }
}

/* ---------- veil (page transitions: grain thickens, then develops away) ---------- */
#sys-veil {
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"),
    var(--void);
  opacity: 0;
  transition: opacity 0.34s ease-in;
}
#sys-veil.thick { opacity: 1; }
/* arrival: page develops out of the veil */
body.developing #sys-veil { opacity: 1; transition: none; }
body.developed #sys-veil { opacity: 0; transition: opacity 0.85s ease-out; }

/* ---------- cursor ---------- */
#sys-cursor {
  position: fixed; left: 0; top: 0;
  width: 9px; height: 9px;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  display: none;
}
@media (pointer: fine) { body.sys-cursor #sys-cursor { display: block; } }
#sys-cursor::before, #sys-cursor::after {
  content: ""; position: absolute; background: var(--bone);
}
#sys-cursor::before { left: 4px; top: 0; width: 1px; height: 9px; }
#sys-cursor::after { left: 0; top: 4px; width: 9px; height: 1px; }

/* ---------- dwell hud ---------- */
#sys-dwell {
  position: fixed; left: 0; top: 0;
  z-index: 95;
  pointer-events: none;
  transform: translate(14px, 18px);
  opacity: 0;
  transition: opacity 0.2s;
}
#sys-dwell.on { opacity: 1; }
#sys-dwell .t { display: block; margin-bottom: 5px; color: var(--bone); }
#sys-dwell .bar {
  width: 74px; height: 1px; background: rgba(216, 211, 200, 0.22);
  position: relative; overflow: hidden;
}
#sys-dwell .bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--bone);
  transform-origin: left;
  transform: scaleX(0);
}
#sys-dwell.burning .t { color: var(--blood); }
#sys-dwell.burning .bar i { background: var(--blood); }

/* ---------- chart glyph ---------- */
#sys-glyph {
  position: fixed; top: 28px; right: 30px;
  width: 16px; height: 12px;
  z-index: 80;
  border: 1px solid var(--dim);
  background: none;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.3s, border-color 0.3s;
}
#sys-glyph:hover { opacity: 1; border-color: var(--bone); }
#sys-glyph.breathe { animation: sys-breathe 2.2s ease-in-out 0.8s 1; }
@keyframes sys-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  40% { transform: scale(1.45); opacity: 1; border-color: var(--bone); }
}

/* ---------- the chart ---------- */
#sys-chart {
  position: fixed; inset: 0;
  z-index: 85;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(0, 29, 104, 0.34), transparent 70%),
    rgba(5, 5, 7, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}
#sys-chart.open {
  opacity: 1; visibility: visible;
  transition: opacity 0.4s, visibility 0s;
}
#sys-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#sys-chart svg line {
  stroke: rgba(216, 211, 200, 0.13);
  stroke-width: 1;
}
.chart-entry {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  text-align: left;
  padding: 10px 12px;
  transition: opacity 0.3s;
}
.chart-entry .box {
  display: block;
  width: 18px; height: 13px;
  border: 1px solid var(--dim);
  margin-bottom: 9px;
  transition: border-color 0.3s, background 0.3s;
}
.chart-entry:hover .box { border-color: var(--bone); }
.chart-entry.current .box {
  border-color: var(--bone);
  animation: sys-pulse 2.6s ease-in-out infinite;
}
@keyframes sys-pulse {
  0%, 100% { background: transparent; }
  50% { background: rgba(216, 211, 200, 0.28); }
}
.chart-entry .addr { display: block; color: var(--bone); }
.chart-entry .lbl { display: block; margin-top: 3px; }
.chart-entry.redacted .lbl { color: var(--dim); }
.chart-entry.redacted .lbl .real { display: none; color: var(--bone); }
.chart-entry.redacted .lbl.flash .real { display: inline; }
.chart-entry.redacted .lbl.flash .blocks { display: none; }
#sys-chart-log {
  position: absolute; left: 34px; bottom: 30px;
  color: var(--dim);
}
#sys-chart-close {
  position: absolute; top: 24px; right: 26px;
  padding: 8px;
  color: var(--dim);
}
#sys-chart-close:hover { color: var(--bone); }

/* ---------- shared room chrome ---------- */
.sector-line {
  position: fixed; left: 34px; top: 30px;
  z-index: 70;
}
.room-return {
  display: inline-block;
  margin: 90px 0 120px 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(216, 211, 200, 0.18);
  transition: border-color 0.3s, color 0.3s;
}
.room-return:hover { border-color: var(--bone); color: var(--bone); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #sys-grain { animation: none; }
  #sys-glyph.breathe { animation: none; }
  .chart-entry.current .box { animation: none; background: rgba(216, 211, 200, 0.28); }
  #sys-veil { transition: none; }
  body.developed #sys-veil { transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}