/* ────────────────────────────────────────────────────────────
   robo.ceo — "kissa transmission"
   Hand-rolled, zero external requests, zero build step.
   ──────────────────────────────────────────────────────────── */

:root{
  --void:      #03050a;
  --void-2:    #070c16;
  --cyan:      #4ff0ff;
  --cyan-deep: #0a8ea3;
  --magenta:   #ff3cc7;
  --amber:     #ffb35c;
  --ink:       #cfe9ef;
  --ink-dim:   #6f8f9b;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", monospace;
  --cut: 16px;               /* angled corner size on the containment frame */
  --hud: clamp(9px, 0.72vw, 11.5px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.4;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 12%, #0a1626 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 100%, #10061c 0%, transparent 65%),
    var(--void);
}

.layer{ position:absolute; inset:0; pointer-events:none; will-change:transform; }

/* ── starfield ─────────────────────────────────────────────── */
.stars{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(190,240,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 9%,  rgba(255,140,220,.55), transparent 60%),
    radial-gradient(1px 1px   at 41% 24%,   rgba(190,240,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 7%,  rgba(190,240,255,.75), transparent 60%),
    radial-gradient(1px 1px   at 69% 21%,   rgba(255,180,120,.5),  transparent 60%),
    radial-gradient(1.3px 1.3px at 82% 12%, rgba(190,240,255,.7),  transparent 60%),
    radial-gradient(1px 1px   at 91% 27%,   rgba(190,240,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 6% 34%,  rgba(190,240,255,.5),  transparent 60%),
    radial-gradient(1px 1px   at 35% 38%,   rgba(255,140,220,.4),  transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 36%, rgba(190,240,255,.5),  transparent 60%);
  animation:twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.55} to{opacity:1} }

/* ── volumetric haze behind the feed ───────────────────────── */
.haze{
  background:
    radial-gradient(48% 40% at 50% 46%, rgba(79,240,255,.16), transparent 70%),
    radial-gradient(38% 30% at 30% 62%, rgba(255,60,199,.12), transparent 70%),
    radial-gradient(34% 28% at 72% 38%, rgba(255,179,92,.08), transparent 70%);
  filter:blur(4px);
}

/* ── perspective neon grid floor ───────────────────────────── */
.floor{
  top:auto; height:46%;
  perspective:260px;
  perspective-origin:50% 0%;
  overflow:hidden;
}
.floor-grid{
  position:absolute;
  left:-70%; right:-70%; top:0; bottom:-30%;
  transform:rotateX(74deg);
  transform-origin:50% 0%;
  background-image:
    repeating-linear-gradient(to right,  rgba(79,240,255,.55) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(to bottom, rgba(255,60,199,.42) 0 1px, transparent 1px 58px);
  background-position:0 0, 0 0;
  animation:gridrun 2s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 62%, transparent 100%);
}
@keyframes gridrun{ to{ background-position:0 58px, 0 58px; } }

.horizon{
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(79,240,255,.85) 7%,
             #d8feff 50%, rgba(79,240,255,.85) 93%, transparent 100%);
}
.horizon-bloom{
  position:absolute; left:0; right:0; top:-52px; height:104px;
  background:radial-gradient(52% 100% at 50% 100%, rgba(79,240,255,.32), transparent 72%);
  filter:blur(8px);
}

/* ── centre stage ──────────────────────────────────────────── */
.stage{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:0;
  padding:2vh 4vw;
  will-change:transform;
}

/* wordmark ------------------------------------------------- */
.mark-row{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); width:min(92vw,900px); }
.rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(79,240,255,.55));
  position:relative;
}
.rule::after{
  content:""; position:absolute; right:0; top:-2px;
  width:5px; height:5px; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  transform:rotate(45deg);
}
.mark-row .rule:last-child{ background:linear-gradient(270deg, transparent, rgba(79,240,255,.55)); }
.mark-row .rule:last-child::after{ right:auto; left:0; }

