Ghost Terminal

"use client";

import {
  useEffect,
  useRef,
  useState,
  type CSSProperties,
} from "react";
import { cn } from "@/lib/utils";

export type GhostTerminalView = "index" | "signals" | "notes" | "about";

export type GhostTerminalProps = {
  className?: string;
  glitch?: boolean;
  initialView?: GhostTerminalView;
  inspectOnHover?: boolean;
  onViewChange?: (view: GhostTerminalView) => void;
  style?: CSSProperties;
};

const views: Array<{ id: GhostTerminalView; label: string }> = [
  { id: "index", label: "INDEX" },
  { id: "signals", label: "SIGNALS" },
  { id: "notes", label: "NOTES" },
  { id: "about", label: "ABOUT" },
];

const viewCopy: Record<
  GhostTerminalView,
  { eyebrow: string; title: string; body: string; code: string }
> = {
  index: {
    eyebrow: "FIELD RECORD / 001",
    title: "A quiet machine is listening.",
    body: "Fragments recovered from the space between stations, arranged for a small phosphor screen.",
    code: "RX-91A",
  },
  signals: {
    eyebrow: "LIVE BAND / 014",
    title: "The carrier drifts after midnight.",
    body: "Three weak transmissions remain. Their edges move, but the message keeps its shape.",
    code: "162.55",
  },
  notes: {
    eyebrow: "OPERATOR NOTE / 028",
    title: "Leave a little noise in the image.",
    body: "Perfect reception forgets the room. A bent line remembers the glass, the dust, and the weather.",
    code: "MEM-04",
  },
  about: {
    eyebrow: "SYSTEM FILE / 090",
    title: "Ghost Terminal, revision one.",
    body: "An original interactive CRT study built from layered CSS, restrained motion, and monochrome light.",
    code: "SYS-01",
  },
};

const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";

