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

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "VT323";
  src: url("../assets/fonts/vt323-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-block-size: 100svh; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  button { font: inherit; color: inherit; }
  ol, ul { padding: 0; list-style: none; }
  p, h1, h2 { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: dark;

    /* colours, by role */
    --color-bg: #07070b;
    --color-bg-raised: #0d0f15;
    --color-surface: rgb(0 0 0 / 0.6);
    --color-scrim: rgb(4 4 8 / 0.88);
    --color-text: #ece9e1;
    --color-text-muted: #b1aea6;
    --color-accent-active: #ffb627;   /* amber: selected / active menu item */
    --color-accent-status: #3dff8b;   /* phosphor green: HUD + OK status */
    --color-accent-info: #36e2f5;     /* cyan: panels + dialogue frames */
    --color-accent-alert: #ff4057;    /* red: alerts + the "AI" in redlAIne */
    --color-on-accent: #0a0a0c;
    --color-border-subtle: rgb(255 255 255 / 0.16);
    --color-focus: #ffe08a;

    --chroma-shadow: -1px 0 rgb(255 0 60 / 0.6), 1px 0 rgb(0 220 255 / 0.6);
    --glow-info: 0 0 0.75rem rgb(54 226 245 / 0.35);
    --glow-active: 0 0 1rem rgb(255 182 39 / 0.45);

    /* type */
    --font-display: "VT323", "JetBrains Mono", ui-monospace, monospace;
    --font-body: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    --text-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --text-sm: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    --text-md: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    --text-ui: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
    --text-lg: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    --text-xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
    --tracking-label: 0.08em;

    /* spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: clamp(3rem, 2rem + 4vw, 6rem);
    --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

    /* shapes + sizes */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-screen: 1.25rem;
    --border-thin: 1px;
    --border-neon: 2px;
    --chamfer: 0.9rem;
    --header-h: 3.25rem;
    --target-min: 2.75rem;  /* 44px */
    --content-max: 64rem;

    /* motion */
    --dur-fast: 150ms;
    --dur-med: 300ms;
    --dur-tear: 240ms;
    --dur-tracking: 9s;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  html {
    background: var(--color-bg);
    scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
    font-variant-ligatures: none;
    color: var(--color-text);
    background:
      radial-gradient(120% 60% at 50% 0%, rgb(54 226 245 / 0.06), transparent 60%),
      radial-gradient(80% 50% at 80% 100%, rgb(255 64 87 / 0.06), transparent 60%),
      var(--color-bg);
  }

  a { color: inherit; }

  :focus-visible {
    outline: var(--border-neon) solid var(--color-focus);
    outline-offset: 3px;
  }

  main:focus { outline: none; } /* skip-link target only; never interactive */

  h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* Before i18n lands, text slots are empty: hide them so nothing pops in unstyled. */
  html[data-i18n-state="loading"] [data-i18n] { opacity: 0; }

  @media (prefers-reduced-motion: no-preference) {
    [data-i18n] { transition: opacity var(--dur-med) ease-out; }
  }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    min-block-size: var(--header-h);
    padding-block: var(--space-1);
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    background: rgb(7 7 11 / 0.82);
    backdrop-filter: blur(8px);
    border-block-end: var(--border-thin) solid var(--color-border-subtle);
  }

  .sections {
    display: grid;
    gap: var(--space-8);
    inline-size: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
    padding-block: var(--space-8);
  }

  .section {
    display: grid;
    gap: var(--space-5);
  }

  .site-footer {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
    padding-block: var(--space-7) max(var(--space-7), env(safe-area-inset-bottom));
    padding-inline: var(--gutter);
    border-block-start: var(--border-thin) solid var(--color-border-subtle);
  }
}

