/* bg.css - site-wide ambient background. Drop into any page with:
     <link rel="stylesheet" href="/bg.css">
     <div class="bg-fx" aria-hidden="true">
       <div class="aurora-a"></div><div class="aurora-b"></div><div class="halftone"></div>
     </div>
     <script src="/bg.js" defer></script>
*/

:root {
  --paper: #EDEBE6;
  --ink: #1B1A18;
  --ink-soft: #4A4843;
  --rule: #D5D2CB;
  --accent: #1D4ED8;
}

html {
  background: var(--paper, #EDEBE6);
}

body {
  background: transparent !important;
}

body > :not(.bg-fx) {
  position: relative;
  z-index: 1;
}

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--paper, #F2EEE5);
}

.bg-fx::before, .bg-fx::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
}

/* 1. Letterpress grain - static SVG noise */
.bg-fx::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' 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.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}
body[data-bg="grain"]    .bg-fx::before { opacity: 0.07; }
body[data-bg="drift"]    .bg-fx::before { opacity: 0.08; animation: bg-drift 140s ease-in-out infinite; }
body[data-bg="aurora"]   .bg-fx::before { opacity: 0.05; }
body[data-bg="wash"]     .bg-fx::before { opacity: 0.05; }
body[data-bg="halftone"] .bg-fx::before { opacity: 0.05; }

@keyframes bg-drift {
  0%   { transform: translate3d(-2%, -2%, 0); }
  50%  { transform: translate3d( 2%,  2%, 0); }
  100% { transform: translate3d(-2%, -2%, 0); }
}

/* 3. Breathing wash */
@keyframes bg-wash {
  0%   { transform: translate3d(-12%, -8%, 0) scale(1); }
  50%  { transform: translate3d( 14%, 12%, 0) scale(1.15); }
  100% { transform: translate3d(-12%, -8%, 0) scale(1); }
}
body[data-bg="wash"] .bg-fx::after {
  background:
    radial-gradient(46% 38% at 35% 40%,
      color-mix(in oklab, var(--accent, #1D4ED8) 14%, transparent) 0%,
      transparent 70%);
  opacity: 0.6;
  animation: bg-wash 48s ease-in-out infinite;
  mix-blend-mode: multiply;
}
body[data-bg="wash"][data-paper-tone="dark"] .bg-fx::after {
  mix-blend-mode: screen;
  opacity: 0.45;
}

/* 4. Aurora - two huge accent blobs on independent orbits */
.bg-fx .aurora-a, .bg-fx .aurora-b {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: 0;
  filter: blur(80px);
  mix-blend-mode: multiply;
  will-change: transform;
}
body[data-bg="aurora"] .bg-fx .aurora-a,
body[data-bg="aurora"] .bg-fx .aurora-b { opacity: 1; }

body[data-bg="aurora"] .bg-fx .aurora-a {
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--accent, #1D4ED8) 24%, transparent) 0%,
    transparent 60%);
  top: -30%; left: -25%;
  animation: aurora-a 64s ease-in-out infinite;
}
body[data-bg="aurora"] .bg-fx .aurora-b {
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--ink, #1F1B16) 14%, transparent) 0%,
    transparent 60%);
  bottom: -35%; right: -30%;
  animation: aurora-b 88s ease-in-out infinite;
}
@keyframes aurora-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20vw, 14vh) scale(1.12); }
  66%      { transform: translate(-8vw, 22vh) scale(0.94); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-22vw, -18vh) scale(1.18); }
}
body[data-paper-tone="dark"] .bg-fx .aurora-a,
body[data-paper-tone="dark"] .bg-fx .aurora-b {
  mix-blend-mode: screen;
  filter: blur(100px);
}

/* 5. Halftone tide */
.bg-fx .halftone {
  position: absolute;
  inset: -10%;
  opacity: 0;
  background-image: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--ink, #1F1B16) 28%, transparent) 0.85px,
    transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(115deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.95) 50%,
    rgba(0,0,0,0.5) 70%,
    rgba(0,0,0,0.05) 100%);
          mask-image: linear-gradient(115deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.95) 50%,
    rgba(0,0,0,0.5) 70%,
    rgba(0,0,0,0.05) 100%);
  -webkit-mask-size: 220% 220%;
          mask-size: 220% 220%;
}
body[data-bg="halftone"] .bg-fx .halftone {
  opacity: 0.36;
  animation: halftone-tide 70s ease-in-out infinite;
}
body[data-paper-tone="dark"][data-bg="halftone"] .bg-fx .halftone {
  opacity: 0.35;
  background-image: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--ink, #ECE6D8) 80%, transparent) 0.9px,
    transparent 1.6px);
}
@keyframes halftone-tide {
  0%, 100% { -webkit-mask-position:   0%   0%; mask-position:   0%   0%; }
  50%      { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-fx::before,
  .bg-fx::after,
  .bg-fx .aurora-a,
  .bg-fx .aurora-b,
  .bg-fx .halftone { animation: none !important; }
}

@media print {
  .bg-fx { display: none !important; }
}