export function GhostTerminal({
  className,
  glitch = true,
  initialView = "index",
  inspectOnHover = true,
  onViewChange,
  style,
}: GhostTerminalProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const [activeView, setActiveView] = useState<GhostTerminalView>(initialView);
  const [menuOpen, setMenuOpen] = useState(false);
  const [inspecting, setInspecting] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  const [isGlitching, setIsGlitching] = useState(false);
  const [glitchLine, setGlitchLine] = useState(42);

  useEffect(() => {
    const root = rootRef.current;
    if (!root || typeof IntersectionObserver === "undefined") return;

    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { rootMargin: "120px" },
    );
    observer.observe(root);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!glitch || !isVisible) return;

    const reducedMotion = window.matchMedia(REDUCED_MOTION_QUERY);
    if (reducedMotion.matches) return;

    let nextBurst: ReturnType<typeof setTimeout> | undefined;
    let endBurst: ReturnType<typeof setTimeout> | undefined;
    let echoBurst: ReturnType<typeof setTimeout> | undefined;

    const schedule = () => {
      const delay = 2800 + Math.random() * 3900;
      nextBurst = setTimeout(() => {
        if (document.visibilityState !== "visible") {
          schedule();
          return;
        }

        setGlitchLine(18 + Math.round(Math.random() * 63));
        setIsGlitching(true);
        endBurst = setTimeout(() => setIsGlitching(false), 92);
        echoBurst = setTimeout(() => {
          setGlitchLine(24 + Math.round(Math.random() * 52));
          setIsGlitching(true);
          endBurst = setTimeout(() => setIsGlitching(false), 58);
        }, 154);
        schedule();
      }, delay);
    };

    schedule();
    return () => {
      clearTimeout(nextBurst);
      clearTimeout(endBurst);
      clearTimeout(echoBurst);
      setIsGlitching(false);
    };
  }, [glitch, isVisible]);

  function selectView(view: GhostTerminalView) {
    setActiveView(view);
    setMenuOpen(false);
    onViewChange?.(view);
  }

  function beginInspection() {
    if (
      inspectOnHover &&
      window.matchMedia(FINE_POINTER_QUERY).matches
    ) {
      setInspecting(true);
    }
  }

  const copy = viewCopy[activeView];
  const rootStyle = {
    ...style,
    "--glitch-line": `${glitchLine}%`,
  } as CSSProperties;

  return (
    <div
      ref={rootRef}
      className={cn("ghost-stage", inspecting && "is-inspecting", className)}
      style={rootStyle}
      onPointerEnter={beginInspection}
      onPointerLeave={() => setInspecting(false)}
      onFocusCapture={() => {
        if (inspectOnHover) setInspecting(true);
      }}
      onBlurCapture={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget)) {
          setInspecting(false);
          setMenuOpen(false);
        }
      }}
    >
      <div className="ambient-light" aria-hidden="true" />
      <div className="machine-wrap">
        <div className="floor-shadow" aria-hidden="true" />
        <div className="rear-shell" aria-hidden="true" />
        <div className="side-shell" aria-hidden="true" />

        <div className="machine-front">
          <div className="case-highlight" aria-hidden="true" />
          <div className="screen-well">
            <div className="bevel bevel-top" aria-hidden="true" />
            <div className="bevel bevel-right" aria-hidden="true" />
            <div className="bevel bevel-bottom" aria-hidden="true" />
            <div className="bevel bevel-left" aria-hidden="true" />

            <section
              className={cn("crt-glass", isGlitching && "is-glitching")}
              aria-label="Interactive Ghost Terminal screen"
            >
              <div className="crt-picture">
                <div className="system-strip">
                  <span>GHOST/OS</span>
                  <span>CH 03</span>
                  <span>12:41 AM</span>
                </div>

                <header className="terminal-header">
                  <div className="terminal-mark" aria-hidden="true">
                    <i />
                    <i />
                    <i />
                  </div>
                  <div>
                    <strong>GHOST TERMINAL</strong>
                    <span>ARCHIVE OF SMALL TRANSMISSIONS</span>
                  </div>
                </header>

                <nav className="terminal-nav" aria-label="Terminal sections">
                  {views.map((view) => (
                    <button
                      key={view.id}
                      type="button"
                      className={activeView === view.id ? "active" : undefined}
                      aria-pressed={activeView === view.id}
                      onClick={() => selectView(view.id)}
                    >
                      {view.label}
                    </button>
                  ))}
                  <div className="files-menu">
                    <button
                      type="button"
                      aria-expanded={menuOpen}
                      onClick={() => setMenuOpen((open) => !open)}
                    >
                      FILES⌄
                    </button>
                    {menuOpen && (
                      <div className="menu-popover">
                        <button type="button" onClick={() => selectView("signals")}>OPEN SIGNAL LOG</button>
                        <button type="button" onClick={() => selectView("notes")}>READ OPERATOR NOTE</button>
                        <button type="button" onClick={() => selectView("about")}>SYSTEM INFO</button>
                      </div>
                    )}
                  </div>
                </nav>

                <div className="terminal-content" aria-live="polite">
                  <div className="signal-figure" aria-hidden="true">
                    <div className="signal-moon" />
                    <div className="signal-horizon" />
                    <div className="signal-pulse" />
                    <span>{copy.code}</span>
                  </div>
                  <article>
                    <span className="eyebrow">{copy.eyebrow}</span>
                    <h2>{copy.title}</h2>
                    <p>{copy.body}</p>
                    <div className="meter" aria-hidden="true"><i /><i /><i /><i /><i /><i /></div>
                  </article>
                </div>

                <footer className="terminal-footer">
                  <span>RECEPTION: FAIR</span>
                  <span>MEM 640K</span>
                  <span>© 1991–∞</span>
                </footer>
              </div>

              <div className="tracking-band" aria-hidden="true" />
              <div className="crt-scanlines" aria-hidden="true" />
              <div className="crt-noise" aria-hidden="true" />
              <div className="crt-glare" aria-hidden="true" />
            </section>
          </div>

          <div className="lower-seam" aria-hidden="true" />
          <div className="drive-slot" aria-hidden="true"><i /></div>
          <div className="machine-badge" aria-label="Ghost Terminal model 91">
            <span className="badge-glyph" aria-hidden="true"><i /><i /><i /></span>
            <span><strong>Ghost Terminal</strong><small>MODEL 91 · SIGNAL SYSTEM</small></span>
          </div>
          <div className="status-light" aria-hidden="true" />
          <div className="base-lip" aria-hidden="true" />
        </div>
      </div>

      <style jsx>{`
        .ghost-stage {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          background:
            linear-gradient(rgba(124, 151, 255, 0.18) 1px, transparent 1px),
            linear-gradient(90deg, rgba(124, 151, 255, 0.18) 1px, transparent 1px),
            radial-gradient(circle at 50% 38%, #2d48f2 0%, #172ed8 45%, #0b199f 100%);
          background-size: clamp(38px, 9.6%, 64px) clamp(38px, 12.1%, 64px), clamp(38px, 9.6%, 64px) clamp(38px, 12.1%, 64px), auto;
          container-type: inline-size;
        }

        .ghost-stage::before {
          position: absolute;
          inset: 0;
          content: "";
          pointer-events: none;
          background:
            linear-gradient(90deg, rgba(2, 8, 77, 0.35), transparent 18%, transparent 82%, rgba(2, 8, 77, 0.35)),
            linear-gradient(transparent 62%, rgba(2, 5, 45, 0.28));
          z-index: 5;
        }

        .ambient-light {
          position: absolute;
          inset: 8% 17% 9%;
          background: rgba(112, 133, 255, 0.3);
          filter: blur(32px);
          transform: translateY(3%);
        }

        .machine-wrap {
          position: absolute;
          top: 9%;
          left: 50%;
          width: 58%;
          height: auto;
          aspect-ratio: .844;
          transform: translateX(-50%) perspective(1000px) scale(1);
          transform-origin: 50% 52%;
          transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
          z-index: 2;
        }

        .is-inspecting .machine-wrap {
          transform: translateX(-50%) translateY(3.8%) perspective(1000px) scale(1.24);
        }

        .floor-shadow {
          position: absolute;
          z-index: -3;
          left: 1%;
          right: -8%;
          bottom: -3%;
          height: 12%;
          border-radius: 50%;
          background: rgba(0, 4, 53, 0.55);
          filter: blur(13px);
          transform: skewX(-8deg);
        }

        .rear-shell {
          position: absolute;
          z-index: -2;
          top: 0;
          left: 0;
          width: 106%;
          height: 100%;
          clip-path: polygon(92.08% 0, 97.74% 3%, 100% 6.2%, 94.34% 3.2%);
          background: linear-gradient(145deg, #c8c6b8 0%, #918f84 48%, #77766e 100%);
        }

        .side-shell {
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          width: 106%;
          height: 100%;
          clip-path: polygon(94.34% 3.2%, 100% 6.2%, 100% 100%, 94.34% 100%);
          background: linear-gradient(90deg, #aaa89d 0%, #7c7b73 55%, #5d5d57 100%);
          filter: drop-shadow(11px 12px 17px rgba(1, 4, 39, 0.3));
        }

        .machine-front {
          position: absolute;
          inset: 0;
          overflow: hidden;
          clip-path: polygon(2.4% 0, 97.6% 0, 100% 3.2%, 100% 100%, 0 100%, 0 3.2%);
          background:
            linear-gradient(101deg, rgba(255, 255, 255, 0.38), transparent 17%),
            linear-gradient(180deg, #d0cec0 0%, #b8b6aa 58%, #aaa89d 100%);
          box-shadow:
            inset 2px 2px 1px rgba(255,255,255,.55),
            inset -3px -3px 4px rgba(54,53,49,.25);
        }

        .case-highlight {
          position: absolute;
          inset: 0 0 auto;
          height: 2.2%;
          background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.15) 80%);
        }

        .screen-well {
          position: absolute;
          top: 8.5%;
          left: 9.2%;
          width: 81.6%;
          height: 57%;
          background: #595851;
          filter: drop-shadow(0 3px 1px rgba(255,255,255,.2));
          clip-path: polygon(4.8% 0, 95.2% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%);
        }

        .bevel {
          position: absolute;
          pointer-events: none;
        }

        .bevel-top {
          inset: 0 0 auto;
          height: 14%;
          clip-path: polygon(0 0, 100% 0, 93.5% 100%, 6.5% 100%);
          background: linear-gradient(#77756d, #4b4944);
        }

        .bevel-right {
          inset: 0 0 0 auto;
          width: 8.7%;
          clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 86%);
          background: linear-gradient(90deg, #59574f, #9d9a8d);
        }

        .bevel-bottom {
          inset: auto 0 0;
          height: 14%;
          clip-path: polygon(6.5% 0, 93.5% 0, 100% 100%, 0 100%);
          background: linear-gradient(#8d8b81, #d7d5c7);
        }

        .bevel-left {
          inset: 0 auto 0 0;
          width: 8.7%;
          clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
          background: linear-gradient(90deg, #bdbbad, #77756c);
        }

        .crt-glass {
          position: absolute;
          z-index: 2;
          top: 11%;
          right: 7.1%;
          bottom: 11%;
          left: 7.1%;
          overflow: hidden;
          border-radius: 10% / 7%;
          background: #d4d5ca;
          color: #171813;
          box-shadow:
            inset 0 0 13px 4px rgba(0,0,0,.65),
            inset 0 3px 4px rgba(0,0,0,.45),
            0 0 0 1px rgba(20,20,17,.8);
          filter: grayscale(1) sepia(.07) contrast(1.06);
        }

        .crt-picture {
          position: absolute;
          inset: 2.8% 2.4%;
          overflow: hidden;
          border-radius: 7% / 5%;
          background: #d6d7cc;
          font-family: "Courier New", Courier, monospace;
          transform: translateZ(0) scale(1.015, 1.02);
          transform-origin: center;
        }

        .is-glitching .crt-picture {
          animation: tracking-slip 150ms steps(2, end);
        }

        .system-strip {
          height: 8%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 4%;
          border-bottom: 1px solid #30312c;
          background: repeating-linear-gradient(135deg, #23241f 0 2px, #c8c9bf 2px 4px);
          color: #eff0e7;
          font-size: clamp(4px, 0.82cqw, 7px);
          font-weight: 700;
          letter-spacing: .06em;
          text-shadow: 0 1px #111;
        }

        .system-strip span {
          background: #24251f;
          padding: 1px 3px;
        }

        .terminal-header {
          height: 21%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 3%;
          border-bottom: 1px solid rgba(35,36,31,.8);
          text-align: left;
        }

        .terminal-header strong,
        .terminal-header span {
          display: block;
        }

        .terminal-header strong {
          font-size: clamp(7px, 1.6cqw, 13px);
          line-height: 1;
          letter-spacing: -.08em;
        }

        .terminal-header span {
          margin-top: 4%;
          font-size: clamp(3px, .68cqw, 6px);
          letter-spacing: .12em;
        }

        .terminal-mark {
          width: 9%;
          aspect-ratio: 1;
          display: grid;
          gap: 8%;
          padding: 1.5%;
          border: 1px solid #2b2c27;
          transform: rotate(-6deg);
        }

        .terminal-mark i { background: #252620; }
        .terminal-mark i:nth-child(2) { margin-left: 23%; }
        .terminal-mark i:nth-child(3) { margin-left: 46%; }

        .terminal-nav {
          position: relative;
          z-index: 8;
          height: 10%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1.8%;
          border-bottom: 1px solid #3c3d37;
          background: rgba(255,255,255,.12);
        }

        .terminal-nav button {
          border: 0;
          border-radius: 0;
          background: transparent;
          color: inherit;
          cursor: pointer;
          font-family: inherit;
          font-size: clamp(3px, .72cqw, 6px);
          font-weight: 700;
          line-height: 1;
          padding: 1.5% 2%;
          touch-action: manipulation;
        }

        .terminal-nav button:hover,
        .terminal-nav button:focus-visible,
        .terminal-nav button.active,
        .terminal-nav button[aria-expanded="true"] {
          background: #24251f;
          color: #e8e9df;
          outline: none;
        }

        .files-menu { position: relative; }

        .menu-popover {
          position: absolute;
          top: 100%;
          right: 0;
          width: clamp(70px, 15cqw, 90px);
          max-width: 28cqw;
          padding: 7% 0;
          border: 1px solid #24251f;
          background: #dcddd2;
          box-shadow: 2px 2px 0 rgba(20,21,18,.62);
        }

        .menu-popover button {
          display: block;
          width: 100%;
          padding: 7% 8%;
          overflow-wrap: anywhere;
          line-height: 1.18;
          text-align: center;
          white-space: normal;
        }

        .terminal-content {
          height: 50%;
          display: grid;
          grid-template-columns: .92fr 1.2fr;
          gap: 3%;
          padding: 4% 4% 3%;
        }

        .signal-figure {
          position: relative;
          overflow: hidden;
          border: 1px solid #393a34;
          background:
            linear-gradient(rgba(39,40,35,.16) 1px, transparent 1px),
            linear-gradient(90deg, rgba(39,40,35,.16) 1px, transparent 1px),
            #bfc0b6;
          background-size: 12% 17%;
        }

        .signal-moon {
          position: absolute;
          top: 17%;
          left: 16%;
          width: 22%;
          aspect-ratio: 1;
          border: 1px solid #3d3e38;
          border-radius: 50%;
          box-shadow: inset -3px -2px 0 rgba(52,53,48,.25);
        }

        .signal-horizon {
          position: absolute;
          inset: 61% 0 auto;
          height: 1px;
          background: #30312c;
          box-shadow: 0 5px 0 rgba(48,49,44,.42), 0 10px 0 rgba(48,49,44,.2);
        }

        .signal-pulse {
          position: absolute;
          left: 53%;
          top: 10%;
          width: 2px;
          height: 74%;
          background: #20211d;
          transform: rotate(33deg);
          transform-origin: center;
        }

        .signal-figure > span {
          position: absolute;
          right: 4%;
          bottom: 4%;
          background: #292a25;
          color: #dcddd2;
          padding: 1% 3%;
          font: 700 clamp(3px, .62cqw, 5px)/1 "Courier New", monospace;
        }

        .terminal-content article {
          min-width: 0;
          align-self: center;
        }

        .eyebrow {
          display: inline-block;
          margin-bottom: 4%;
          background: #282923;
          color: #e1e2d8;
          padding: 1.5% 3%;
          font: 700 clamp(3px, .62cqw, 5px)/1 "Courier New", monospace;
        }

        .terminal-content h2 {
          margin: 0;
          max-width: 18ch;
          font-size: clamp(6px, 1.22cqw, 10px);
          line-height: 1.02;
          letter-spacing: -.08em;
        }

        .terminal-content p {
          margin: 5% 0 0;
          font-size: clamp(3.5px, .66cqw, 5.5px);
          line-height: 1.38;
        }

        .meter {
          display: flex;
          gap: 2%;
          height: 9%;
          margin-top: 7%;
        }

        .meter i { flex: 1; border: 1px solid #30312c; }
        .meter i:nth-child(-n+4) { background: #30312c; }

        .terminal-footer {
          height: 11%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 4%;
          border-top: 1px solid #34352f;
          background: #2e2f29;
          color: #dcddd3;
          font: 700 clamp(3px, .62cqw, 5px)/1 "Courier New", monospace;
        }

        .crt-scanlines,
        .crt-noise,
        .crt-glare,
        .tracking-band {
          position: absolute;
          inset: 0;
          z-index: 10;
          pointer-events: none;
        }

        .crt-scanlines {
          background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(18,20,16,.24) 2px 3px);
          mix-blend-mode: multiply;
          opacity: .4;
        }

        .crt-noise {
          opacity: .085;
          background:
            repeating-radial-gradient(circle at 17% 31%, transparent 0 1px, rgba(28,30,24,.28) 1px 2px),
            repeating-linear-gradient(93deg, transparent 0 7px, rgba(255,255,255,.24) 8px 9px);
          background-size: 13px 11px, 19px 17px;
          animation: noise-drift 430ms steps(2, end) infinite;
        }

        .crt-glare {
          background:
            radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(6,8,5,.31) 100%),
            linear-gradient(113deg, rgba(255,255,255,.14), transparent 25% 70%, rgba(255,255,255,.05));
          box-shadow: inset 0 0 10px rgba(0,0,0,.34);
        }

        .tracking-band {
          inset: var(--glitch-line) 0 auto;
          height: 0;
          opacity: 0;
          background: rgba(239,240,225,.72);
          box-shadow: 0 -3px 0 rgba(28,30,24,.55), 0 4px 8px rgba(255,255,246,.7);
        }

        .is-glitching .tracking-band {
          height: 3.2%;
          opacity: 1;
          animation: band-shear 150ms steps(2, end);
        }

        .lower-seam {
          position: absolute;
          inset: 72.5% 0 auto;
          height: 1.8%;
          background: linear-gradient(#8a897f, #cbc9bd 52%, #a5a399 55%);
          box-shadow: 0 -1px rgba(61,61,57,.25), 0 1px rgba(255,255,255,.3);
        }

        .drive-slot {
          position: absolute;
          top: 74.1%;
          right: 10.8%;
          width: 37%;
          height: 3.2%;
          background: linear-gradient(#5d5d58, #181916 45%, #080907 70%, #4b4b46);
          box-shadow: inset 1px 1px 1px #080906, 0 1px rgba(255,255,255,.25);
        }

        .drive-slot i {
          position: absolute;
          right: -4%;
          top: 24%;
          width: 1.7%;
          aspect-ratio: 1;
          border-radius: 50%;
          background: #60605a;
          box-shadow: inset 0 0 1px #171815;
        }

        .machine-badge {
          position: absolute;
          left: 10.5%;
          bottom: 8.3%;
          display: flex;
          align-items: center;
          gap: 5%;
          width: 48%;
          color: #45443f;
        }

        .machine-badge > span:last-child { min-width: 0; }

        .machine-badge strong,
        .machine-badge small { display: block; }

        .machine-badge strong {
          font-family: Georgia, serif;
          font-size: clamp(5px, 1.35cqw, 12px);
          line-height: 1;
          font-weight: 500;
          white-space: nowrap;
        }

        .machine-badge small {
          margin-top: 4%;
          font: 700 clamp(2px, .43cqw, 4px)/1 "Courier New", monospace;
          letter-spacing: .08em;
          white-space: nowrap;
        }

        .badge-glyph {
          flex: 0 0 12%;
          display: grid;
          gap: 2px;
          transform: skewY(-10deg);
        }

        .badge-glyph i { display: block; height: clamp(1px, .62cqw, 5px); }
        .badge-glyph i:nth-child(1) { background: #e1b13f; }
        .badge-glyph i:nth-child(2) { background: #d05b6e; margin-left: 16%; }
        .badge-glyph i:nth-child(3) { background: #4c9b94; margin-left: 32%; }

        .status-light {
          position: absolute;
          right: 7.4%;
          bottom: 8.7%;
          width: 1.2%;
          aspect-ratio: 1;
          border-radius: 50%;
          background: #42443a;
          box-shadow: 0 0 0 1px rgba(255,255,255,.28), inset 0 0 1px #111;
        }

        .base-lip {
          position: absolute;
          inset: auto 0 0;
          height: 3.5%;
          background: linear-gradient(#a09f95, #8a8980);
          box-shadow: inset 0 1px rgba(255,255,255,.2);
        }

        @keyframes tracking-slip {
          0% { transform: translateX(0) scale(1.015, 1.02); filter: brightness(1); }
          30% { transform: translateX(-1.8%) scale(1.025, 1.02); filter: brightness(.74) contrast(1.25); }
          62% { transform: translateX(1.2%) scale(1.015, 1.02); filter: brightness(1.18); }
          100% { transform: translateX(0) scale(1.015, 1.02); filter: brightness(1); }
        }

        @keyframes band-shear {
          0% { transform: translateX(-5%); }
          50% { transform: translateX(4%); }
          100% { transform: translateX(0); }
        }

        @keyframes noise-drift {
          0% { transform: translate(0, 0); }
          50% { transform: translate(-2px, 1px); }
          100% { transform: translate(1px, -1px); }
        }

        @container (max-width: 430px) {
          .machine-wrap {
            top: 3%;
            width: 64%;
          }
          .is-inspecting .machine-wrap {
            transform: translateX(-50%) translateY(2.5%) perspective(1000px) scale(1.13);
          }
          .system-strip {
            padding-inline: 3%;
            font-size: clamp(3px, .86cqw, 4px);
          }
          .terminal-header strong {
            font-size: clamp(6px, 1.9cqw, 8px);
          }
          .terminal-header span {
            font-size: clamp(3px, .8cqw, 4px);
          }
          .terminal-nav {
            gap: 0;
          }
          .terminal-nav button {
            min-height: 100%;
            padding-inline: 1.1%;
            font-size: clamp(2.8px, .78cqw, 4px);
          }
          .terminal-content {
            gap: 2.5%;
            padding-inline: 3%;
          }
          .terminal-content h2 {
            font-size: clamp(5.5px, 1.65cqw, 7px);
          }
          .terminal-content p {
            font-size: clamp(3.2px, .9cqw, 4px);
            line-height: 1.32;
          }
          .menu-popover {
            width: clamp(62px, 19cqw, 76px);
          }
          .machine-badge {
            width: 53%;
          }
        }

        @container (max-width: 340px) {
          .machine-wrap {
            top: 2%;
            width: 64%;
          }
          .is-inspecting .machine-wrap {
            transform: translateX(-50%) translateY(1.5%) perspective(1000px) scale(1.08);
          }
          .terminal-mark {
            width: 8%;
          }
          .terminal-content {
            grid-template-columns: .82fr 1.3fr;
          }
          .terminal-content p {
            margin-top: 3.5%;
          }
          .meter {
            margin-top: 4%;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .machine-wrap { transition: none; }
          .crt-noise { animation: none; }
        }
      `}</style>
    </div>
  );
}