/* ═══ Portfolio — monochrome terminal ═══
   Reference: henryheffernan.com (2022 portfolio).
   Principle: restrained retro. Plain monospace (OS default), pure white
   on pure black, no amber, no sepia, no decorative webfont. The only
   expressive move is a sub-pixel jitter borrowed from the reference.
   3D atom text still renders in Share Tech Mono (baked into SVG in
   timbral-bg.js) — the CSS side defers to the system monospace so the
   document chrome reads as a BIOS/readout, not a typeset page. */

:root {
  /* Pure black / pure white. No warmth. Works with the cool atom field. */
  --bg: #000;
  --bg-panel: rgba(0, 0, 0, 0.82);

  --ink:        #fff;         /* primary: pure white, as in reference */
  --ink-quiet:  #c9c9c9;      /* secondary: very soft grey — labels, nav links at rest */
  --ink-faint:  #7a7a7a;      /* tertiary: still readable, for eyebrows and hints */
  --ink-ghost:  #2a2a2a;      /* hairline borders */

  /* No chromatic accent. Inversion IS the accent (hover = white fill, black text). */
  --sel-bg:     #fff;
  --sel-fg:     #000;

  /* Plain monospace — OS renders Menlo / Consolas / Courier New.
     No Google Fonts import, no @font-face at the CSS level.
     The 3D atom planes load Share Tech Mono separately. */
  --font:         ui-monospace, Menlo, Consolas, 'Courier New', monospace;
  --font-display: ui-monospace, Menlo, Consolas, 'Courier New', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  /* No antialias smoothing — monospace reads crisper left on subpixel */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

::selection {
  background: var(--sel-bg);
  color: var(--sel-fg);
}


/* ═══ CRT OVERLAY — scanlines kept, but dialed way down ═══
   The reference has no CSS scanline overlay; its "CRT" is done in the
   3D monitor material. We keep the overlay because this site is the
   reverse (chrome sits on top of the field) and the 1-2% scanline
   darkening subtly unifies the 2D overlay with the 3D scene below. */

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,0.025) 2px,
    rgba(0,0,0,0.025) 3px
  );
}

.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.18) 92%, rgba(0,0,0,0.42) 100%);
}


/* ═══ UI SOURCE — rendered through the composite shader, not directly
       The real DOM elements stay in place so they receive pointer events
       (clicks on nav links, hover states, focus, drag/scroll, etc.), but
       they are visually invisible — their pixels come from a canvas
       texture that the composite shader samples and barrel-distorts
       alongside the 3D scene. See _updateUITexture() in timbral-bg.js.
       Every CSS animation still runs on the live DOM; each rasterization
       is a fresh snapshot, so transitions and the blinking cursor
       continue to animate through the shader. */

.overlay,
#boot-screen,
#midi-dropzone {
  opacity: 0;
}


/* ═══ Sub-pixel jitter — direct lift from henryheffernan.com ═══
   Not applied globally. Reserved for the boot eyebrow and a couple of
   very small labels where the BIOS-terminal character should be
   legible. At these amplitudes (~0.25px) it reads as monitor drift,
   not motion. */

@keyframes jittery {
  10%  { transform: translate(-0.1px,  -0.15px); }
  20%  { transform: translate( 0.15px,  0.10px); }
  30%  { transform: translate(-0.2px,  -0.25px); }
  40%  { transform: translate( 0.05px,  0.10px); }
  50%  { transform: translate(-0.025px, -0.05px); }
  60%  { transform: translate( 0,       0.075px); }
  70%  { transform: translate(-0.075px, -0.10px); }
  80%  { transform: translate( 0.075px,  0.125px); }
  90%  { transform: translate(-0.125px, -0.075px); }
  100% { transform: translate( 0.075px,  0.025px); }
}

.jitter {
  animation: jittery 0.3s ease-in-out infinite;
}


/* ═══ 3D CANVAS ═══ */

#timbral-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#timbral-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* ═══ OVERLAY (nav + hints) ═══ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.overlay > * {
  pointer-events: auto;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* No gradient veil — reference keeps it clean. */
}

.nav-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: lowercase;
  transition: opacity 0.2s ease;
}

.nav-name:hover {
  opacity: 0.7;
}

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
}

.nav-links a {
  color: var(--ink-quiet);
  text-decoration: none;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  cursor: pointer;
  padding: 2px 0;
}

.nav-links a:hover {
  color: var(--ink);
}


/* ═══ CONTACT PANEL ═══ */

