/* ═══════════════════════════════════════════════════════════════
   base.css — reset, body, focus, typography baseline
   ═══════════════════════════════════════════════════════════════ */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-deep);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); margin: 0; }

  ::selection { background: var(--accent); color: var(--bg-deep); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

  /* ── eszett options (4 styles) ────────────────────────── */
  .eszett {
    display: inline-block;
    font-style: italic;
    color: var(--accent);
    text-shadow: 0 0 18px var(--accent-glow);
  }
  /* Auto-wrap inserted by MDi/MD around literal "ß" characters in
     content. Disables `text-transform: uppercase` so the eszett glyph
     renders instead of being mapped to "SS" by the browser. Inherits
     all other styling from the surrounding element. */
  .keep-eszett {
    text-transform: none;
  }
  /* style A: classic chunky italic (current) */
  [data-eszett="classic"] .eszett {
    font-family: "Arial Black", "Helvetica Neue", sans-serif;
    font-weight: 900;
    margin-left: -0.04em;
    transform: translateY(0.02em);
  }
  /* style B: serif elegance — sharp contrast w/ display */
  [data-eszett="serif"] .eszett {
    font-family: "DM Serif Display", "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    margin-left: -0.06em;
    transform: translateY(-0.02em) scale(1.08);
  }
  /* style C: monospace technical */
  [data-eszett="mono"] .eszett {
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 700;
    margin-left: 0.02em;
    transform: scale(0.92);
  }
  /* style D: glyph — replace with stylized symbol that scales */
  [data-eszett="glyph"] .eszett {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    margin-left: -0.02em;
    transform: scale(0.96);
    background: linear-gradient(180deg, var(--accent-hot), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 14px var(--accent-glow));
  }

  /* ── grain & scanline overlays ──────────────────────────
   * mix-blend-mode is back. It IS expensive (the compositor re-blends the
   * overlay against everything beneath on every paint), but visually the
   * grain reads MUCH better blended into the scanlines than as an additive
   * dot field on top of them. We compensate elsewhere — the canvas no
   * longer animates star drift, all glass surfaces ditched their
   * backdrop-filter — so the budget for one full-screen blend pass exists. */
  .fx-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9000;
    contain: strict;
  }
  .fx-grain {
    background-image:
      radial-gradient(rgba(255,255,255,.55) 0.6px, transparent 1.1px),
      radial-gradient(rgba(0,0,0,.45) 0.5px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
    opacity: calc(var(--grain-strength) * 3);
    mix-blend-mode: overlay;
  }
  .fx-scanlines {
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 3px
    );
    opacity: var(--scanline-strength);
    mix-blend-mode: overlay;
  }
  [data-mode="dark"] .fx-scanlines {
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.18) 0px,
      rgba(255,255,255,0.18) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode: screen;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}