/* ===========================================================================
   ATOMYS_OS — DESIGN TOKENS (modernized)
   Mobile-first. CSS @layer organized. Fluid type. prefers-reduced-motion safe.
   =========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ─── @layer reset ─────────────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }
  body {
    margin: 0;
    min-height: 100dvh;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote {
    margin: 0;
  }
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  fieldset {
    border: none;
  }
  dd {
    margin-inline-start: 0;
  }
}

/* ─── @layer tokens ────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* ── Color seeds — only these change between palettes.
       All -hi / -lo / scale variants are derived via OKLCH relative color
       syntax: change the seed and the whole ramp follows.

       Browser support: Chrome 119+, Safari 16.4+, Firefox 128+.

       Tuning knobs (kept as custom props so palettes can also override the
       deltas if they need a tighter or looser ramp): */
    --hi-l: 0.1; /* lightness step for `-hi` variants */
    --lo-l: 0.15; /* lightness step for `-lo` variants */
    --bg-step: 0.04; /* lightness step between bg layers */
    --ink-down-1: 0.1; /* lightness drop ink-0 → ink-1 */
    --ink-down-2: 0.28; /* lightness drop ink-0 → ink-2 */
    --ink-down-3: 0.42; /* lightness drop ink-0 → ink-3 */
    --ink-tint-1: 0.015; /* chroma boost ink-1 (slight tint) */
    --ink-tint-2: 0.04; /* chroma boost ink-2 */
    --ink-tint-3: 0.06; /* chroma boost ink-3 */

    /* Backgrounds — bg-0 is the seed, others step lighter in equal increments */
    --bg-0: #07060d;
    --bg-1: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 0.75)
        calc(c + var(--bg-step) * 0.5) h
    );
    --bg-2: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 1.5)
        calc(c + var(--bg-step) * 1) h
    );
    --bg-3: oklch(
      from var(--bg-0) calc(l + var(--bg-step) * 2.25)
        calc(c + var(--bg-step) * 1.5) h
    );

    /* Ink — ink-0 is the seed (lightest); others step darker + slightly more
       chromatic so muted text stays subtly tinted with the palette hue. */
    --ink-0: #f4f1ff;
    --ink-1: oklch(
      from var(--ink-0) calc(l - var(--ink-down-1)) calc(c + var(--ink-tint-1))
        h
    );
    --ink-2: oklch(
      from var(--ink-0) calc(l - var(--ink-down-2)) calc(c + var(--ink-tint-2))
        h
    );
    --ink-3: oklch(
      from var(--ink-0) calc(l - var(--ink-down-3)) calc(c + var(--ink-tint-3))
        h
    );

    /* Brand & semantic seeds — -hi / -lo derived */
    --violet: #693efe;
    --violet-hi: oklch(from var(--violet) calc(l + var(--hi-l)) c h);
    --violet-lo: oklch(from var(--violet) calc(l - var(--lo-l)) c h);
    --lime: #d3fe3e;
    /* lime is already near-max lightness, so clamp the L bump to avoid
       clipping to pure white (which would lose contrast for .btn-lime text). */
    --lime-hi: oklch(from var(--lime) min(calc(l + var(--hi-l)), 0.97) c h);
    --danger: #ff3b6b;
    --danger-hi: oklch(from var(--danger) calc(l + var(--hi-l)) c h);

    /* Typography stacks (overridden by data-typeface on :root) */
    --font-sans: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-pixel: "VT323", "JetBrains Mono", monospace;

    /* Fluid typography ramp — replaces all hardcoded hero font-sizes.
       Slope tuned so each size hits its MAX at viewport width 1024px (the md
       breakpoint). At 1024px, 1vw = 10.24px, so X * 10.24 ≈ MAX_px. Below the
       min, the clamp floor catches it; above 1024px the cap holds. Net effect:
       desktop matches the original px values exactly while mobile scales down. */
    --fs-hero-xl: clamp(2.5rem, 11vw, 7rem); /* was 112px @ 1024+ */
    --fs-hero-lg: clamp(2.25rem, 8.6vw, 5.5rem); /* was 88px / 84px */
    --fs-hero-md: clamp(2rem, 7.4vw, 4.75rem); /* was 76px */
    --fs-display: clamp(3.5rem, 27.4vw, 17.5rem); /* was 280px (404) */
    --fs-h1: clamp(1.75rem, 5.1vw, 3.25rem); /* was 52px */
    --fs-h2: clamp(1.5rem, 3.7vw, 2.375rem); /* was 38px */
    --fs-h3: clamp(1.25rem, 2.75vw, 1.75rem); /* was 28px (section heads) */
    --fs-lede: clamp(1.125rem, 2.15vw, 1.375rem); /* was 22px */
    --fs-body: clamp(0.9375rem, 1.66vw, 1.0625rem); /* 15-17px */
    --fs-sm: 0.875rem; /* 14px — UI labels, secondary copy */
    --fs-ui: 0.8125rem; /* 13px — small UI text, tags inside rows */
    --fs-meta: 0.6875rem; /* 11px — chrome/labels */
    --fs-micro: 0.625rem; /* 10px */
    --fs-nano: 0.5625rem; /* 9px */

    /* Spacing — fluid gutter is the headline change */
    --gutter: clamp(1rem, 5vw, 2.5rem); /* replaces all `*px 40px` */
    --gutter-y: clamp(1.5rem, 4vw, 3.5rem);
    --rail-w: 40px;
    --bottom-h: clamp(36px, 4vw, 48px); /* was inverted (min > max) */
    --container: 1400px;

    /* Radii */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Effect intensity knobs (overridden per data-intensity) */
    --fx-scanline: 1;
    --fx-vignette: 1;
    --fx-crt-scan: 1;
    --fx-crt-scan-speed: 6s;
    --fx-vhs: 7s;
    --fx-chroma: 1;
    --fx-marquee: 32s;
    --fx-glitch-hover: 1;
    --fx-glow: 1;
    --fx-glyphs: 1;

    /* Motion */
    --t-fast: 120ms;
    --t-base: 220ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* a11y — motion ─────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --fx-vhs: 0s;
      --fx-crt-scan-speed: 0s;
      --fx-marquee: 0s;
      --fx-glitch-hover: 0;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ─── @layer base ──────────────────────────────────────────────────────── */
