/* Ambient layer: sits behind all content (z-index:-1), never interactive. */
.atmo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.atmo>*{position:absolute;pointer-events:none}
/* candle glow at top: flickers via opacity only */
.atmo-glow{left:-20%;right:-20%;top:-25vh;height:70vh;
  background:radial-gradient(50% 50% at 50% 40%,rgba(240,160,64,.14),rgba(210,69,47,.05) 55%,transparent 75%);
  animation:atmo-flicker 4.7s steps(1,end) infinite, atmo-sway 11s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes atmo-flicker{0%{opacity:.85}9%{opacity:1}14%{opacity:.78}22%{opacity:.95}37%{opacity:.88}48%{opacity:1}55%{opacity:.8}63%{opacity:.93}78%{opacity:.86}88%{opacity:1}}
@keyframes atmo-sway{from{transform:translateX(-2%) scale(1)}to{transform:translateX(2%) scale(1.04)}}
/* fog bands: wide blurred ellipses drifting slowly */
.atmo-fog{left:-50%;width:200%;height:45vh;opacity:.5;will-change:transform;
  background:radial-gradient(30% 40% at 25% 50%,rgba(170,140,170,.07),transparent 70%),radial-gradient(25% 35% at 70% 55%,rgba(150,120,150,.06),transparent 70%)}
.atmo-fog.f1{bottom:-8vh;animation:atmo-drift 60s linear infinite alternate}
.atmo-fog.f2{bottom:22vh;opacity:.35;animation:atmo-drift 85s linear infinite alternate-reverse}
@keyframes atmo-drift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
/* vignette */
.atmo-vig{inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
/* grain: tiny svg noise, stepped jitter */
.atmo-grain{inset:-50%;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:atmo-grain 1.2s steps(4) infinite}
@keyframes atmo-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.atmo canvas{inset:0;width:100%;height:100%}
/* bat: occasional silhouette, toggled by JS */
.atmo-bat{top:0;left:0;width:34px;height:16px;opacity:0;color:#050305;will-change:transform,opacity}
.atmo-bat svg{display:block;width:100%;height:100%;animation:atmo-flap .18s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes atmo-flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.atmo-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .atmo *,.atmo *::before{animation:none!important}
  .atmo-bat{display:none}
}