/* backdrop.css: the living backdrop behind windows + icons (v3).
   full tier  : backdrop-gl.js draws the whole scene into one canvas (depth layers, pointer light, hood turn, wires,
                smoke, ripple). The DOM composite is hidden under it.
   lite tier  : the composite (assets/ph3/still-1440.webp, exported from the full tier) with CSS parallax.
   still/phone: the composite, static. No canvas.
   off/pending: no art path; the underlying OS wallpaper is black as well. */
#os-bd { position:absolute; inset:0; pointer-events:none; overflow:hidden;            /* no z-index/contain: blends reach the wall */
  --bd-acc:var(--rvls-color-accent-magenta); --px:0; --py:0; }
html[data-visuals="off"], html[data-visuals="off"] body { background:#000; }
html[data-visuals="off"] #os { background:#000 !important; }
html[data-visuals="off"] #os-bd, html[data-setup="pending"] #os-bd { display:none; }
html[data-setup="pending"] #os { background:#000; }
html[data-skin="blog"] #os-bd { --bd-acc:#ff2e88; }

/* ---------- rotating wallpaper: two stacked layers crossfading (full tier, desktop only) ---------- */
.bd-wall { position:absolute; inset:0; display:none; opacity:0; background:var(--bd-tint, #8d8d8d) center/cover no-repeat;
  background-blend-mode:var(--bd-wblend, normal);
  transition:opacity var(--rvls-motion-duration-ceremonial) var(--rvls-motion-ease-standard); }
html[data-skin="rice"] #os-bd { --bd-tint:#3a3a3e; --bd-wblend:multiply; }
html[data-skin="noir"] #os-bd { --bd-tint:#2a2a2e; --bd-wblend:multiply; }
html[data-skin="cde"] #os-bd { --bd-tint:#b8ae8c; --bd-wblend:multiply; }
html[data-skin="photon"] #os-bd { --bd-tint:#c3cbe0; --bd-wblend:multiply; }
html[data-skin="blog"] #os-bd { --bd-tint:#111; --bd-wblend:luminosity; }
html[data-motion="full"]:not([data-mode="phone"]) #os-bd.bd-cycle .bd-wall { display:block; }
.bd-wall.on { opacity:1; }
.bd-wall.cut { transition:none; }

/* ---------- the composite: still / lite / phone (and the full tier until WebGL is up, or if it fails) ---------- */
.bd-m.bd-still { position:absolute; inset:-24px; opacity:.94;
  background:url(/assets/ph3/still-1440.webp) center/cover no-repeat;
  translate:calc(var(--px) * 1.6px) calc(var(--py) * 1.6px); }
html[data-motion="lite"] .bd-still { transition:translate var(--rvls-motion-duration-slow) var(--rvls-motion-ease-standard); }
html[data-mode="phone"] .bd-still { inset:0; translate:none; background-position:76% center; }

/* ---------- WebGL owns the scene ---------- */
#os-bd .bd-gl-canvas { position:absolute; inset:0; width:100%; height:100%; }
#os-bd.bd-gl .bd-still { visibility:hidden; }

/* reading first: hidden tab, maximized or covering windows freeze every loop where it stands */
#os-bd.bd-paused *, #os-bd.bd-paused *::before, #os-bd.bd-paused *::after { animation-play-state:paused !important; }

/* ---------- tiers and modes ---------- */
html[data-motion="still"] #os-bd *, html[data-motion="still"] #os-bd *::before, html[data-motion="still"] #os-bd *::after { animation:none !important; transition:none !important; translate:none !important; }
@media (prefers-reduced-motion:reduce) { #os-bd *, #os-bd *::before, #os-bd *::after { animation:none !important; transition:none !important; translate:none !important; } }

/* the bonfire wallpaper replaces the collage backdrop entirely (js/os/backdrop-live.js draws its live layer) */
#os[data-wall="bonfire"] > #os-bd { display:none; }