/* E·SYNX backdrops (backdrop.js). Decoration behind the page; content stays above (.wrap z-index:1). */
#bd{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
#bd[class^="bd-"]{opacity:.55}
#bd i,#bd b{position:absolute;display:block}
.bd-svg{position:absolute;inset:0;width:100%;height:100%}
#bd.bd-steam{background:linear-gradient(180deg,#d9cdb8 0%,#b9a98e 55%,#8c7a60 100%)}
#bd.bd-street{background:linear-gradient(180deg,#c9bfae 0%,#a89a83 60%,#6f604c 100%)}
#bd.bd-parlour{background:radial-gradient(ellipse at 22% 70%,rgba(255,200,120,.45),transparent 45%),linear-gradient(180deg,#d6c3a3,#a68a66)}
#bd.bd-smog{background:linear-gradient(180deg,#cfc69a 0%,#ada476 55%,#7c7552 100%)}
#bd.bd-kitchen{background:linear-gradient(180deg,#d7d2b4,#a9a585)}
#bd.bd-today{background:linear-gradient(180deg,#cfe1ea 0%,#e6eef0 55%,#d9e4d6 100%)}
.bd-puff{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(245,240,230,.85),rgba(245,240,230,0) 70%);animation:bdPuff 12s linear infinite}
@keyframes bdPuff{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.9}100%{transform:translate(60px,-55vh) scale(2.6);opacity:0}}
.bd-lamp{top:14%;width:110px;height:110px;margin-left:-55px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,120,.75),rgba(255,205,120,0) 65%);animation:bdLamp 4.5s ease-in-out infinite}
@keyframes bdLamp{0%,100%{opacity:.75}40%{opacity:.95}55%{opacity:.6}70%{opacity:.9}}
.bd-fog{left:-60%;width:220%;height:28%;background:radial-gradient(ellipse at center,rgba(235,228,210,.75),rgba(235,228,210,0) 70%);animation:bdFog 80s linear infinite}
#bd.bd-smog .bd-fog{background:radial-gradient(ellipse at center,rgba(220,210,150,.85),rgba(220,210,150,0) 70%)}
@keyframes bdFog{from{transform:translateX(-15%)}to{transform:translateX(15%)}}
.bd-soot{top:-4%;width:3px;height:3px;border-radius:50%;background:rgba(40,30,20,.55);animation:bdSoot 16s linear infinite}
@keyframes bdSoot{from{transform:translate(0,0)}to{transform:translate(40px,108vh)}}
.bd-win{animation:bdWin 7s ease-in-out infinite}
@keyframes bdWin{0%,100%{opacity:.9}50%{opacity:.45}}
.bd-bus{left:-160px;width:140px;height:46px;border-radius:8px;background:rgba(110,30,25,.35);animation:bdBus 34s linear infinite}
.bd-bus b{top:28px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,150,.95),rgba(255,230,150,0) 70%)}
.bd-bus b:first-child{right:-6px}.bd-bus b:last-child{right:16px}
@keyframes bdBus{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 320px))}}
.bd-window{position:absolute;left:62%;top:15%;width:26%;height:55%;overflow:hidden}
.bd-window.k{left:56%;top:13.3%;width:30%;height:50%}
.bd-wfog{inset:0 -60%;background:radial-gradient(ellipse at 40% 50%,rgba(225,220,205,.85),rgba(225,220,205,0) 65%);animation:bdFog 26s ease-in-out infinite alternate}
.bd-wfog.b{animation-duration:38s;animation-direction:alternate-reverse;opacity:.7}
.bd-wfog.y{background:radial-gradient(ellipse at 40% 50%,rgba(215,205,130,.9),rgba(215,205,130,0) 65%)}
.bd-radio{animation:bdLamp 2.6s ease-in-out infinite}
.bd-glow{width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,100,.5),rgba(255,190,100,0) 65%);animation:bdLamp 5s ease-in-out infinite}
.bd-cloud{left:-30%;width:300px;height:80px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);animation:bdCloud 100s linear infinite}
@keyframes bdCloud{from{transform:translateX(0)}to{transform:translateX(160vw)}}
.bd-tree{animation:bdTree 6s ease-in-out infinite}
@keyframes bdTree{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.2deg)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #bd[class^="bd-"]{opacity:.22}}
:root[data-theme="dark"] #bd[class^="bd-"]{opacity:.22}
@media (prefers-reduced-motion: reduce){#bd *{animation:none!important}}
@media print{#bd{display:none}}
/* keep text readable: the page column gets a soft veil when a backdrop is showing (solid where color-mix is not supported) */
body:has(#bd[class^="bd-"]) main{background:var(--bg);background:color-mix(in srgb,var(--bg) 84%,transparent);min-height:100vh;box-sizing:border-box}
/* tablets and phones: the page column fills the screen, so the veil is lighter there and cards keep their own background */
@media (max-width:820px){body:has(#bd[class^="bd-"]) main{background:color-mix(in srgb,var(--bg) 55%,transparent)}#bd[class^="bd-"]{opacity:.7}}