.contact-panel {
  position: absolute;
  bottom: 60px;
  right: 32px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.contact-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-inner {
  padding: 20px 24px;
  border: 2px solid var(--ink);
  background: var(--bg-panel);
}

.section-label {
  font-family: var(--font);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-links a {
  color: var(--ink-quiet);
  text-decoration: none;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 2px 0;
  transition: color 0.2s;
  width: fit-content;
}

.contact-links a:hover {
  color: var(--ink);
}


/* ═══ HINT ═══ */

.hero-hint {
  position: absolute;
  bottom: 24px;
  left: 24px;
  pointer-events: none;
  transition: opacity 1.6s ease;
  z-index: 15;
}

.hero-hint.fade { opacity: 0; }

.hint-text {
  font-family: var(--font);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* ═══ HUD PANEL — BIOS-style box ═══
   Modeled on the reference's .bios-start-button: black fill, solid
   white border, inverts on hover. No backdrop blur, no gradients,
   no transparency-as-fashion. */

.hud {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 11px;
  color: var(--ink);
  user-select: none;
  min-width: 220px;
  background: var(--bg);
  border: 2px solid var(--ink);
}

.hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink-ghost);
  cursor: pointer;
}

.hud-title {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--ink-quiet);
  text-transform: uppercase;
}

.hud-chevron {
  font-size: 10px;
  color: var(--ink-quiet);
  transition: transform 0.2s;
}

.hud.collapsed .hud-body { display: none; }
.hud.collapsed .hud-chevron { transform: rotate(-90deg); }

.hud-body {
  display: flex;
  flex-direction: column;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ink-ghost);
  gap: 10px;
}

.hud-row:last-child { border-bottom: none; }

.hud-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-btn {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-transform: uppercase;
}

.hud-btn:hover {
  background: var(--ink);
  color: var(--bg);
}

.hud-btn.on {
  background: var(--ink);
  color: var(--bg);
}

.hud-value {
  font-family: var(--font);
  font-size: 11px;
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 130px;
  text-align: right;
}


/* ═══ LEGACY BITS (kept as hidden for backward compat) ═══ */

.sound-indicator { display: none; }


/* ═══ MIDI DROPZONE ═══ */

.midi-dropzone {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.midi-dropzone.open {
  opacity: 1;
  pointer-events: auto;
}

.midi-dropzone-inner {
  padding: 56px 76px;
  border: 2px dashed var(--ink);
  text-align: center;
  cursor: pointer;
  background: var(--bg);
  transition: background 0.15s;
}

.midi-dropzone.drag-over .midi-dropzone-inner {
  background: var(--ink);
  color: var(--bg);
}

.midi-dropzone.drag-over .midi-dz-label,
.midi-dropzone.drag-over .midi-dz-sub {
  color: var(--bg);
}

.midi-dz-label {
  font-family: var(--font);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.22em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.midi-dz-sub {
  font-family: var(--font);
  font-size: 10px;
  color: var(--ink-quiet);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}


/* ═══ MOBILE ═══ */

@media (max-width: 640px) {
  body { font-size: 11px; }

  nav {
    padding: 12px 16px;
  }

  .nav-name {
    font-size: 12px;
  }

  .nav-links {
    gap: 12px;
  }

  .nav-links a {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .hero-hint {
    bottom: 16px;
  }

  .hud {
    bottom: 12px;
    right: 12px;
    min-width: 180px;
  }
}


/* ═══ BOOT SCREEN — BIOS cold-start ═══
   No serif display font. No italics. Everything is monospace at a
   single size scale, with the title slightly larger. The "click to
   enter" mirrors the reference's .bios-start-button exactly: black
   fill, 2-3px white border, inverts on hover. */

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.boot-screen.dismissed {
  opacity: 0;
  pointer-events: none;
}

.boot-screen .boot-inner {
  max-width: 620px;
  padding: 32px;
  text-align: left;
  font-family: var(--font);
}

.boot-screen .boot-eyebrow {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.boot-screen .boot-title {
  font-family: var(--font);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 400;
  font-style: normal;
  text-transform: lowercase;
}

.boot-screen .boot-sub {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-quiet);
  margin-bottom: 30px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.boot-screen .boot-body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-quiet);
  max-width: 58ch;
  margin-bottom: 28px;
}

.boot-screen .boot-controls {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.boot-screen .boot-controls li {
  font-family: var(--font);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.boot-screen .boot-controls .k {
  display: inline-block;
  min-width: 5em;
  color: var(--ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* "Click to enter" styled as the reference's bios-start-button. */
.boot-screen .boot-enter {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 10px 18px;
  text-transform: uppercase;
  transition: background 0.1s, color 0.1s;
}

.boot-screen:hover .boot-enter {
  background: var(--ink);
  color: var(--bg);
}

/* Blinking cursor — direct port of reference's .blinking-cursor. */
.blinking-cursor {
  display: inline-block;
  background-color: var(--ink);
  width: 0.55em;
  height: 0.9em;
  margin-left: 0.3em;
  vertical-align: -0.08em;
  animation: blink 0.65s step-end infinite;
}

@keyframes blink {
  from, to { background-color: transparent; }
  50%      { background-color: var(--ink); }
}

@media (max-width: 600px) {
  .boot-screen .boot-inner { padding: 20px; }
  .boot-screen .boot-title { font-size: 22px; }
  .boot-screen .boot-body  { font-size: 11px; }
  .boot-screen .boot-enter { font-size: 10px; padding: 8px 14px; }
}