/* ─────────────────────────────────────────────────────────────
   Neural Charter Labs
   Everything is monospace. Wide-tracked uppercase reads as
   fashion or finance; tight lowercase with syntax colour reads
   as a terminal — which is what this is.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#06080A;
  --ink:#E6EAEC;
  --muted:#77808A;
  --dim:#3D454E;

  --accent:#64E4A1;          /* phosphor — values, cursor, live state */
  --accent-2:#6BA8E8;        /* cool — identifiers */

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(20px,3.6vw,52px);
  --meta:clamp(10px,.72vw,11.5px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100svh;
  background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── Ambient stack (z 0 → 3) ────────────────────────────────── */
.bloom{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 52% at 78% 18%, rgba(100,228,161,.075) 0%, transparent 62%),
    radial-gradient(70% 60% at 12% 88%, rgba(107,168,232,.06) 0%, transparent 66%);
}

.bands{position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none}
.bands__plane{position:absolute; inset:-35% -25%; transform:rotate(-3.5deg)}
.band{
  position:absolute; left:0;
  display:flex; width:max-content;
  font-weight:400; letter-spacing:.01em; white-space:nowrap;
  animation:drift linear infinite;
  will-change:transform;
}
.band--rev{animation-direction:reverse}
.band__track{display:flex; width:max-content; padding-right:3em}
.band b{font-weight:400}

/* Syntax colouring — the field is log output, so it is coloured like it. */
.t-id   {color:rgba(107,168,232,.78)}
.t-key  {color:rgba(230,234,236,.50)}
.t-num  {color:rgba(100,228,161,.74)}
.t-op   {color:rgba(230,234,236,.24)}
.t-tag  {color:rgba(230,234,236,.42)}
.t-state{color:rgba(100,228,161,.55)}

@keyframes drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

.scan{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.6;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px,
      transparent 1px, transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.veil{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,
    var(--bg) 0, rgba(6,8,10,.97) 6%, rgba(6,8,10,0) 19%,
    rgba(6,8,10,0) 81%, rgba(6,8,10,.97) 94%, var(--bg) 100%);
}

/* ── Content ────────────────────────────────────────────────── */
.mark{
  position:fixed; z-index:5; top:var(--gutter); left:var(--gutter);
  display:flex; align-items:center; gap:.85em;
  font-size:clamp(10.5px,.85vw,12px); font-weight:500;
  letter-spacing:.14em; color:var(--ink);
  opacity:0; animation:fade 1.4s ease .2s forwards;
}
.mark__sq{
  width:7px; height:7px; background:var(--accent);
  box-shadow:0 0 10px rgba(100,228,161,.7);
}

.core{
  position:relative; z-index:5;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--gutter) * 3) var(--gutter);
}
/* Tight scrim behind the line only, so the field runs everywhere else. */
.core::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1240px,132vw); height:min(520px,58vh);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(6,8,10,.95) 0 34%, rgba(6,8,10,.68) 56%, rgba(6,8,10,0) 80%);
}

/* Left-aligned inside a centred block: a terminal line floating in
   the middle of the screen, rather than a centred masthead. */
.lede{
  position:relative;
  margin:0; max-width:26ch; text-align:left;
  font-size:clamp(1.45rem,3.6vw,2.85rem);
  font-weight:400; line-height:1.34; letter-spacing:-.012em;
  text-indent:-1.15em; padding-left:1.15em;
  text-shadow:0 0 70px rgba(6,8,10,.95), 0 0 30px rgba(6,8,10,.9);
}
.prompt{color:var(--accent); margin-right:.45em; font-weight:500}
.scramble{display:inline}
.scramble .gl{color:var(--accent-2); font-style:normal; opacity:.8}

.caret{
  display:inline-block; width:.52em; height:1.02em;
  margin-left:.16em; vertical-align:-.16em;
  background:var(--accent); opacity:.85;
  box-shadow:0 0 16px rgba(100,228,161,.55);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:.85} 50%,100%{opacity:0}}

.mail{
  position:fixed; z-index:5; bottom:var(--gutter); right:var(--gutter);
  font-size:var(--meta); letter-spacing:.14em;
  color:var(--dim); text-decoration:none; padding-bottom:.4em;
  opacity:0; animation:fade 1.4s ease 1.9s forwards;
  transition:color .4s ease;
}
.mail::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.mail:hover,.mail:focus-visible{color:var(--ink)}
.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1)}
.mail:focus-visible{outline:1px solid var(--accent); outline-offset:8px}

@keyframes fade{to{opacity:1}}

@media (max-width:640px){
  .lede{max-width:20ch; line-height:1.4}
  .core::before{width:150vw; height:52vh}
}

/* Reduced motion: stop anything that blinks. The band drift is slowed
   instead of frozen, and its duration is scaled in script.js so it stays
   tied to the real speed rather than pinned to a constant. */
@media (prefers-reduced-motion:reduce){
  .caret{animation:none; opacity:.6}
  .mail::after{transition:none}
}