/* tanso.day -- retro sci-fi carbon control panel */
:root {
  --panel-black: #0a0a0e;
  --screen-white: #e8e0d0;
  --circuit-green: #4ae848;
  --warning-amber: #e8a830;
  --hud-blue: #4a8ae8;
  --shadow-dark: #141418;
}

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

html, body {
  background: var(--panel-black);
  color: var(--screen-white);
  font-family: "Work Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  overflow-x: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74,232,72,0.05), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(74,138,232,0.04), transparent 50%),
    var(--panel-black);
}

/* ===== HUD frame ===== */
.hud {
  position: fixed;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
  z-index: 999;
  color: var(--screen-white);
  overflow: visible;
}
.hud-stroke, .hud-arc, .hud-tick, .hud-cross path {
  stroke: var(--screen-white);
  stroke-width: 0.18;
  vector-effect: non-scaling-stroke;
  fill: none;
  opacity: 0.88;
}
.hud-arc { stroke-dasharray: 0.6 0.6; opacity: 0.5; }
.hud-tick { opacity: 0.6; }
.hud-stroke {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawHud 1100ms ease forwards;
}
.hud-stroke.tl { animation-delay: 100ms; }
.hud-stroke.tr { animation-delay: 220ms; }
.hud-stroke.bl { animation-delay: 340ms; }
.hud-stroke.br { animation-delay: 460ms; }
@keyframes drawHud { to { stroke-dashoffset: 0; } }

.hud-readout {
  position: fixed;
  top: 22px;
  right: 36px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--screen-white);
  background: rgba(10,10,14,0.6);
  padding: 6px 12px;
  border: 1px solid rgba(232,224,208,0.25);
}
.readout-label { opacity: 0.8; }
.readout-time { color: var(--circuit-green); margin-left: 6px; }

/* LED indicators */
.dot-led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.led-green {
  color: var(--circuit-green);
  box-shadow: 0 0 6px rgba(74,232,72,0.8), 0 0 14px rgba(74,232,72,0.5);
  animation: blinkLed 2.4s ease-in-out infinite;
}
.led-amber {
  color: var(--warning-amber);
  box-shadow: 0 0 6px rgba(232,168,48,0.8), 0 0 14px rgba(232,168,48,0.4);
  animation: blinkLed 3.2s ease-in-out infinite 0.4s;
}
.led-blue {
  color: var(--hud-blue);
  box-shadow: 0 0 6px rgba(74,138,232,0.7), 0 0 14px rgba(74,138,232,0.4);
  animation: blinkLed 2.8s ease-in-out infinite 1.1s;
}
@keyframes blinkLed {
  0%, 60%, 100% { opacity: 1; }
  62%, 64%      { opacity: 0.3; }
  66%           { opacity: 1; }
}

/* ===== Cockpit container ===== */
.cockpit {
  position: relative;
  z-index: 1;
  padding: 10vh 6vw 8vh;
  max-width: 1280px;
  margin: 0 auto;
}

/* ===== Opening ===== */
.opening {
  position: relative;
  min-height: 86vh;
  padding: 6vh 0 8vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.circuit-bg {
  position: absolute;
  inset: -8vh -6vw;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    linear-gradient(0deg, var(--circuit-green) 0 1px, transparent 1px 28px),
    linear-gradient(90deg, var(--circuit-green) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 14px 14px, var(--circuit-green) 1px, transparent 2px),
    radial-gradient(circle at 0 0, var(--circuit-green) 0.5px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px, 28px 28px, 14px 14px;
  animation: scanCircuit 18s linear infinite;
}
@keyframes scanCircuit {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 56px, 56px 0, 0 0, 0 0; }
}

.boot-line {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--circuit-green);
  margin-bottom: 18px;
  min-height: 1.4em;
}
.boot-line .prompt { opacity: 0.7; margin-right: 6px; }
.boot-line .caret {
  display: inline-block;
  margin-left: 1px;
  animation: caretBlink 1s steps(2, end) infinite;
  color: var(--circuit-green);
}
@keyframes caretBlink {
  50% { opacity: 0; }
}