@layer base {
  html {
    /* Hard cap at the viewport so nothing inside the document tree can
       extend the page wider than what's visible. `overflow-x: clip` does
       NOT break `position: sticky` on descendants (`hidden` would). */
    overflow-x: clip;
  }
  body {
    background: var(--bg-0);
    color: var(--ink-0);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    /* Defensive cap — body is at most as wide as its containing block (html). */
    max-inline-size: 100%;
  }

  /* Skip-link — hidden until focused */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--lime);
    color: var(--bg-0);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    border-radius: var(--radius-s);
    transform: translateY(-200%);
    transition: transform var(--t-base) var(--ease);
    z-index: 999;
  }
  .skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
  }

  /* Visible focus ring everywhere */
  :focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: var(--radius-s);
  }
}

/* ─── @layer components — primitives shared across every page ─────────── */
@layer components {
  /* === EFFECTS === */

  /* Scanlines (subtle CRT background)
     blend-mode: `screen` brightens on dark backgrounds (which is what CRT
     phosphor lines actually do). The original used `overlay`, but overlay
     against very dark backdrops (l < 0.1) produces almost no visible change —
     the scanlines were effectively invisible. */
  .scanlines {
    position: relative;
  }
  .scanlines::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / calc(0.06 * var(--fx-scanline))) 0 1px,
      transparent 1px 3px
    );
    mix-blend-mode: screen;
    z-index: 0;
  }
  .scanlines-strong::before {
    background-image: repeating-linear-gradient(
      0deg,
      rgb(211 254 62 / calc(0.12 * var(--fx-scanline))) 0 1px,
      transparent 1px 3px
    );
  }

  /* Grid dots background */
  .dots-bg {
    background-image: radial-gradient(
      circle at 1px 1px,
      rgb(105 62 254 / 0.18) 1px,
      transparent 0
    );
    background-size: 24px 24px;
  }

  /* Noise grain */
  .noise {
    position: relative;
  }
  .noise::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Glitch text on hover (uses data-text attr) */
  .glitch {
    position: relative;
    display: inline-block;
  }
  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .glitch:hover::before {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--lime);
    transform: translate(-2px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
    animation: glitch-a 0.6s steps(2, end) infinite;
  }
  .glitch:hover::after {
    opacity: calc(0.85 * var(--fx-glitch-hover));
    color: var(--violet-hi);
    transform: translate(2px, 0);
    clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
    animation: glitch-b 0.55s steps(2, end) infinite;
  }
  @keyframes glitch-a {
    0%,
    100% {
      transform: translate(-2px, 0);
    }
    50% {
      transform: translate(-3px, 1px);
    }
  }
  @keyframes glitch-b {
    0%,
    100% {
      transform: translate(2px, 0);
    }
    50% {
      transform: translate(3px, -1px);
    }
  }

  /* Chromatic aberration title */
  .chroma {
    text-shadow:
      calc(-2px * var(--fx-chroma)) 0 0
        rgb(105 62 254 / calc(0.75 * var(--fx-chroma))),
      calc(2px * var(--fx-chroma)) 0 0
        rgb(211 254 62 / calc(0.55 * var(--fx-chroma)));
  }

  /* Animated gradient underline / fill */
  .under-grad {
    background: linear-gradient(90deg, var(--violet), var(--lime));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Pixel corners */
  .pixel-corners {
    clip-path: polygon(
      0 8px,
      8px 8px,
      8px 0,
      calc(100% - 8px) 0,
      calc(100% - 8px) 8px,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      8px calc(100% - 8px),
      0 calc(100% - 8px)
    );
  }

  /* Neon border */
  .neon-border {
    border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--violet) 15%, transparent),
      0 0 24px color-mix(in oklab, var(--violet) 12%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 0.04);
  }
  .neon-border-lime {
    border: 1px solid color-mix(in oklab, var(--lime) 45%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime) 12%, transparent),
      0 0 24px color-mix(in oklab, var(--lime) 10%, transparent);
  }

  /* === BUTTONS — cyberpunk hex-notched ─────────────────────────── */
  @keyframes btnScan {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(200%);
    }
  }
  @keyframes btnGlitchNudge {
    0%,
    100% {
      transform: translate(0, 0);
    }
    20% {
      transform: translate(1px, -1px);
    }
    40% {
      transform: translate(-1px, 1px);
    }
    60% {
      transform: translate(1px, 1px);
    }
    80% {
      transform: translate(-1px, -1px);
    }
  }

  .btn-primary,
  .btn-ghost,
  .btn-danger,
  .btn-lime,
  .btn-outline {
    --btn-accent: var(--violet);
    --btn-accent-hi: color-mix(in oklab, var(--violet) 35%, var(--ink-0));
    --btn-bg: var(--bg-1);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-block: 0.8125rem;
    padding-inline: 1.375rem;
    color: var(--btn-accent-hi);
    background: var(--btn-bg);
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px; /* WCAG tap target */
    clip-path: polygon(
      12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px
    );
    transition:
      color var(--t-fast),
      background var(--t-fast),
      text-shadow var(--t-fast);
  }
  .btn-primary::before,
  .btn-ghost::before,
  .btn-danger::before,
  .btn-lime::before,
  .btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: var(--btn-accent);
    clip-path: polygon(
      12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px,
      12px 0,
      12px 1.5px,
      1.5px 12.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 12.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 12.5px),
      calc(100% - 1.5px) 1.5px,
      12.5px 1.5px,
      12px 0
    );
    pointer-events: none;
    box-shadow: 0 0 18px var(--btn-accent);
  }
  .btn-primary::after,
  .btn-ghost::after,
  .btn-danger::after,
  .btn-lime::after,
  .btn-outline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgb(255 255 255 / 0.12) 50%,
      transparent 100%
    );
    transform: translateY(-100%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .btn-primary:hover::after,
  .btn-ghost:hover::after,
  .btn-danger:hover::after,
  .btn-lime:hover::after,
  .btn-outline:hover::after {
    animation: btnScan 900ms linear infinite;
  }
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-danger:hover,
  .btn-lime:hover,
  .btn-outline:hover {
    animation: btnGlitchNudge 220ms steps(4) 1;
    text-shadow:
      0 0 10px var(--btn-accent),
      -1px 0 0 rgb(211 254 62 / 0.55),
      1px 0 0 rgb(255 59 107 / 0.55);
  }
  .btn-primary:active,
  .btn-ghost:active,
  .btn-danger:active,
  .btn-lime:active,
  .btn-outline:active {
    transform: translate(1px, 1px);
  }

  /* Variants */
  .btn-primary {
    --btn-accent: var(--violet);
    --btn-accent-hi: color-mix(in oklab, var(--violet) 25%, var(--ink-0));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 20%, transparent) 0%,
        color-mix(in oklab, var(--violet) 5%, transparent) 100%
      ),
      var(--bg-1);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--violet) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--violet) 18%, transparent);
  }
  .btn-primary:hover {
    color: #fff;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--violet) 35%, transparent) 0%,
        color-mix(in oklab, var(--violet) 10%, transparent) 100%
      ),
      var(--bg-1);
  }

  .btn-lime {
    --btn-accent: var(--lime);
    --btn-accent-hi: var(--lime-hi);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--lime) 15%, transparent) 0%,
        color-mix(in oklab, var(--lime) 3%, transparent) 100%
      ),
      var(--bg-1);
    color: var(--lime-hi);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--lime) 15%, transparent);
  }
  .btn-lime:hover {
    color: #fff;
  }

  .btn-outline {
    --btn-accent: color-mix(in oklab, var(--lime) 45%, transparent);
    --btn-accent-hi: var(--lime-hi);
    background: color-mix(in oklab, var(--lime) 3%, transparent);
    color: var(--ink-0);
  }
  .btn-outline:hover {
    --btn-accent: var(--lime);
    color: var(--lime);
  }

  .btn-ghost {
    --btn-accent: rgb(255 255 255 / 0.25);
    --btn-accent-hi: var(--ink-0);
    background: rgb(255 255 255 / 0.02);
    color: var(--ink-0);
  }
  .btn-ghost:hover {
    --btn-accent: color-mix(in oklab, var(--lime) 60%, transparent);
    color: var(--lime);
  }

  .btn-danger {
    --btn-accent: var(--danger);
    --btn-accent-hi: color-mix(in oklab, var(--danger) 35%, var(--ink-0));
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--danger) 20%, transparent) 0%,
        color-mix(in oklab, var(--danger) 5%, transparent) 100%
      ),
      var(--bg-1);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--danger) 15%, transparent),
      0 0 32px color-mix(in oklab, var(--danger) 20%, transparent);
  }

  /* === CHIPS === */
  .chip,
  .chip-lime,
  .chip-rabbit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.05em;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--violet) 14%, transparent);
    color: var(--violet-hi);
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  }
  .chip-lime {
    background: color-mix(in oklab, var(--lime) 10%, transparent);
    color: var(--lime-hi);
    border-color: color-mix(in oklab, var(--lime) 32%, transparent);
  }
  .chip-rabbit {
    background: color-mix(in oklab, var(--danger) 10%, transparent);
    color: var(--danger-hi);
    border-color: color-mix(in oklab, var(--danger) 35%, transparent);
  }

  /* Square chips (used in featured/post lists) */
  .chip-v,
  .chip-l {
    display: inline-flex;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    border-radius: 4px;
    background: color-mix(in oklab, var(--violet) 15%, transparent);
    color: var(--violet-hi);
    border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent);
  }
  .chip-l {
    background: color-mix(in oklab, var(--lime) 10%, transparent);
    color: var(--lime);
    border-color: color-mix(in oklab, var(--lime) 40%, transparent);
  }

  /* Rabbit-hole badge */
  .rabbit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--danger-hi);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px dashed color-mix(in oklab, var(--danger) 45%, transparent);
  }

  /* Blinking cursor */
  .cursor-blink::after {
    content: "▋";
    display: inline-block;
    margin-inline-start: 2px;
    animation: blink 1s steps(1) infinite;
    color: var(--lime);
  }
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  /* Pixel sprites */
  .sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
  }

  /* Image placeholder — diagonal stripes */
  .placeholder-img {
    background:
      repeating-linear-gradient(
        135deg,
        color-mix(in oklab, var(--violet) 14%, transparent) 0 8px,
        color-mix(in oklab, var(--violet) 6%, transparent) 8px 16px
      ),
      var(--bg-2);
    display: grid;
    place-items: center;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Pixel avatar (8×8 grid filled by js/pixel-avatar.js or pre-rendered) */
  .pixel-avatar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    image-rendering: pixelated;
  }
  .pixel-avatar i {
    display: block;
  }
  .pixel-avatar i[data-c="0"] {
    background: transparent;
  }
  .pixel-avatar i[data-c="1"] {
    background: var(--violet-lo);
  }
  .pixel-avatar i[data-c="2"] {
    background: var(--violet);
  }
  .pixel-avatar i[data-c="3"] {
    background: var(--bg-0);
  }
  .pixel-avatar i[data-c="4"] {
    background: var(--lime);
  }

  /* Pixel-style decorative avatar (gradient block) */
  .px-av {
    display: inline-block;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--violet), var(--lime));
    image-rendering: pixelated;
  }

  /* Marquee */
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  .marquee-track {
    animation: marquee var(--fx-marquee) linear infinite;
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    opacity: var(--fx-glyphs);
  }
  .marquee-track:hover {
    animation-play-state: paused;
  }

  .ascii-divider {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.05em;
    opacity: calc(0.2 + 0.8 * var(--fx-glyphs));
  }

  /* Glow utilities */
  .glow-violet {
    box-shadow: 0 0 60px color-mix(in oklab, var(--violet) 35%, transparent);
  }
  .glow-lime {
    box-shadow: 0 0 40px color-mix(in oklab, var(--lime) 20%, transparent);
  }

  /* CRT moving scanline */
  @keyframes crt-scan {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(100vh);
    }
  }
  .crt-scan-line {
    position: absolute;
    inset-inline: 0;
    block-size: 80px;
    background: linear-gradient(
      180deg,
      transparent,
      rgb(211 254 62 / calc(0.05 * var(--fx-crt-scan))),
      transparent
    );
    pointer-events: none;
    animation: crt-scan var(--fx-crt-scan-speed) linear infinite;
    opacity: var(--fx-crt-scan);
    z-index: 2;
  }

  /* VHS color-split shift */
  @keyframes vhs-shift {
    0%,
    92%,
    100% {
      transform: translate(0, 0);
      filter: none;
    }
    94% {
      transform: translate(1px, 0);
    }
    96% {
      transform: translate(-2px, 0);
      filter: hue-rotate(10deg);
    }
    98% {
      transform: translate(2px, -1px);
    }
  }
  .vhs-flicker {
    animation: vhs-shift var(--fx-vhs) infinite;
  }
}