/* Ink & Paper engine layer — see docs/superpowers/specs/2026-07-11-ink-paper-redesign-design.md §3/§6 */
.ink-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Engine on: the canvas is the paper; body must not paint over it */
html[data-ink="on"] body { background: transparent; }

/* Engine off (reduced motion / no WebGL2): static film-grain overlay */
html[data-ink="off"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* First-visit loader — decorative overlay, never gates content. Click-through
   for its whole life, not only the fade: the loader is decorative and never
   gates interaction; an early click acts on the page beneath (a router swap
   under the overlay), then the overlay lifts on the new page. */
.grd-loader {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .5s ease;
  pointer-events: none;
}
.grd-loader.is-out { opacity: 0; }
.grd-loader-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-size: clamp(32px, 7vw, 64px);
  letter-spacing: -.04em; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .grd-loader { display: none; } }