/* v2.5.1 optional background treatments. Opt-in via html[data-bg=…]; default unchanged.
   All layers sit behind content (z-index:-1, pointer-events:none), low contrast, transform/opacity only. */
html[data-bg] body { position: relative; isolation: isolate; }
html[data-bg] .site-main { background: transparent; }
html[data-bg] .bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* a) paper grain + ruled notebook */
html[data-bg=notebook] body { background-image:
  linear-gradient(90deg, transparent 0 calc(6vw - 1px), color-mix(in srgb, var(--accent) 22%, transparent) calc(6vw - 1px) 6vw, transparent 6vw),
  repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--ink) 7%, transparent) 31px 32px),
  radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px);
  background-size: auto, auto, 5px 5px; background-attachment: fixed, scroll, scroll; }
/* b) soft gradient mesh */
html[data-bg=mesh] .bg-layer::before, html[data-bg=mesh] .bg-layer::after { content:""; position:absolute; width:70vmax; height:70vmax; border-radius:50%; opacity:.85; will-change: transform; contain: strict; animation: bgMesh 38s ease-in-out infinite alternate; }
html[data-bg=mesh] .bg-layer::before { background: radial-gradient(closest-side, var(--accent-soft), transparent); top:-25vmax; right:-15vmax; }
html[data-bg=mesh] .bg-layer::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, var(--desk)), transparent); bottom:-35vmax; left:-20vmax; opacity:.28; animation-duration: 46s; animation-direction: alternate-reverse; }
@keyframes bgMesh { to { transform: translate3d(-12vmax, 10vmax, 0) scale(1.15); } }
/* c) blueprint dot grid with parallax drift */
html[data-bg=blueprint] .bg-layer::before { content:""; position:absolute; inset:-200px 0 -200px 0; will-change: transform; transform: translate3d(0, calc(var(--bg-y, 0) * -0.15px), 0);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 26%, transparent) 1.2px, transparent 1.6px),
    linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px; }
/* d) drifting CV-paper silhouettes & glyphs */
html[data-bg=paper] .bg-layer i { position:absolute; display:block; width:120px; height:160px; border-radius:6px; background: var(--sheet); opacity:.55; box-shadow: 0 10px 30px -18px rgba(0,0,0,.4);
  background-image: linear-gradient(var(--rule) 0 0), repeating-linear-gradient(180deg, transparent 0 12px, color-mix(in srgb, var(--ink) 10%, transparent) 12px 14px);
  background-size: 50% 8px, 70% 100%; background-position: 14px 16px, 14px 36px; background-repeat: no-repeat; will-change: transform;
  transform: translate3d(0, calc(var(--bg-y, 0) * var(--k, -.1) * 1px), 0) rotate(var(--r, -6deg)); }
html[data-bg=paper] .bg-layer b { position:absolute; font: italic 400 9rem/1 var(--serif); color: color-mix(in srgb, var(--accent) 10%, transparent); will-change: transform; transform: translate3d(0, calc(var(--bg-y, 0) * var(--k, -.06) * 1px), 0); }
/* e) warm desk-lamp vignette that follows the cursor */
html[data-bg=lamp] .bg-layer::before { content:""; position:absolute; inset:0; background: radial-gradient(42vmax 42vmax at var(--mx, 70%) var(--my, 20%), rgba(255,214,150,.30), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(60,40,15,.16)); transition: background-position .2s; }
html[data-mode=dark][data-bg=lamp] .bg-layer::before { background: radial-gradient(42vmax 42vmax at var(--mx, 70%) var(--my, 20%), rgba(255,190,110,.12), transparent 70%), radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: reduce) { html[data-bg] .bg-layer *, html[data-bg] .bg-layer::before, html[data-bg] .bg-layer::after { animation: none !important; transform: none !important; } }
@media (max-width: 760px) { html[data-bg=paper] .bg-layer i:nth-child(n+3), html[data-bg=paper] .bg-layer b { display:none; }  }
html[data-bg] .bg-layer.is-paused::before, html[data-bg] .bg-layer.is-paused::after { animation-play-state: paused; }