.wordmark{
  margin:0;
  font-size:clamp(2.1rem, 6.4vw, 4.6rem);
  font-weight:700;
  letter-spacing:.10em;
  line-height:1;
  color:#f2ffff;
  text-shadow:
    0 0 4px rgba(210,255,255,.9),
    0 0 16px rgba(79,240,255,.75),
    0 0 46px rgba(79,240,255,.40),
    0 0 96px rgba(255,60,199,.24);
  position:relative;
  white-space:nowrap;
}
/* RGB-split glitch jitter */
.glitch-text::before,
.glitch-text::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
}
.glitch-text::before{
  color:var(--magenta); text-shadow:none;
  animation:split-a 3.7s steps(1,end) infinite;
}
.glitch-text::after{
  color:var(--cyan); text-shadow:none;
  animation:split-b 3.7s steps(1,end) infinite;
}
@keyframes split-a{
  0%,88%,100%{ transform:translate(0); clip-path:inset(100% 0 0 0); opacity:0; }
  89%{ transform:translate(-4px,1px); clip-path:inset(12% 0 58% 0); opacity:.9; }
  91%{ transform:translate(3px,-2px); clip-path:inset(62% 0 14% 0); opacity:.85; }
  93%{ transform:translate(-6px,0);   clip-path:inset(34% 0 40% 0); opacity:.8; }
  95%{ transform:translate(2px,2px);  clip-path:inset(76% 0 6% 0);  opacity:.7; }
  97%{ transform:translate(0);        clip-path:inset(100% 0 0 0);  opacity:0; }
}
@keyframes split-b{
  0%,88%,100%{ transform:translate(0); clip-path:inset(100% 0 0 0); opacity:0; }
  89%{ transform:translate(4px,-1px); clip-path:inset(8% 0 66% 0);  opacity:.9; }
  91%{ transform:translate(-3px,2px); clip-path:inset(54% 0 22% 0); opacity:.85; }
  93%{ transform:translate(6px,0);    clip-path:inset(28% 0 48% 0); opacity:.8; }
  95%{ transform:translate(-2px,-2px);clip-path:inset(70% 0 12% 0); opacity:.7; }
  97%{ transform:translate(0);        clip-path:inset(100% 0 0 0);  opacity:0; }
}

.kicker{
  margin:.6rem 0 clamp(22px,3.4vh,38px);
  font-size:var(--hud);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ── containment field ─────────────────────────────────────── */
.feed{
  position:relative;
  height:min(52vh, 31.5vw);
  aspect-ratio:53/30;
  max-width:92vw;
  filter:drop-shadow(0 0 34px rgba(79,240,255,.22)) drop-shadow(0 18px 60px rgba(0,0,0,.8));
}
.feed::before{                         /* containment halo, slowly breathing */
  content:""; position:absolute; inset:-8% -6%;
  background:
    radial-gradient(60% 60% at 30% 40%, rgba(79,240,255,.24), transparent 70%),
    radial-gradient(60% 60% at 72% 62%, rgba(255,60,199,.20), transparent 70%);
  filter:blur(22px);
  z-index:-1;
  animation:breathe 6s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ opacity:.62; transform:scale(.985); } to{ opacity:1; transform:scale(1.03); } }

.feed-frame{
  position:absolute; inset:0;
  overflow:hidden;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:#08131c;
}
/* animated border circuitry: a light sweeping around the perimeter */
.frame-sweep{
  position:absolute; top:50%; left:50%;
  width:180%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
     transparent 0 8%,
     rgba(79,240,255,.15) 12%,
     var(--cyan) 19%,
     #ffffff 21%,
     var(--cyan) 23%,
     transparent 30% 54%,
     rgba(255,60,199,.15) 58%,
     var(--magenta) 65%,
     #ffffff 67%,
     var(--magenta) 69%,
     transparent 76% 100%);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.feed-inner{
  position:absolute; inset:2px;
  overflow:hidden;
  background:#000;
  clip-path:polygon(calc(var(--cut) - 2px) 0, 100% 0, 100% calc(100% - var(--cut) + 2px),
                    calc(100% - var(--cut) + 2px) 100%, 0 100%, 0 calc(var(--cut) - 2px));
  box-shadow:inset 0 0 0 1px rgba(79,240,255,.35), inset 0 0 60px rgba(0,0,0,.9);
}
#kissa{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:contrast(1.08) saturate(1.22) brightness(1.02);
}

.ov{ position:absolute; inset:0; pointer-events:none; }

