/*
 * Obsidian scroll-reactive background (Item 14, 2026-07-02).
 *
 * 3 large, soft, near-black orbs with a faint specular highlight (radial
 * gradients suggesting polished stone / liquid metal), fixed behind all
 * content at very low contrast against the obsidian bg. A per-orb translateY
 * tied to scroll (20–40% of scroll speed, set by obsidian-bg.js) creates
 * gentle depth. Content readability is never affected: the layer is
 * position:fixed, z-index below everything, pointer-events:none.
 *
 * prefers-reduced-motion: parallax is disabled (orbs stay put). Mobile: fewer
 * orbs + smaller radii so it stays ambient, not heavy.
 *
 * No image assets, no WebGL. Just gradients + one transform per orb per frame.
 */

.obsidian-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict; /* isolate paint — never triggers layout on the page */
}

.obsidian-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
  /* base: dark charcoal sphere with an off-center soft highlight */
  opacity: 0.9;
}

html.dark .obsidian-orb {
  background:
    radial-gradient(circle at 35% 30%, rgba(60, 62, 74, 0.55), rgba(26, 26, 31, 0.9) 45%, rgba(10, 10, 13, 0) 72%),
    radial-gradient(circle at 70% 75%, rgba(120, 120, 130, 0.06), rgba(10, 10, 13, 0) 60%);
}

/* Light theme: the orbs invert to soft pale shapes so the effect still reads
   as ambient depth rather than dark blobs on a light page. */
html.light .obsidian-orb {
  opacity: 0.7;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.6) 45%, rgba(247, 248, 250, 0) 72%),
    radial-gradient(circle at 70% 75%, rgba(120, 120, 130, 0.05), rgba(247, 248, 250, 0) 60%);
}

/* Positions/sizes — placed to sit behind content gutters, not dead-center */
.obsidian-orb.orb-1 { width: 620px; height: 620px; top: -120px; left: -140px; }
.obsidian-orb.orb-2 { width: 520px; height: 520px; top: 38vh;   right: -160px; left: auto; }
.obsidian-orb.orb-3 { width: 460px; height: 460px; top: 120vh;  left: 8vw; }

@media (max-width: 720px) {
  .obsidian-orb { filter: blur(48px); }
  .obsidian-orb.orb-1 { width: 380px; height: 380px; }
  .obsidian-orb.orb-2 { width: 340px; height: 340px; }
  .obsidian-orb.orb-3 { display: none; } /* keep it light on small screens */
}

@media (prefers-reduced-motion: reduce) {
  .obsidian-orb { transform: none !important; }
}