/* ------------------------------------------------------------------ components */
@layer components {

  /* --- skip link --- */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent-active);
    color: var(--color-on-accent);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    text-decoration: none;
    transform: translateY(-200%);

    &:focus-visible { transform: none; }
  }

  /* --- header --- */
  .header-youtube {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-min);
    padding-inline: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);

    & .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--color-accent-alert); }

    /* narrow phones: icon only; the label stays available to screen readers */
    @media (max-width: 29.99rem) {
      & .header-youtube-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }

    @media (hover: hover) {
      &:hover { color: var(--color-accent-active); }
    }
  }

  .header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) clamp(var(--space-2), 2vw, var(--space-4));
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
  }

  .lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .lang-switch-sep { color: var(--color-text-muted); }

  .lang-switch-button,
  .fx-toggle {
    min-inline-size: var(--target-min);
    min-block-size: var(--target-min);
    padding-inline: var(--space-2);
    background: none;
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    letter-spacing: inherit;

    &[aria-pressed="true"] {
      color: var(--color-accent-active);
      border-color: currentColor;
    }

    @media (hover: hover) {
      &:hover { color: var(--color-text); }
      &[aria-pressed="true"]:hover { color: var(--color-accent-active); }
    }
  }

  .fx-toggle[aria-pressed="false"] { border-color: var(--color-border-subtle); }

  /* --- hero (default: narrow / portrait — the uncropped 16:9 "TV") --- */
  .hero {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    padding-block: var(--space-4) var(--space-6);
    padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
  }

  .hero-screen {
    position: relative;
    isolation: isolate;
    inline-size: min(100%, 60rem, calc((100svh - var(--header-h) - 2rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border: var(--border-neon) solid #1c1e26;
    border-radius: var(--radius-screen);
    box-shadow:
      0 0 0 0.4rem #101218,
      0 0 0 calc(0.4rem + 1px) #262934,
      0 1.5rem 3rem rgb(0 0 0 / 0.6);
  }

  .hero-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  html[data-fx="on"] .hero-img { filter: url("#fx-chroma"); }

  .hero-ui {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    inline-size: min(100%, 40rem);
    text-align: center;
  }

  .hero-tagline {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .hero-menu-list {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
  }

  .hero-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    min-block-size: var(--target-min);
    padding-inline: var(--space-2) var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);

    /* ▶ marker reserves its space so hover doesn't shift layout */
    &::before {
      content: "▶";
      font-family: var(--font-body);
      font-size: 0.6em;
      color: transparent;
    }

    &:focus-visible,
    &[data-state="active"] {
      color: var(--color-accent-active);
      text-shadow: var(--glow-active);
      &::before { color: currentColor; }
    }

    @media (hover: hover) {
      &:hover {
        color: var(--color-accent-active);
        text-shadow: var(--glow-active);
        &::before { color: currentColor; }
      }
    }
  }

  .hero-menu-key { color: inherit; }

  /* Short landscape phones: TV beside the menu so both stay in view. */
  @media (orientation: landscape) and (max-height: 35.99rem) and (max-width: 63.99rem) {
    .hero {
      grid-template-columns: minmax(0, 1.35fr) minmax(13rem, 1fr);
      align-items: center;
      gap: var(--space-5);
    }
    .hero-ui { justify-items: start; text-align: start; }
    .hero-tagline { font-size: var(--text-ui); }
    .hero-menu-list { gap: 0; }
  }

  /* Wide + tall enough: full-bleed image, UI over a scrim in the empty lower third. */
  @media (min-width: 48rem) and (min-aspect-ratio: 4/3) and (min-height: 36rem) {
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-block-size: calc(100svh - var(--header-h));
      padding: 0;
      overflow: hidden;
    }

    .hero-screen {
      position: absolute;
      inset: 0;
      inline-size: auto;
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .hero-img {
      object-fit: cover;
      object-position: 50% 45%;
    }

    .hero-ui {
      position: relative;
      z-index: 2;
      inline-size: 100%;
      gap: var(--space-3);
      padding-block: var(--space-8) max(var(--space-6), env(safe-area-inset-bottom));
      padding-inline: var(--gutter);
      background: linear-gradient(to bottom, transparent, rgb(4 4 8 / 0.78) 38%, var(--color-scrim));
    }

    .hero-menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2) var(--space-5);
    }
  }

  /* --- VHS on-screen display --- */
  .osd {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template: auto 1fr auto / 1fr auto;
    padding: clamp(0.5rem, 2.5%, 1.75rem) clamp(0.75rem, 3%, 2.25rem);
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 0.6rem + 1.6vw, 2rem);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--color-text);
    text-shadow: var(--chroma-shadow), 0 0 0.25rem rgb(0 0 0 / 0.9);
  }

  .osd-play { grid-area: 1 / 1; }
  .osd-timecode { grid-area: 1 / 2; font-variant-numeric: tabular-nums; }
  .osd-login { grid-area: 3 / 1; align-self: end; font-size: 0.75em; color: var(--color-accent-status); }
  .osd-sp { grid-area: 3 / 2; align-self: end; font-size: 0.75em; }

  @media (min-width: 48rem) and (min-aspect-ratio: 4/3) and (min-height: 36rem) {
    /* lower corners sit under the hero UI; keep the OSD to the top band */
    .osd { grid-template: auto 1fr / 1fr auto; padding-block-start: var(--space-5); }
    .osd-login { grid-area: 2 / 1; align-self: start; padding-block-start: var(--space-2); }
    .osd-sp { grid-area: 2 / 2; align-self: start; justify-self: end; padding-block-start: var(--space-2); }
  }

  /* --- CTA: Follow on YouTube (primary action) --- */
  .cta-youtube {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-block-size: 3.25rem;
    padding-inline: var(--space-5);
    background: var(--color-accent-active);
    color: var(--color-on-accent);
    border: var(--border-neon) solid var(--color-accent-active);
    border-radius: var(--radius-sm);
    box-shadow: var(--glow-active);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;

    @media (hover: hover) {
      &:hover { background: var(--color-on-accent); color: var(--color-accent-active); }
    }

    &:focus-visible { outline-color: var(--color-text); }
  }

  .cta-youtube-marker { font-family: var(--font-body); font-size: 0.7em; }

  /* --- section headings --- */
  .section-title {
    font-size: var(--text-xl);
    color: var(--color-text);
    scroll-margin-block-start: calc(var(--header-h) + var(--space-4));
  }

  html[data-fx="on"] .section-title { text-shadow: var(--chroma-shadow); }

  .section-key { color: var(--color-accent-active); }

  /* --- panel: thin neon border on translucent fill --- */
  .panel {
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6));
    background: var(--color-surface);
    border: var(--border-neon) solid var(--color-accent-info);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-info), inset 0 0 1.5rem rgb(54 226 245 / 0.06);
  }

  .panel-text {
    max-inline-size: 62ch;
    font-size: var(--text-md);
  }

  /* --- AI CORE: dialogue box with chamfered corners, as in the dialogue screen --- */
  .dialogue-box {
    --cut: var(--chamfer);
    position: relative;
    padding: var(--border-neon);
    background: var(--color-accent-info);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    filter: drop-shadow(0 0 0.5rem rgb(54 226 245 / 0.45));
  }

  .dialogue-box-inner {
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6));
    background: rgb(3 8 12 / 0.96);
    clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  }

  .dialogue-text {
    max-inline-size: 62ch;
  }

  .dialogue-speaker {
    font-weight: 400;
    color: var(--color-accent-alert);
    letter-spacing: 0.04em;

    &::after { content: ":"; }
  }

  /* --- gallery: "tapes" --- */
  .tape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
  }

  .tape {
    display: grid;
    gap: 0;
    background: var(--color-bg-raised);
    border: var(--border-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .tape-open {
    display: block;
    padding: 0;
    border: 0;
    background: #000;
    cursor: zoom-in;

    &:focus-visible { outline-offset: -4px; }
  }

  .tape-img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1376 / 768;
    object-fit: cover;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .tape-img { transition: transform var(--dur-med) ease-out; }
    .tape-open:hover .tape-img { transform: scale(1.03); }
  }

  .tape-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border-block-start: var(--border-neon) solid var(--color-accent-info);
  }

  .tape-no { color: var(--color-accent-info); }
  .tape-sp { margin-inline-start: auto; font-size: 0.75em; color: var(--color-text-muted); }

  /* --- gallery viewer (native <dialog>) --- */
  .viewer {
    inline-size: min(100% - 2rem, 86rem);
    max-block-size: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    border: var(--border-neon) solid var(--color-accent-info);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-info);

    &::backdrop { background: rgb(0 0 0 / 0.85); }
  }

  .viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .viewer-close {
    min-inline-size: var(--target-min);
    min-block-size: var(--target-min);
    padding-inline: var(--space-3);
    background: none;
    border: var(--border-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: inherit;

    @media (hover: hover) {
      &:hover { color: var(--color-accent-active); border-color: currentColor; }
    }
  }

  .viewer-img {
    inline-size: 100%;
    block-size: auto;
    max-block-size: calc(100dvh - 6rem);
    object-fit: contain;
    background: #000;
  }

  /* --- contact --- */
  .contact {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .contact-label,
  .contact-icon {
    min-inline-size: 4.5rem;
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    color: var(--color-accent-info);
  }

  .contact-icon { inline-size: 1.5rem; block-size: 1.5rem; min-inline-size: 0; margin-inline-end: 3rem; }

  .contact-email {
    font-size: var(--text-md);
    user-select: all;
    overflow-wrap: anywhere;
  }

  .copy-button {
    min-inline-size: 6.5rem;
    min-block-size: var(--target-min);
    padding-inline: var(--space-4);
    background: none;
    border: var(--border-neon) solid var(--color-accent-info);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    cursor: pointer;

    &[data-state="copied"] {
      color: var(--color-accent-status);
      border-color: var(--color-accent-status);
    }

    &[data-state="failed"] {
      color: var(--color-accent-alert);
      border-color: var(--color-accent-alert);
    }

    @media (hover: hover) {
      &[data-state="idle"]:hover { background: rgb(54 226 245 / 0.12); }
    }
  }

  .copy-status {
    min-block-size: 1.6em;
    margin-block-start: calc(-1 * var(--space-3));
    font-size: var(--text-sm);
    color: var(--color-text-muted);

    &[data-state="failed"] { color: var(--color-text); }
  }

  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-min);
    text-decoration-color: var(--color-accent-info);
    text-underline-offset: 0.25em;

    & .icon-external { inline-size: 1rem; block-size: 1rem; }

    @media (hover: hover) {
      &:hover { color: var(--color-accent-active); }
    }
  }

  /* --- footer --- */
  .footer-tagline {
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text);
  }

  .footer-copy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* --- "SIGNAL LOST": both language files failed --- */
  .signal-lost {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-5);
    padding: var(--gutter);
    background: #0b1a6b; /* VCR blue screen */
    font-family: var(--font-display);
    text-align: center;

    &[hidden] { display: none; }
  }

  .signal-lost-text {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-label);
    text-shadow: var(--chroma-shadow);
  }

  .signal-lost-hint {
    max-inline-size: 40ch;
    font-family: var(--font-body);
    font-size: var(--text-sm);
  }

  .signal-lost-reload {
    min-block-size: var(--target-min);
    padding-inline: var(--space-5);
    background: none;
    border: var(--border-neon) solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-label);
    cursor: pointer;
  }

  /* ---------------------------------------------------- CRT + VHS effects
     All decorative, pointer-events: none, removed by html[data-fx="off"].
     Motion lives only inside prefers-reduced-motion: no-preference. */

  .fx-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  .fx-crt,
  .fx-tracking,
  .fx-tear {
    pointer-events: none;
  }

  /* hero: scanlines + vignette + grain */
  .fx-crt {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.22) 2px 3px),
      radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55) 100%);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.07;
      mix-blend-mode: overlay;
      background-image: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
  }

  /* whole page: faint scanlines + grain, kept light so body text stays well above AA */
  html[data-fx="on"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background:
      repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.08) 2px 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }

  .fx-tracking {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
  }

  .fx-tear {
    position: fixed;
    inset: 0;
    z-index: 40;
    opacity: 0;
    background:
      linear-gradient(to bottom,
        transparent 0 22%, rgb(54 226 245 / 0.16) 22% 24%, transparent 24% 51%,
        rgb(255 64 87 / 0.16) 51% 53.5%, transparent 53.5% 78%,
        rgb(255 255 255 / 0.12) 78% 79%, transparent 79%);
  }

  @media (prefers-reduced-motion: no-preference) {
    html[data-fx="on"] .fx-tracking {
      opacity: 1;

      &::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: 0;
        block-size: 12%;
        background:
          repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 3px),
          linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.10) 45%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0.10) 55%, transparent);
        transform: translateY(-120%);
        animation: fx-tracking-roll var(--dur-tracking) linear infinite;
        animation-delay: 1.5s;
      }
    }

    html[data-fx="on"] .hero-img {
      animation: fx-jitter var(--dur-tracking) steps(1, end) infinite;
      animation-delay: 1.5s;
    }

    html[data-fx="on"][data-tear] .fx-tear {
      animation: fx-tear var(--dur-tear) steps(4, end) 1;
    }
  }

  @keyframes fx-tracking-roll {
    0%   { transform: translateY(-120%); }
    16%  { transform: translateY(950%); }
    100% { transform: translateY(950%); }
  }

  /* one tiny horizontal hiccup while the band passes */
  @keyframes fx-jitter {
    0%, 6%, 9%, 100% { transform: none; }
    7%   { transform: translateX(3px); }
    8%   { transform: translateX(-2px); }
  }

  @keyframes fx-tear {
    0%   { opacity: 1; transform: translateX(0); }
    25%  { opacity: 1; transform: translateX(-1.5%); }
    50%  { opacity: 0.8; transform: translateX(1%); }
    75%  { opacity: 0.4; transform: translateX(-0.5%); }
    100% { opacity: 0; transform: none; }
  }

  html[data-fx="off"] {
    & .fx-crt,
    & .fx-tracking,
    & .fx-tear,
    & .osd { display: none; }
  }
}

/* ------------------------------------------------------------------ utilities */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}