/* chromatic aberration — colour fringing at the feed edges */
.aberration{
  background:
    linear-gradient(90deg, rgba(255,60,199,.62) 0, rgba(255,60,199,0) 2.8%,
                    rgba(79,240,255,0) 97.2%, rgba(79,240,255,.62) 100%),
    linear-gradient(0deg,  rgba(79,240,255,.42) 0, rgba(79,240,255,0) 2.4%,
                    rgba(255,60,199,0) 97.6%, rgba(255,60,199,.42) 100%);
  mix-blend-mode:screen;
  z-index:3;
}
/* CRT scanlines */
.scanlines{
  background:repeating-linear-gradient(to bottom,
     rgba(0,0,0,.42) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.62;
  z-index:4;
}
/* rolling refresh band */
.roll{
  background:linear-gradient(to bottom,
     transparent 0%, rgba(180,255,255,.05) 42%, rgba(255,255,255,.11) 50%,
     rgba(180,255,255,.05) 58%, transparent 100%);
  height:15%;
  inset:auto 0 auto 0;
  mix-blend-mode:screen;
  animation:roll 7.5s linear infinite;
  z-index:5;
}
@keyframes roll{ from{ transform:translateY(-120%); } to{ transform:translateY(800%); } }
/* CRT tube vignette + phosphor tint */
.crt-vignette{
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 50%, rgba(0,0,0,.6) 100%),
    linear-gradient(120deg, rgba(79,240,255,.07), transparent 38%, transparent 64%, rgba(255,60,199,.07));
  z-index:6;
}
/* glitch RGB-shift bands (only visible during a glitch burst) */
.band{
  height:8%; inset:auto 0 auto 0; opacity:0;
  -webkit-backdrop-filter:hue-rotate(140deg) saturate(1.7) contrast(1.15);
          backdrop-filter:hue-rotate(140deg) saturate(1.7) contrast(1.15);
  z-index:7;
}
.band-1{ top:18%; }
.band-2{ top:47%; height:4%;
  -webkit-backdrop-filter:hue-rotate(-90deg) invert(.1) saturate(1.6);
          backdrop-filter:hue-rotate(-90deg) invert(.1) saturate(1.6); }
.band-3{ top:71%; height:7%; }
body.glitch .band-1{ animation:bandshift .22s steps(3,end) 1; }
body.glitch .band-2{ animation:bandshift .22s steps(3,end) 1 .04s; }
body.glitch .band-3{ animation:bandshift .22s steps(3,end) 1 .02s; }
@keyframes bandshift{
  0%{ opacity:0; transform:translateX(0); }
  30%{ opacity:1; transform:translateX(-3.5%); }
  65%{ opacity:1; transform:translateX(2.5%); }
  100%{ opacity:0; transform:translateX(0); }
}

/* angled corner brackets ----------------------------------- */
.corner{
  position:absolute;
  width:clamp(20px,2.4vw,34px); height:clamp(20px,2.4vw,34px);
  border:2px solid var(--cyan);
  box-shadow:0 0 12px rgba(79,240,255,.6);
}
.c-tl{ top:-9px; left:-9px;  border-right:0; border-bottom:0; }
.c-tr{ top:-9px; right:-9px; border-left:0;  border-bottom:0; }
.c-bl{ bottom:-9px; left:-9px;  border-right:0; border-top:0; }
.c-br{ bottom:-9px; right:-9px; border-left:0;  border-top:0; }
.c-tr, .c-bl{ border-color:var(--magenta); box-shadow:0 0 12px rgba(255,60,199,.55); }

/* circuit traces running out of the frame ------------------ */
.trace{
  position:absolute; top:50%; height:1px; width:clamp(40px,9vw,180px);
  background:repeating-linear-gradient(90deg,
     rgba(79,240,255,.9) 0 10px, transparent 10px 22px);
  background-size:22px 1px;
  animation:flow 1.1s linear infinite;
  opacity:.75;
}
.trace-l{ right:calc(100% + 16px); }
.trace-r{ left:calc(100% + 16px); background-image:repeating-linear-gradient(90deg,
     rgba(255,60,199,.9) 0 10px, transparent 10px 22px); animation-direction:reverse; }
.trace::after{
  content:""; position:absolute; top:-3px; width:7px; height:7px;
  transform:rotate(45deg); background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}
.trace-l::after{ right:-3px; }
.trace-r::after{ left:-3px; background:var(--magenta); box-shadow:0 0 10px var(--magenta); }
@keyframes flow{ to{ background-position:22px 0; } }