.title {
  font-family: "Zilla Slab", "Zilla Slab Highlight", serif;
  font-weight: 700;
  font-size: clamp(48px, 11vw, 168px);
  line-height: 0.92;
  color: var(--screen-white);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.t-block { display: inline-block; position: relative; }
.t-typed { display: inline-block; }
.t-caret {
  display: inline-block;
  color: var(--circuit-green);
  animation: caretBlink 0.9s steps(2, end) infinite;
  margin-left: 4px;
  font-weight: 500;
}

.subtitle {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--screen-white);
  opacity: 0.78;
  margin-bottom: 32px;
}
.opening-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--screen-white);
}
.opening-meta b {
  color: var(--circuit-green);
  font-weight: 500;
  margin-right: 6px;
}

/* ===== Panel grid ===== */
.panels {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  perspective: 1200px;
  padding: 8vh 0 6vh;
}
.panel {
  grid-column: span 4;
  background: linear-gradient(180deg, var(--shadow-dark), #0e0e14 60%, #08080c);
  border: 1px solid rgba(232,224,208,0.18);
  padding: 22px 22px 26px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: 0 14px 36px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(74,232,72,0.04);
}
.panel.feature { grid-column: span 8; grid-row: span 1; }
.panel.wide { grid-column: span 12; }
@media (max-width: 900px) {
  .panel, .panel.feature, .panel.wide { grid-column: span 12; }
}
.panel::after {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 18px; height: 18px;
  border-top: 1px solid rgba(232,224,208,0.4);
  border-left: 1px solid rgba(232,224,208,0.4);
  pointer-events: none;
}
.panel::before {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 18px; height: 18px;
  border-bottom: 1px solid rgba(232,224,208,0.4);
  border-right: 1px solid rgba(232,224,208,0.4);
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(232,224,208,0.22);
}
.panel-head h2 {
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--screen-white);
  flex: 1;
}
.panel-id {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--circuit-green);
  opacity: 0.8;
}

/* Data list */
.data-list {
  list-style: none;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.data-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(232,224,208,0.14);
}
.data-list .key { color: var(--screen-white); opacity: 0.8; }
.data-list .val { color: var(--screen-white); }
.data-list .val.ok { color: var(--circuit-green); }
.data-list .val.warn { color: var(--warning-amber); }

.panel-bar {
  margin-top: 18px;
  position: relative;
  height: 22px;
  background: rgba(232,224,208,0.06);
  border: 1px solid rgba(232,224,208,0.18);
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--circuit-green), rgba(74,232,72,0.6));
  box-shadow: 0 0 12px rgba(74,232,72,0.5);
}
.bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--panel-black);
  font-weight: 500;
}

/* Daily brief / lede */
.lede {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  margin-bottom: 14px;
  color: var(--screen-white);
}
.feature p { margin-bottom: 12px; max-width: 60ch; }
.feature p b { color: var(--circuit-green); font-family: "Fira Code", monospace; font-weight: 500; }

/* Nav icons */
.nav-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid rgba(232,224,208,0.18);
  text-decoration: none;
  color: var(--screen-white);
  font-family: "Fira Code", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.nav-icon svg {
  width: 30px;
  height: 30px;
  color: var(--screen-white);
  transition: color 220ms ease, transform 220ms ease;
}
.nav-icon:hover {
  color: var(--circuit-green);
  border-color: var(--circuit-green);
  background: rgba(74,232,72,0.06);
}
.nav-icon:hover svg {
  color: var(--circuit-green);
  transform: scale(1.06);
}

/* Telemetry */
.telem { font-family: "Fira Code", monospace; font-size: 12.5px; }
.telem-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(232,224,208,0.14);
}
.telem-key { color: var(--hud-blue); letter-spacing: 0.08em; }
.telem-val { color: var(--screen-white); }

/* Log */
.log {
  list-style: none;
  font-family: "Fira Code", monospace;
  font-size: 12.5px;
  counter-reset: log;
}
.log li {
  display: flex;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(232,224,208,0.14);
  counter-increment: log;
}
.log li::before {
  content: counter(log, decimal-leading-zero);
  color: var(--circuit-green);
  opacity: 0.6;
  flex: 0 0 22px;
}
.log-time { color: var(--warning-amber); flex: 0 0 80px; }
.log-msg { color: var(--screen-white); letter-spacing: 0.04em; }

/* ===== Footer strip ===== */
.footer-strip {
  margin-top: 6vh;
  padding: 28px 0;
  border-top: 1px dashed rgba(232,224,208,0.22);
  text-align: center;
}
.formula {
  font-family: "Fira Code", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--screen-white);
  text-transform: uppercase;
}
.formula.muted { color: var(--screen-white); opacity: 0.55; margin-top: 8px; }