/* The sky is entirely procedural. Gradients also provide the no-JS/WebGL fallback. */
.hero {
    background: #09121d;
}

.weather-scene {
    contain: strict;
    background: linear-gradient(180deg, #131f30, #223747 48%, #0a171f);
}

.storm-sky,
.storm-atmosphere,
.storm-particles,
.storm-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.storm-sky {
    background:
        radial-gradient(ellipse at 19% -8%, #0a111d 0 19%, transparent 45%),
        radial-gradient(ellipse at 65% 0%, #0a111c 0 18%, transparent 40%),
        radial-gradient(ellipse at 94% 12%, #172333 0 10%, transparent 37%),
        radial-gradient(ellipse at 32% 28%, #344756 0, transparent 48%),
        radial-gradient(ellipse at 78% 35%, #647383 0, transparent 49%),
        linear-gradient(#172636, #11222e 65%, #0b171f);
}

.storm-atmosphere {
    opacity: 0;
}

.weather-scene[data-clouds="webgl"] .storm-atmosphere {
    opacity: 1;
}

.storm-mist {
    position: absolute;
    left: -40%;
    width: 180%;
    height: 48%;
    background:
        radial-gradient(ellipse at 25% 48%, rgba(118, 152, 173, .14), transparent 42%),
        radial-gradient(ellipse at 76% 58%, rgba(111, 141, 164, .13), transparent 36%);
    animation: stormMistDrift 24s ease-in-out infinite alternate;
    animation-play-state: paused;
    will-change: transform;
}

.storm-mist-far {
    top: 26%;
    opacity: .65;
}

.storm-mist-near {
    bottom: -8%;
    height: 37%;
    opacity: .8;
    animation-duration: 15s;
    animation-delay: -9s;
}

.weather-scene[data-running="true"] .storm-mist {
    animation-play-state: running;
}

/* Keep the headline readable while leaving the exposed sky richly illuminated. */
.storm-vignette {
    background:
        linear-gradient(90deg, rgba(5, 13, 20, .62), rgba(5, 13, 20, .34) 42%, transparent 73%),
        linear-gradient(0deg, #081117, transparent 35%),
        radial-gradient(ellipse at 60% 30%, transparent 28%, rgba(3, 10, 16, .24));
}

.storm-toggle {
    position: absolute;
    top: 1.35rem;
    right: clamp(1rem, 3vw, 3rem);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 40px;
    padding: .55rem .8rem;
    border: 1px solid rgba(193, 220, 240, .24);
    border-radius: 999px;
    color: #dce9f2;
    background: rgba(6, 16, 25, .6);
    font: 500 .75rem/1.2 "Outfit", system-ui, sans-serif;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.storm-toggle[hidden] {
    display: none;
}

.storm-toggle:hover {
    background: rgba(23, 44, 60, .92);
    border-color: rgba(193, 220, 240, .55);
}

.storm-toggle:focus-visible {
    outline: 2px solid #78d4ff;
    outline-offset: 4px;
}

.storm-toggle-icon {
    width: 9px;
    height: 10px;
    border-inline: 3px solid currentColor;
}

.storm-toggle[data-paused="true"] .storm-toggle-icon {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 8px solid currentColor;
}

@keyframes stormMistDrift {
    from { transform: translate3d(8%, 2%, 0) scaleY(.9); }
    to { transform: translate3d(-8%, -3%, 0) scaleY(1.1); }
}

@media (max-width: 767.98px) {
    .storm-vignette {
        background:
            linear-gradient(90deg, rgba(5, 13, 20, .58), rgba(5, 13, 20, .12)),
            linear-gradient(0deg, #081117, transparent 50%);
    }

    .storm-toggle {
        top: .65rem;
        min-height: 36px;
        font-size: .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storm-mist { animation: none; }
}