/* ══════════════════════════════════════════════════════════════════════════
   CRT SCALE — the hero marks' scanline treatment as a reusable graded property.
   SANDBOX PROPOSAL (hero-crt-sandbox). Not on the live site.

   ── REBUILT 2026-07-19 (v2) — derived from the shipped hero, not invented ──
   v1 was wrong twice and Chris caught both: *"the scan lines are actually
   vertical… I kind of like the vertical ones… yours almost look too dense. Look
   at the ones we've got for my symbols, it's much finer."*

   The marks in hero-crt-marks.js drawCrt() do exactly this:
       sx.fillStyle = 'rgba(0,0,0,0.5)';
       step = 3px;  for (x…) fillRect(x, 0, 1.5px, height);
   i.e. VERTICAL, 3px period, 1.5px stripe, darkened 50% — a semi-transparent
   overlay, NOT a removal. v1 used horizontal lines AND masked them fully out
   (alpha 0), which is why it read as dense and hard beside the real marks.

   RULE: this file must stay derived from those three numbers. If the hero's
   scanlines change, change them here too.

   ── HOW LEVEL WORKS NOW ──
   The RHYTHM is fixed site-wide (3px period, 1.5px stripe) so every treated
   element shares one grid — that is what makes it read as one system rather
   than per-element decoration. Only the DARKENING varies:

     L1  20%   the site-wide whisper
     L2  35%   display type, accents
     L3  50%   = the marks exactly. Decoration and 48px+ only.

   Nothing is ever cut out, so nothing loses its silhouette and the contrast
   cost is bounded and predictable.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --crt-period: 3px;    /* stripe + gap — matches the hero marks */
  --crt-stripe: 1.5px;  /* the darkened part — matches the hero marks */
  --crt-alpha: 0.20;    /* how dark the stripe goes; overridden per level */
}

/* VERTICAL is the default — 90deg produces vertical bands, matching the marks.
   Chris: "I actually think I kind of like the vertical ones." */
.crt-1, .crt-2, .crt-3, .crt-mark {
  -webkit-mask-image: repeating-linear-gradient(90deg,
    rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe),
    #000 var(--crt-stripe) var(--crt-period));
  mask-image: repeating-linear-gradient(90deg,
    rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe),
    #000 var(--crt-stripe) var(--crt-period));
}

/* Horizontal variant, to mix it up where the vertical grain fights the form —
   e.g. wide short elements, or to echo the hero FIELD (which is horizontal)
   rather than the marks. Chris: "if we're gonna have them vertical then we can
   maybe mix it up a little bit." */
.crt-h {
  -webkit-mask-image: repeating-linear-gradient(0deg,
    rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe),
    #000 var(--crt-stripe) var(--crt-period));
  mask-image: repeating-linear-gradient(0deg,
    rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe),
    #000 var(--crt-stripe) var(--crt-period));
}

.crt-1 { --crt-alpha: 0.20; }
.crt-2 { --crt-alpha: 0.35; }
.crt-3 { --crt-alpha: 0.50; }

/* The marks' exact value. They stay the strongest thing on any page — they are
   the source this is quoted from, so page furniture should not match them. */
.crt-mark { --crt-alpha: 0.50; }

/* A finer rhythm for smaller elements, if we ever want it: halves the period so
   the stripes stay proportional to a smaller glyph. Use sparingly — see the
   small-text warning below. */
.crt-fine { --crt-period: 2px; --crt-stripe: 1px; }

/* Small interactive text: clean at rest, tunes in on hover. 13px Space Mono has
   ~1.3px strokes against a 3px period, so a resting treatment reads as damage,
   not as CRT. Making it a hover behaviour keeps legibility as the default state. */
.crt-hover { --crt-alpha: 0; transition: none; }
.crt-hover:hover { --crt-alpha: 0.35; }

/* A divider made of signal instead of a 1px border. Vertical stripes here read
   as a dotted/ticked rule, which is the cheapest way to carry the aesthetic onto
   pages with no display type at all. */
.crt-rule {
  height: 5px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    currentColor 0 var(--crt-stripe), transparent var(--crt-stripe) var(--crt-period));
  opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  .crt-hover:hover { --crt-alpha: 0; }
}