/* ============================================================
   10FORTY3 — instrument readout
   One continuous machine observing the beginning of everything.
   ============================================================ */

/* ---- numerals: one fingerprint everywhere -------------------- */
:root {
  /* tinted near-black void — never pure #000 */
  --void:        #0c0e13;
  --void-2:      #11141a;
  --void-rule:   rgba(232,234,240,0.14);
  --void-rule-2: rgba(232,234,240,0.07);

  /* cool near-white inks — never pure #fff */
  --ink:     #e6e8ee;
  --ink-dim: rgba(230,232,238,0.62);
  --ink-faint: rgba(230,232,238,0.34);
  --ink-ghost: rgba(230,232,238,0.16);

  /* the ONE warmth — first light. cools toward grey as you scroll. */
  --first-light: #fff4e6;
  --ember:       #b5532a;
  /* --live is what every active/live element reads; JS cools it on scroll */
  --live: var(--first-light);
  --live-soft: rgba(255,244,230,0.5);

  --cool-grey: #aab2c2;

  --grain: 0.05;        /* film grain strength */
  --motion: 1;          /* 0 disables heavy motion (reduced-motion / tweak) */

  --bracket: 1px;
  --ruler-w: 46px;
  --gut: clamp(18px, 4vw, 64px);
}

/* ---- LIGHT THEME — the instrument under daylight ------------- */
/* Not a naive invert: the void becomes a cool near-white plate, the
   inks become a cool near-black, and the ONE warmth drops to the
   ember so it still reads on light. Canvas tones are flipped in JS
   (see theme.js → Theme.map). */
html[data-theme="light"] {
  --void:        #efeeea;
  --void-2:      #e6e5e0;
  --void-rule:   rgba(30,28,24,0.16);
  --void-rule-2: rgba(30,28,24,0.08);

  --ink:     #232220;
  --ink-dim: rgba(36,34,31,0.66);
  --ink-faint: rgba(36,34,31,0.40);
  --ink-ghost: rgba(36,34,31,0.18);

  --first-light: #b5532a;   /* the ember reads as the warmth on light */
  --live: var(--first-light);
  --live-soft: rgba(181,83,42,0.5);
  --cool-grey: #6f6a62;
}
/* grain darkens (multiply) instead of lightens (screen) on a light plate */
html[data-theme="light"] #grain { mix-blend-mode: multiply; opacity: calc(var(--grain) * 0.6); }
/* gentle, light-handed vignette rather than a heavy black one */
html[data-theme="light"] #instrument-veil {
  background: radial-gradient(120% 100% at 50% 42%, transparent 62%, rgba(20,22,30,0.09) 100%);
}

* { box-sizing: border-box; }

/* ============================================================
   THEME TOGGLE — docked in the topbar (switch by Voxybuns, re-tinted)
   ============================================================ */
.topbar-right { display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  pointer-events: auto; cursor: pointer; user-select: none;
}
.theme-toggle .tlbl {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); transition: color .4s ease; min-width: 3.4em; text-align: right;
}
.theme-toggle:hover .tlbl { color: var(--ink-dim); }

.switch {
  --switch_width: 2em;
  --switch_height: 1em;
  --thumb_color: var(--void);
  --track_color: var(--void-2);
  --track_active_color: var(--live);
  --outline_color: var(--ink);
  font-size: 15px;
  position: relative; display: inline-block;
  width: var(--switch_width); height: var(--switch_height);
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  box-sizing: border-box; border: 2px solid var(--outline_color);
  position: absolute; cursor: pointer; inset: 0;
  background-color: var(--track_color);
  transition: .15s; border-radius: var(--switch_height);
}
.slider:before {
  box-sizing: border-box; position: absolute; content: "";
  height: var(--switch_height); width: var(--switch_height);
  border: 2px solid var(--outline_color); border-radius: 100%;
  left: -2px; bottom: -2px; background-color: var(--thumb_color);
  transform: translateY(-0.2em);
  box-shadow: 0 0.2em 0 var(--outline_color);
  transition: .15s;
}
.switch input:checked + .slider { background-color: var(--track_active_color); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 2px var(--track_active_color); }
.switch input:hover + .slider:before { transform: translateY(-0.3em); box-shadow: 0 0.3em 0 var(--outline_color); }
.switch input:checked + .slider:before { transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em); }
.switch input:hover:checked + .slider:before { transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em); box-shadow: 0 0.3em 0 var(--outline_color); }
@media (max-width: 720px) { .theme-toggle .tlbl { display: none; } }

/* tweaks panel under light theme */
html[data-theme="light"] .tf-tweaks { background: rgba(236,238,242,0.94); box-shadow: 0 18px 60px rgba(20,22,30,0.22); }
html[data-theme="light"] .tf-seg button.sel { color: var(--void); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Martian Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* voice = display grotesque */
.disp {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* instrument = mono. tracked, small, uppercase */
.mono {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
}
.hud {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--ink-dim);
}

/* ============================================================
   BACKGROUND FIELD — fixed, behind everything
   ============================================================ */
#field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

/* film grain + chromatic edge — "captured by an instrument" */
#grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainshift 0.6s steps(2) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) { #grain { animation: none; } }

/* faint scanline / vignette so the void reads as observed, not blank */
#instrument-veil {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 58%, rgba(0,0,0,0.42) 100%);
}

/* ============================================================
   FIXED CHROME — the machine docked to the viewport
   ============================================================ */
.chrome { position: fixed; z-index: 50; pointer-events: none; }
.chrome a, .chrome button { pointer-events: auto; }