/* ruler ticks hugging the frame ---------------------------- */
.ticks{
  position:absolute; left:0; right:0; height:6px;
  background:repeating-linear-gradient(90deg,
     rgba(79,240,255,.55) 0 1px, transparent 1px 14px);
  opacity:.7;
}
.ticks-t{ bottom:calc(100% + 11px); }
.ticks-b{ top:calc(100% + 11px);
  background:repeating-linear-gradient(90deg,
     rgba(255,60,199,.45) 0 1px, transparent 1px 14px); }

/* broadcast chrome, laid over the feed itself -------------- */
.chrome{
  display:flex; align-items:center; justify-content:space-between;
  height:2.6em; z-index:8;
  font-size:var(--hud); letter-spacing:.24em;
}
.chrome-t{
  inset:0 0 auto 0;
  padding:0 12px 0 calc(var(--cut) + 8px);
  background:linear-gradient(to bottom,
    rgba(2,9,15,.9) 0%, rgba(2,9,15,.74) 62%, rgba(2,9,15,0) 100%);
}
/* the lower third runs deep on purpose: it doubles as the scrim that swallows
   the burned-in caption noise in the last seconds of the source footage */
.chrome-b{
  inset:auto 0 0 0;
  height:15%; min-height:2.6em;
  align-items:flex-end;
  padding:0 calc(var(--cut) + 8px) .85em 12px;
  background:linear-gradient(to top,
    rgba(2,9,15,.96) 0%, rgba(2,9,15,.92) 42%, rgba(2,9,15,.5) 76%, rgba(2,9,15,0) 100%);
  color:#8fa8b2;
}
.chrome span{ text-shadow:0 1px 4px #000; }
.feed-tag{ color:var(--cyan); text-shadow:0 0 9px rgba(79,240,255,.7), 0 1px 4px #000; }
#tc{ color:var(--cyan); text-shadow:0 0 9px rgba(79,240,255,.55), 0 1px 4px #000; }
.feed-rec{
  color:#ff62d3; text-shadow:0 0 10px rgba(255,60,199,.85), 0 1px 4px #000;
  display:flex; align-items:center; gap:.55em;
}
.feed-rec i{
  width:7px; height:7px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 10px var(--magenta);
  animation:rec 1.4s steps(1,end) infinite;
}
@keyframes rec{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

/* audio toggle — hardware switch riding in the chrome strip -- */
.chrome-controls{ display:flex; align-items:center; gap:.9em; }

.audio-toggle{
  appearance:none; -webkit-appearance:none;
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.5em;
  min-height:24px;
  margin:0; padding:.32em .65em;
  border:1px solid rgba(79,240,255,.4);
  background:rgba(3,10,16,.6);
  color:var(--cyan);
  font:inherit; font-size:var(--hud); letter-spacing:.24em;
  text-transform:uppercase;
  clip-path:polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                    calc(100% - 5px) 100%, 0 100%, 0 5px);
  cursor:pointer;
  text-shadow:0 0 9px rgba(79,240,255,.55), 0 1px 4px #000;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.audio-toggle:hover{ border-color:rgba(79,240,255,.75); background:rgba(3,10,16,.85); }
/* the feed frame clips its contents, so the focus ring is drawn inset
   (an outline would be cut off by the containment field's overflow:hidden) */
.audio-toggle:focus{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--cyan);
  background:rgba(79,240,255,.16);
}
.audio-toggle:focus:not(:focus-visible){ box-shadow:none; background:rgba(3,10,16,.6); }
.audio-toggle[data-state="live"]{
  color:var(--amber);
  border-color:rgba(255,179,92,.5);
  text-shadow:0 0 10px rgba(255,179,92,.75), 0 1px 4px #000;
}
.audio-toggle[data-state="live"]:hover{ border-color:rgba(255,179,92,.8); background:rgba(3,10,16,.85); }
.audio-toggle[data-state="live"]:focus{
  box-shadow:inset 0 0 0 2px var(--amber);
  background:rgba(255,179,92,.16);
}
.audio-toggle[data-state="live"]:focus:not(:focus-visible){ box-shadow:none; background:rgba(3,10,16,.6); }

.audio-icon{ width:1.05em; height:1.05em; flex:0 0 auto; overflow:visible; }
.spk-body{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.spk-wave{
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  opacity:0; transition:opacity .18s ease;
}
.spk-mute{
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
  opacity:1; transition:opacity .18s ease;
}
.audio-toggle[data-state="live"] .spk-wave{ opacity:1; }
.audio-toggle[data-state="live"] .spk-mute{ opacity:0; }

/* tagline --------------------------------------------------- */
.tagline{
  margin:clamp(38px,5.4vh,66px) 0 0;
  font-size:clamp(.78rem, 1.55vw, 1.12rem);
  letter-spacing:.30em;
  text-transform:lowercase;
  color:var(--ink);
  text-shadow:0 0 18px rgba(79,240,255,.35);
}
.tagline em{
  font-style:normal; color:var(--amber);
  text-shadow:0 0 18px rgba(255,179,92,.55);
}

/* ── HUD fragments ─────────────────────────────────────────── */
.hud{
  position:absolute;
  font-size:var(--hud);
  letter-spacing:.16em;
  color:var(--ink-dim);
  pointer-events:none;
  will-change:transform;
  max-width:26vw;
}
.hud-tl{ top:clamp(14px,2.6vh,30px); left:clamp(14px,2.4vw,34px); }
.hud-tr{ top:clamp(14px,2.6vh,30px); right:clamp(14px,2.4vw,34px); text-align:right; }
.hud-bl{ bottom:clamp(14px,2.6vh,30px); left:clamp(14px,2.4vw,34px); }
.hud-br{ bottom:clamp(14px,2.6vh,30px); right:clamp(14px,2.4vw,34px); text-align:right; }

.hud-title{
  color:var(--cyan); letter-spacing:.3em; margin-bottom:.7em;
  text-shadow:0 0 10px rgba(79,240,255,.4);
  border-bottom:1px solid rgba(79,240,255,.22);
  padding-bottom:.45em;
}
.kv{ display:flex; gap:1.2em; justify-content:space-between; }
.kv.tr{ justify-content:flex-end; }
.kv span{ color:#4c6570; }
.kv b{ font-weight:500; color:var(--ink); }
.kv b.ok{ color:var(--amber); }

/* reticle */
.reticle{
  width:clamp(56px,7vw,96px); height:auto; display:block; margin-left:auto;
  margin-bottom:.7em; overflow:visible;
}
.r-ring{ fill:none; stroke:rgba(79,240,255,.45); stroke-width:1.5; }
.r-spin{ stroke-dasharray:34 18; transform-origin:60px 60px; animation:spin 9s linear infinite; }
.r-spin-rev{ stroke-dasharray:14 9; transform-origin:60px 60px; animation:spin 6s linear infinite reverse; }
.r-arc{ fill:none; stroke:var(--magenta); stroke-width:2.5; stroke-linecap:round; }
.r-tick{ stroke:rgba(79,240,255,.8); stroke-width:2; }
.r-dot{ fill:var(--amber); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* signal bars */
.bars{ display:flex; gap:4px; justify-content:flex-end; height:22px; align-items:flex-end; margin-top:.9em; }
.bars i{ width:5px; background:var(--cyan); box-shadow:0 0 8px rgba(79,240,255,.6);
  transition:height .28s ease; }

/* boot log */
.boot{
  margin:0; font-family:inherit; font-size:var(--hud);
  letter-spacing:.1em; line-height:1.85; color:var(--ink);
  white-space:pre; text-shadow:0 0 10px rgba(79,240,255,.22);
}
.boot .ok{ color:var(--amber); }
.boot .dim{ color:#4c6570; }
.caret{
  display:inline-block; width:.62em; height:1.05em; vertical-align:-.16em;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* hex dump */
.hex{
  margin:0 0 .8em; font-family:inherit; font-size:var(--hud);
  letter-spacing:.08em; line-height:1.75; color:#5f8490; white-space:pre;
}
.hex b{ color:var(--cyan); font-weight:500; }

/* ── full-screen effects ───────────────────────────────────── */
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:40;
  background:radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.72) 100%);
}
.scanfield{
  position:absolute; inset:0; pointer-events:none; z-index:41;
  background:repeating-linear-gradient(to bottom,
     rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
  opacity:.5;
}
.glitch-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:60; opacity:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.10) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, rgba(255,60,199,.20), transparent 30%, transparent 70%, rgba(79,240,255,.20));
  mix-blend-mode:screen;
}
body.glitch .glitch-overlay{ animation:flick .2s steps(2,end) 1; }
@keyframes flick{
  0%  { opacity:0;  transform:translate(0); }
  18% { opacity:.95; transform:translate(-7px,3px) skewX(-1.4deg); }
  42% { opacity:.25; transform:translate(6px,-4px) skewX(1.2deg); }
  66% { opacity:.8;  transform:translate(-3px,1px); }
  100%{ opacity:0;  transform:translate(0); }
}
body.glitch .stage{ animation:shake .2s steps(2,end) 1; }
@keyframes shake{
  0%,100%{ filter:none; }
  25%{ filter:hue-rotate(24deg) saturate(1.6); }
  50%{ filter:hue-rotate(-30deg) contrast(1.25); }
}

/* ── mobile / narrow ───────────────────────────────────────── */
@media (max-width:900px){
  .hud-br{ display:none; }
  .hud{ max-width:38vw; }
}

@media (max-width:760px){
  :root{ --hud:9.5px; --cut:12px; }
  body{ overflow-x:hidden; overflow-y:auto; }

  /* the scene itself becomes the single centred column */
  .scene{
    position:relative;
    min-height:100dvh;
    overflow-x:clip; overflow-y:visible;   /* never clip the stack vertically */
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:70px 4vw 26px;
  }
  .stage{
    position:static; inset:auto;
    width:100%; padding:0;
  }
  .mark-row{ width:100%; }
  .wordmark{ font-size:clamp(1.9rem,11.8vw,3.2rem); letter-spacing:.07em; }
  .kicker{ letter-spacing:.2em; font-size:8.5px; margin-bottom:clamp(12px,2vh,20px); }

  .feed{ height:auto; width:100%; max-width:100%; aspect-ratio:53/30; }
  .trace{ display:none; }
  .ticks{ height:5px; }
  .chrome{ height:2.6em; letter-spacing:.16em; }
  .chrome-controls{ gap:.5em; }
  .audio-toggle{ gap:.4em; padding:.28em .5em; letter-spacing:.12em; }

  .tagline{
    margin-top:clamp(26px,3.6vh,40px);
    font-size:.72rem; letter-spacing:.2em; text-align:center; line-height:1.9;
  }
  .tagline em{ display:block; }

  /* boot log flows directly under the stage, still terminal-left */
  .hud-bl{
    position:static; inset:auto;
    width:100%; max-width:100%;
    margin-top:clamp(22px,3.4vh,38px);
  }
  .hud-tl{ top:16px; left:5vw; max-width:54vw; }
  .hud-tr{ top:14px; right:5vw; max-width:36vw; }
  .hud-tr .hud-title, .hud-tr .bars, .hud-tr .kv{ display:none; }
  .reticle{ width:46px; margin-bottom:0; }
  .floor{ height:34%; }
}

@media (max-width:400px){
  .hud-tl .kv:nth-child(4){ display:none; }
  .scene{ padding-top:66px; }
}

/* short mobile viewports: trim the boot log rather than overflow */
@media (max-width:760px) and (max-height:700px){
  .hud-bl .boot{ line-height:1.6; }
  .kicker{ display:none; }
}

/* very short landscape viewports: keep the scene from clipping */
@media (min-width:761px) and (max-height:620px){
  .feed{ height:min(46vh,31.5vw); }
  .kicker{ margin-bottom:10px; }
  .tagline{ margin-top:26px; }
}

/* ── calm variant ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .stars{ opacity:.85; }
  .floor-grid{ background-position:0 0, 0 0; }
  .glitch-text::before, .glitch-text::after{ content:none; }
  .roll{ display:none; }
  .band{ display:none; }
  .frame-sweep{
    background:conic-gradient(from 210deg,
      transparent 0 10%, var(--cyan) 22%, #fff 25%, var(--cyan) 28%,
      transparent 40% 60%, var(--magenta) 72%, #fff 75%, var(--magenta) 78%, transparent 90% 100%);
  }
  .caret{ opacity:1; }
  .feed-rec i{ opacity:1; }
  .trace{ opacity:.6; }
}