/* Decorative atmosphere, independent of market state or strategy calculations. */
.storm-hero{padding-top:44px}
.storm-hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 42px}
.storm-hero .explorer{grid-column:1/-1;width:100%;max-width:none}
.storm-art{position:relative;margin:0;min-width:0;isolation:isolate;text-align:center}
.storm-scene{position:relative;aspect-ratio:1122/1402;overflow:hidden;mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent)}
.storm-base{display:block;width:100%;height:auto}
.storm-clouds,.storm-glow,.storm-lightning,.storm-drop,.storm-vapor{position:absolute;pointer-events:none}
.storm-clouds{inset:0;background:url('/assets/distillate-storm.webp') center/100% 100%;mask-image:radial-gradient(ellipse 27% 21% at 50% 57%,#000 30%,transparent 100%);opacity:.75;animation:storm-drift 8s ease-in-out infinite alternate}
.storm-glow{left:28%;top:36%;width:44%;height:42%;background:radial-gradient(ellipse,rgba(47,191,113,.5),transparent 67%);mix-blend-mode:screen;animation:storm-breathe 4.5s ease-in-out infinite}
.storm-lightning{inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 0 7px #2fbf71) drop-shadow(0 0 18px rgba(47,191,113,.6));animation:storm-strike 5.2s ease-in-out infinite}
.storm-lightning.b{transform:scaleX(-1) translate(0,3%);transform-origin:50% 50%;animation:storm-strike 6.7s ease-in-out infinite;animation-delay:-3.1s}
.storm-drop{left:47%;top:74%;width:7%;height:7%;background:radial-gradient(ellipse,rgba(111,255,188,.65),transparent 65%);mix-blend-mode:screen;animation:storm-breathe 3.6s ease-in-out infinite reverse}
/* vapour: the same cloud plate, blurred, rising and thinning, on a slower clock than the drift */
.storm-vapor{inset:0;background:url('/assets/distillate-storm.webp') center/100% 100%;mask-image:radial-gradient(ellipse 22% 24% at 50% 50%,#000 20%,transparent 100%);filter:blur(6px) saturate(1.2);mix-blend-mode:screen;opacity:0;animation:storm-vapor 11s ease-in-out infinite}
.storm-art figcaption{position:relative;margin:-12px 0 16px}
.storm-art figcaption span{display:block;color:var(--steel);font:11px var(--mono);letter-spacing:.24em;margin-bottom:7px}
.storm-art figcaption strong{font:400 clamp(22px,2.2vw,28px) var(--serif);color:var(--ivory)}
.storm-art figcaption em{color:var(--green)}
.storm-toggle{border:1px solid var(--hair);border-radius:20px;background:var(--bg);color:var(--steelbox);padding:7px 14px;font:11px var(--mono);cursor:pointer}
.storm-toggle:hover,.storm-toggle:focus-visible{color:var(--ivory);border-color:var(--green)}
.storm-art:not(.storm-playing) .storm-scene>*{animation-play-state:paused}
@keyframes storm-drift{0%{transform:translate(-16px,10px) rotate(-2deg) scale(1.03);opacity:.45}50%{transform:translate(6px,-8px) rotate(1deg) scale(1.09);opacity:.85}100%{transform:translate(18px,-14px) rotate(2.5deg) scale(1.05);opacity:.6}}
@keyframes storm-breathe{0%,100%{opacity:.25;transform:scale(.88)}50%{opacity:.95;transform:scale(1.18)}}
@keyframes storm-strike{0%,22%,34%,58%,70%,100%{opacity:0}26%{opacity:.95}29%{opacity:.2}31%{opacity:.7}62%{opacity:.85}66%{opacity:.15}}
@keyframes storm-vapor{0%{transform:translate(0,4%) scale(1);opacity:0}25%{opacity:.5}60%{opacity:.35}100%{transform:translate(-3%,-16%) scale(1.25);opacity:0}}
@media(max-width:700px){.storm-hero{padding-top:30px}.storm-hero .grid{grid-template-columns:minmax(0,1fr);gap:20px}.storm-art{width:min(100%,420px);justify-self:center}.storm-scene{margin-top:-12px}.storm-art figcaption{margin-top:-8px}.storm-hero .explorer{grid-column:1}}
@media(prefers-reduced-motion:reduce){.storm-scene>*{animation:none!important}.storm-clouds,.storm-lightning,.storm-glow,.storm-drop,.storm-vapor{display:none}.storm-toggle{display:none!important}}