ambient-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;background:radial-gradient(ellipse at 0% 55%,rgb(var(--tone-491123) / .045),transparent 60%)}ambient-atmosphere canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.72}.ambient-glow{position:absolute;inset:-25%;background:radial-gradient(ellipse 36% 30% at 13% 66%,rgb(var(--tone-66162f) / .09),transparent 72%),radial-gradient(ellipse 30% 38% at 88% 33%,rgb(var(--tone-54152c) / .065),transparent 76%);animation:ambient-glow 38s ease-in-out infinite alternate}.ambient-smoke{position:absolute;width:82vw;height:52vw;min-height:400px;max-height:900px;left:-36%;bottom:-18%;opacity:.3;filter:blur(35px);background:radial-gradient(ellipse at 42% 45%,rgb(var(--tone-7d707d) / .055),transparent 38%),radial-gradient(ellipse at 68% 68%,rgb(var(--tone-6b2741) / .065),transparent 50%),radial-gradient(ellipse at 37% 58%,rgb(var(--tone-796c77) / .045),transparent 54%);border-radius:48% 61% 53% 42%;animation:smoke-drift 43s ease-in-out infinite alternate}.ambient-smoke--second{left:auto;right:-31%;bottom:28%;width:70vw;opacity:.25;animation-duration:57s;animation-delay:-19s;rotate:19deg}.ambient-smoke--third{left:20%;bottom:-25%;opacity:.18;width:90vw;animation-duration:63s;animation-delay:-31s;rotate:-16deg}@keyframes smoke-drift{from{transform:translate(-20px,28px) scale(1) rotate(-2deg)}to{transform:translate(45px,-22px) scale(1.12) rotate(3deg)}}@keyframes ambient-glow{from{transform:translate(-10px,8px);opacity:.55}to{transform:translate(20px,-14px);opacity:.9}}@media(max-width:760px){.ambient-smoke{filter:blur(22px);opacity:.2}.ambient-smoke--third{display:none}ambient-atmosphere canvas{opacity:.55}}@media(prefers-reduced-motion:reduce){ambient-atmosphere *{animation:none!important}}
/* Foreground atmosphere stays visible over the portrait and smoked glass. */
ambient-atmosphere{z-index:2;background:none}
ambient-atmosphere canvas{opacity:.9}
.ambient-glow{background:radial-gradient(ellipse 32% 28% at 10% 64%,rgb(var(--tone-7f183a) / .18),transparent 72%),radial-gradient(ellipse 28% 36% at 90% 28%,rgb(var(--tone-6d1939) / .14),transparent 76%);animation-duration:12s}
.ambient-smoke{opacity:.72;filter:blur(22px);left:-24%;bottom:-8%;background:radial-gradient(ellipse 42% 15% at 40% 45%,rgb(var(--tone-a08ea0) / .2),transparent 80%),radial-gradient(ellipse 34% 12% at 64% 57%,rgb(var(--tone-7e2e4d) / .23),transparent 80%),radial-gradient(ellipse 32% 18% at 35% 64%,rgb(var(--tone-8f7f91) / .14),transparent 80%);animation:smoke-flow 14s ease-in-out infinite alternate}
.ambient-smoke--second{left:auto;right:-30%;bottom:20%;opacity:.52;animation-duration:19s;animation-delay:-8s}
.ambient-smoke--third{left:10%;bottom:-30%;opacity:.4;animation-duration:23s;animation-delay:-12s}
@keyframes smoke-flow{0%{transform:translate(-65px,45px) scale(.9,1) rotate(-8deg)}50%{transform:translate(10px,-20px) scale(1.08,.87) rotate(1deg)}100%{transform:translate(95px,-65px) scale(1.2,1.1) rotate(8deg)}}
@keyframes ambient-glow{from{transform:translate(-35px,25px) scale(.95);opacity:.5}to{transform:translate(60px,-35px) scale(1.12);opacity:1}}
@media(max-width:760px){ambient-atmosphere canvas{opacity:.75}.ambient-smoke{opacity:.48;filter:blur(20px)}.ambient-smoke--third{display:none}}
@media(prefers-reduced-motion:reduce){ambient-atmosphere *{animation:none!important}}

/* On work pages, glass reveals the atmosphere while opaque artwork stays unobstructed.
   main already forms a stacking context at z-index:1; keep every ambient effect below it. */
body.portfolio-page ambient-atmosphere,body.gallery-focus ambient-atmosphere{z-index:0}