/* two-corner asymmetric bracket frame (NOT four) */
.bracket { position: fixed; z-index: 50; pointer-events: none; }
.bracket--tl {
  top: 0; left: 0;
  width: clamp(28px, 5vw, 56px); height: clamp(28px, 5vw, 56px);
  border-top: var(--bracket) solid var(--ink-faint);
  border-left: var(--bracket) solid var(--ink-faint);
  margin: 14px;
}
.bracket--br {
  bottom: 0; right: 0;
  width: clamp(28px, 5vw, 56px); height: clamp(28px, 5vw, 56px);
  border-bottom: var(--bracket) solid var(--ink-faint);
  border-right: var(--bracket) solid var(--ink-faint);
  margin: 14px;
}

/* top header */
.topbar {
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--void-rule-2);
  background: linear-gradient(var(--void) 30%, transparent);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: "Martian Mono", monospace;
  font-weight: 700; letter-spacing: 0.06em;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--ink);
  text-decoration: none;
}
.wordmark .ten { transition: color .6s ease; }
.wordmark .exp {
  font-size: 0.62em; vertical-align: super; line-height: 0;
  margin-left: 0.04em; color: var(--live); transition: color .6s ease;
}
.wordmark:hover .ten { color: var(--live); }
.topbar .since { color: var(--ink-faint); margin-left: 12px; }
.topbar .div { width: 1px; height: 12px; background: var(--void-rule); margin: 0 12px; }

/* the Planck clock — the center of gravity */
.clock {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.14em;
}
.clock .seg { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-dim); }
.clock .k { color: var(--ink-faint); }
.clock .v { color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.clock .exp { font-size: 0.7em; vertical-align: super; }
.clock .live-digit { color: var(--live); transition: color .15s linear; }
.clock .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--live); box-shadow: 0 0 6px var(--live); }

/* left margin: measurement ruler + vertical epoch index */
.ruler {
  top: 0; bottom: 0; left: 0;
  width: var(--ruler-w);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
.ruler canvas { width: 100%; height: 100%; opacity: 0.5; }
.epoch-index {
  position: fixed; left: 0; top: 50%; z-index: 51;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: "Martian Mono", monospace;
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 4px;
  pointer-events: none;
  transition: color .4s ease;
}
.epoch-index b { color: var(--live); font-weight: 500; }

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--void);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; cursor: pointer;
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
#loader.gone { opacity: 0; transform: scale(1.16); pointer-events: none; }
#loader-canvas { width: min(56vw, 290px); height: min(56vw, 290px); display: block; }
.loader-readout {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  width: min(82vw, 320px);
  font-family: "Martian Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
}
.ld-mark { font-weight: 700; letter-spacing: 0.34em; font-size: 13px; color: var(--ink); padding-left: 0.34em; }
.ld-bar { width: 100%; height: 1px; background: var(--void-rule); position: relative; }
.ld-bar span { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--live); box-shadow: 0 0 8px var(--live); transition: width .2s linear; }
.ld-line { width: 100%; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.ld-pct { color: var(--live); }
.ld-clk { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { #loader { transition: opacity .5s; } #loader.gone { transform: none; } }

/* footer status — the readout at rest */
.statusbar {
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--void-rule-2);
  background: linear-gradient(transparent, var(--void) 70%);
  gap: 16px;
}
.statusbar .grp { display: inline-flex; align-items: center; gap: 10px; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.bars i { width: 2px; background: var(--ink-faint); display: block; }
.bars i.lit { background: var(--live); box-shadow: 0 0 5px var(--live); }
.pulse { display: inline-flex; gap: 4px; }
.pulse i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.pulse i:nth-child(1) { animation: pp 1.6s ease-in-out infinite; }
.pulse i:nth-child(2) { animation: pp 1.6s ease-in-out .25s infinite; }
.pulse i:nth-child(3) { animation: pp 1.6s ease-in-out .5s infinite; }
@keyframes pp { 0%,100%{opacity:.25} 50%{opacity:1; background:var(--live)} }
@media (prefers-reduced-motion: reduce){ .pulse i{ animation:none } }

/* hide the heaviest chrome detail on small screens */
@media (max-width: 720px) {
  .ruler, .epoch-index { display: none; }
  .topbar .since { display: none; }
  .statusbar .hide-sm { display: none; }
  .clock { gap: 8px; font-size: 10px; }
}

/* ============================================================
   SCROLL CONTENT
   ============================================================ */
main { position: relative; z-index: 10; }

section {
  position: relative;
  min-height: 100vh;
  padding: clamp(72px, 12vh, 132px) var(--gut) clamp(72px, 12vh, 120px);
  padding-left: max(var(--gut), calc(var(--ruler-w) + 8px));
}

/* power4.out master easing */
:root { --e-power4: cubic-bezier(0.16, 1, 0.3, 1); }

/* reveal primitive — inflate outward from origin.
   Hidden start-state only applies when animation is live (html.anim);
   otherwise content rests visible. */
.rise { will-change: opacity, transform, filter; }
html.anim .rise {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 1s var(--e-power4),
    transform 1s var(--e-power4),
    filter 1s var(--e-power4);
}
html.anim .rise.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html.anim .rise { opacity: 1; transform: none; filter: none; transition: none; }
}

/* utility */
.tick-row { display: flex; align-items: center; gap: 10px; }
.hairline { height: 1px; background: var(--void-rule); flex: 1; }
.infinity { color: var(--live); }

/* selection */
::selection { background: var(--live); color: var(--void); }