/* Drop this into your global CSS.
   Result: near-black background with two soft “ink blooms”, subtle depth,
   a faint grain overlay, and an ultra-slow drift. */

:root{
  /* Tweak these 3 first */
  --bg: #1a1a1e;          /* base black */
  --ink1: #1f2a32;        /* deep blue-black */
  --ink2: #2a2030;        /* deep violet-black */
  --ink3: #1d2422;        /* deep green-black */
}

/* Modular gradient overlay - does not affect page layout or structure
   This file is optional and can be removed without breaking the main site */

body{
  /* Only set background properties, no layout-affecting properties */
  background-color: var(--bg);
  background-attachment: fixed;
  /* Layered gradients: keep contrast low, edges soft */
  background-image:
    radial-gradient(1200px 900px at 12% 18%, color-mix(in oklab, var(--ink1) 70%, transparent) 0%, transparent 62%),
    radial-gradient(900px 700px at 82% 28%, color-mix(in oklab, var(--ink2) 65%, transparent) 0%, transparent 58%),
    radial-gradient(1100px 900px at 55% 88%, color-mix(in oklab, var(--ink3) 60%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.00) 30%, rgba(0,0,0,0.10) 100%);
  background-repeat: no-repeat;
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%;
  background-position: 0% 0%, 100% 10%, 50% 100%, 0% 0%;

  /* Ultra-slow drift: feels alive but never "animated" */
  animation: bsep-bg-drift 240s ease-in-out infinite alternate;
}

/* Grain/noise overlay (no external image) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08; /* set 0.04–0.12 */
  mix-blend-mode: overlay;

  /* Tiny SVG noise tile as a data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  transform: translateZ(0);
}

/* Optional: add a second, even subtler grain pass to avoid "static" feel */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.18), transparent 45%);
  animation: bsep-bg-breathe 360s ease-in-out infinite alternate;
}

/* Remove this rule - layout should be handled by main stylesheet only */

@keyframes bsep-bg-drift{
  0%{
    background-position: 0% 0%, 100% 10%, 50% 100%, 0% 0%;
  }
  100%{
    background-position: 12% 8%, 86% 18%, 55% 88%, 0% 0%;
  }
}
/* WARNING: Do not add 'filter', 'transform', 'perspective', 'will-change', or 'contain'
   properties to the body element or this animation. These properties create a new containing
   block which will break position:fixed elements (like the header logo and title). */

@keyframes bsep-bg-breathe{
  0%{ transform: translate3d(0,0,0); opacity: 0.028; }
  100%{ transform: translate3d(0,-8px,0); opacity: 0.038; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body, body::after { animation: none !important; }
}