/* ============================================================
   Background atmospherics
   ============================================================ */

/* Atmospheric dot pattern with two-layer mask:
     1. Edge frame — dots fade in toward the viewport corners (text stays clear)
     2. Cursor spotlight — a soft circle that follows the pointer, brightening
        dots in the protected center as the cursor moves over them.
   JS in interactions.js updates --cursor-x / --cursor-y on pointermove. With
   no cursor activity the values default off-screen so the spotlight is invisible
   and only the edge frame shows (mobile, touch, reduced-motion handled this way). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at center, var(--rule-strong) 1.1px, transparent 1.6px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  mask-image:
    radial-gradient(circle 260px at var(--cursor-x, -300px) var(--cursor-y, -300px), black 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(ellipse 75% 60% at center, transparent 32%, black 95%);
  -webkit-mask-image:
    radial-gradient(circle 260px at var(--cursor-x, -300px) var(--cursor-y, -300px), black 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%),
    radial-gradient(ellipse 75% 60% at center, transparent 32%, black 95%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

body[data-theme="dark"]::before {
  opacity: 0.4;
}

/* Background atmosphere — three soft accent glows (blue / violet / cyan)
   fixed behind content, echoing the new UI's colorful backdrop. The moving
   "magnetic" spotlight is a separate overlay (.cursor-glow) above content. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 520px at 12% -8%,
      color-mix(in oklab, var(--signal) 12%, transparent), transparent 60%),
    radial-gradient(720px 520px at 92% 6%,
      color-mix(in oklab, var(--plum) 10%, transparent), transparent 60%),
    radial-gradient(900px 620px at 50% 116%,
      color-mix(in oklab, var(--cyan) 8%, transparent), transparent 60%);
}

body[data-theme="dark"]::after {
  background:
    radial-gradient(720px 520px at 12% -8%,
      color-mix(in oklab, var(--signal) 22%, transparent), transparent 60%),
    radial-gradient(720px 520px at 92% 6%,
      color-mix(in oklab, var(--plum) 18%, transparent), transparent 60%),
    radial-gradient(900px 620px at 50% 116%,
      color-mix(in oklab, var(--cyan) 12%, transparent), transparent 60%);
}

/* Magnetic arrow field — a full-viewport canvas of small arrows that rotate
   to point toward the cursor (drawn in arrow-field.js). Sits behind content
   (z 0) like the new UI. Skipped entirely on touch / reduced-motion in JS. */
.arrow-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

body[data-theme="dark"] .arrow-field {
  opacity: 0.92;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

body[data-theme="dark"] .grain {
  opacity: 0.18;
  mix-blend-mode: screen;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* All headings use the display face (Bricolage Grotesque). More specific rules
   that intentionally differ (e.g. .spotlight h3 in mono) still override this. */
h1, h2, h3 { font-family: var(--font-display); }

.container {
  width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ============================================================
   Skip / scroll progress
   ============================================================ */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.6rem 1rem;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  border-radius: 4px;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--signal);
  z-index: 100;
  transition: width 0.05s linear;
  box-shadow: 0 1px 0 rgba(255, 77, 31, 0.16);
}