/* Fonts (self-hosted copies of Google Fonts: Martian Mono, Instrument Sans; latin subset) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(fonts/martian-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */
:root{
  color-scheme:dark;
  --glass:#0d1630;      /* scope glass / page */
  --glass-hi:#14204a;
  --grid:#22325a;
  --phosphor:#ffb347;   /* amber trace */
  --phosphor-dim:rgba(255,179,71,0.55);
  --text:#ece6d6;
  --muted:#9aa3bd;
  --sweep:2.4s;
}

/* Beam position across the screen, animated as a real <percentage> so it can drive the mask. */
@property --x{syntax:"<percentage>";inherits:true;initial-value:-10%}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--glass)}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% 18%,var(--glass-hi),var(--glass) 70%);
  color:var(--text);font:400 18px/1.55 "Instrument Sans",system-ui,sans-serif;
}

.page{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:clamp(24px,6vw,72px) clamp(16px,4vw,40px) 32px;display:flex;flex-direction:column;justify-content:center}

/* Oscilloscope screen */
.scope{
  position:relative;height:clamp(180px,36vh,360px);border-radius:18px;overflow:hidden;
  background:
    linear-gradient(var(--grid),var(--grid)) 50% 0/1px 100% no-repeat,     /* centre axes, brighter */
    linear-gradient(var(--grid),var(--grid)) 0 50%/100% 1px no-repeat,
    linear-gradient(90deg,rgba(34,50,90,0.55) 1px,transparent 1px) 0 0/10% 25%,
    linear-gradient(rgba(34,50,90,0.55) 1px,transparent 1px) 0 0/10% 25%,
    #0a1228;
  box-shadow:inset 0 0 0 1px var(--grid),inset 0 0 80px rgba(0,0,0,0.55),0 30px 80px -40px rgba(255,179,71,0.25);
  --x:-10%;
  animation:sweep var(--sweep) linear infinite;
}
.readout{position:absolute;z-index:2;font:500 12px/1 "Martian Mono",ui-monospace,monospace;font-stretch:87.5%;color:var(--phosphor-dim);letter-spacing:0.02em}
.readout-ch{top:14px;left:16px}
.readout-time{bottom:14px;right:16px}

.trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trace path{fill:none;stroke:var(--phosphor);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.trace-ghost{opacity:0.16}
.trace-live{
  filter:drop-shadow(0 0 3px var(--phosphor)) drop-shadow(0 0 12px rgba(255,179,71,0.6));
  /* Bright head at the beam position, phosphor fading out behind it. */
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--x) - 32%),#000 calc(var(--x) - 0.5%),transparent var(--x));
          mask-image:linear-gradient(90deg,transparent calc(var(--x) - 32%),#000 calc(var(--x) - 0.5%),transparent var(--x));
}
@keyframes sweep{from{--x:-10%}to{--x:130%}}

/* Wordmark: each half thumps when the beam crosses its spike.
   Beam runs -10% → 130% linearly, so the spikes at x=33.2% and 44.6% are hit at 30.9% and 39.0% of the sweep. */
.wordmark{
  margin:clamp(28px,5vw,56px) 0 0;
  font:800 clamp(64px,16.5vw,212px)/0.9 "Martian Mono",ui-monospace,monospace;font-stretch:112.5%;
  letter-spacing:-0.045em;color:var(--text);
}
.beat{display:inline-block;transform-origin:50% 85%;animation:var(--sweep) linear infinite}
.beat-buh{animation-name:thump-buh}
.beat-tum{animation-name:thump-tum}
@keyframes thump-buh{
  0%,30.5%{transform:none;color:var(--text);text-shadow:none}
  32%{transform:translateY(-0.05em) scale(1.045);color:var(--phosphor);text-shadow:0 0 0.18em rgba(255,179,71,0.55)}
  44%,100%{transform:none;color:var(--text);text-shadow:none}
}
@keyframes thump-tum{
  0%,38.6%{transform:none;color:var(--text);text-shadow:none}
  40%{transform:translateY(-0.03em) scale(1.025);color:var(--phosphor);text-shadow:0 0 0.14em rgba(255,179,71,0.45)}
  51%,100%{transform:none;color:var(--text);text-shadow:none}
}

.lede{margin:clamp(16px,2.5vw,28px) 0 0;max-width:38ch;font-size:clamp(18px,2.1vw,22px);color:var(--muted)}

.foot{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 28px;font-size:14px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .scope,.beat{animation:none}
  .trace-live{-webkit-mask-image:none;mask-image:none}
}