/* =======================================================
   SOFON WEATHER – WEATHER BACKGROUND ENGINE 5.6
   Jednotný systém animovaného pozadí a meteorologických efektů.
======================================================= */

.background-layer,
.background-overlay,
.weather-effects {
    position: fixed;
    inset: 0;
}

.background-layer {
    --sky-start: #0e2036;
    --sky-middle: #244d68;
    --sky-end: #6e9eb2;

    --glow-one: rgba(102, 193, 219, 0.34);
    --glow-two: rgba(93, 119, 193, 0.28);
    --glow-three: rgba(255, 220, 138, 0.08);

    --celestial-color: rgba(255, 225, 142, 0.18);
    --celestial-opacity: 0.25;

    z-index: -3;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 14% 11%,
            var(--glow-one),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 84% 18%,
            var(--glow-two),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 52% 88%,
            var(--glow-three),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            var(--sky-start) 0%,
            var(--sky-middle) 50%,
            var(--sky-end) 100%
        );

    background-size:
        150% 150%,
        165% 165%,
        180% 180%,
        150% 150%;

    background-position:
        0% 0%,
        100% 5%,
        48% 100%,
        0% 50%;

    transform: scale(1.08);

    animation:
        weather-background-flow 28s ease-in-out infinite alternate,
        weather-background-breathe 16s ease-in-out infinite alternate;

    transition:
        background 1200ms ease,
        filter 900ms ease;

    will-change:
        background-position,
        filter;
}

.background-layer::before,
.background-layer::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

/* Rozptýlený sluneční / měsíční svit bez ostrých hran. */
.background-layer::before {
    top: -22vh;
    left: -18vw;

    width: 78vw;
    height: 78vw;

    min-width: 620px;
    min-height: 620px;

    opacity: var(--celestial-opacity);

    background:
        radial-gradient(
            circle,
            var(--celestial-color) 0%,
            color-mix(
                in srgb,
                var(--celestial-color) 48%,
                transparent
            ) 20%,
            transparent 68%
        );

    filter: blur(18px);

    animation:
        weather-celestial-drift
        35s
        ease-in-out
        infinite alternate;
}

/* Jemný atmosférický pohyb, který dává gradientu hloubku. */
.background-layer::after {
    inset: -22%;

    opacity: 0.44;

    background:
        radial-gradient(
            ellipse at 27% 38%,
            rgba(255, 255, 255, 0.08),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 74% 63%,
            rgba(160, 207, 232, 0.08),
            transparent 48%
        );

    filter: blur(34px);

    animation:
        weather-atmosphere-drift
        42s
        ease-in-out
        infinite alternate;
}

.background-overlay {
    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% -15%,
            rgba(255, 255, 255, 0.065),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            rgba(4, 11, 22, 0.04),
            rgba(4, 12, 24, 0.32)
        );

    transition:
        background 900ms ease,
        opacity 900ms ease;
}

/* =======================================================
   PALETY – TMAVÝ REŽIM
======================================================= */

html[data-theme="dark"]
body[data-daytime="day"]
.background-layer {
    --sky-start: #15314c;
    --sky-middle: #356985;
    --sky-end: #78a9bb;
    --glow-one: rgba(88, 192, 221, 0.38);
    --glow-two: rgba(104, 130, 202, 0.25);
    --glow-three: rgba(225, 235, 240, 0.08);
}

html[data-theme="dark"]
body[data-daytime="night"]
.background-layer {
    --sky-start: #020711;
    --sky-middle: #0b1830;
    --sky-end: #1b3350;
    --glow-one: rgba(61, 98, 152, 0.24);
    --glow-two: rgba(103, 103, 192, 0.18);
    --glow-three: rgba(61, 89, 132, 0.12);
    --celestial-color: rgba(205, 219, 255, 0.2);
    --celestial-opacity: 0.34;
}

html[data-theme="dark"]
body:is(
    [data-weather="clear"],
    [data-weather="mainly-clear"]
)[data-daytime="day"]
.background-layer {
    --sky-start: #17649a;
    --sky-middle: #3c9bc1;
    --sky-end: #8ed5df;
    --glow-one: rgba(255, 221, 102, 0.65);
    --glow-two: rgba(155, 226, 243, 0.38);
    --glow-three: rgba(255, 233, 166, 0.12);
    --celestial-color: rgba(255, 219, 95, 0.68);
    --celestial-opacity: 0.72;
}

html[data-theme="dark"]
body:is(
    [data-weather="clear"],
    [data-weather="mainly-clear"]
)[data-daytime="night"]
.background-layer {
    --sky-start: #01050d;
    --sky-middle: #08152c;
    --sky-end: #16294d;
    --glow-one: rgba(55, 82, 143, 0.22);
    --glow-two: rgba(108, 108, 195, 0.16);
    --glow-three: rgba(68, 92, 145, 0.1);
    --celestial-color: rgba(219, 228, 255, 0.26);
    --celestial-opacity: 0.38;
}

html[data-theme="dark"]
body[data-weather="partly-cloudy"]
.background-layer {
    --sky-start: #16334d;
    --sky-middle: #3c6075;
    --sky-end: #7b96a5;
    --glow-one: rgba(220, 198, 133, 0.2);
    --glow-two: rgba(112, 151, 187, 0.28);
    --glow-three: rgba(165, 183, 193, 0.1);
    --celestial-opacity: 0.25;
}

html[data-theme="dark"]
body[data-weather="overcast"]
.background-layer {
    --sky-start: #17222e;
    --sky-middle: #3d4e5d;
    --sky-end: #73838e;
    --glow-one: rgba(170, 187, 198, 0.12);
    --glow-two: rgba(101, 121, 138, 0.18);
    --glow-three: rgba(195, 205, 211, 0.07);
    --celestial-opacity: 0.08;
}

html[data-theme="dark"]
body[data-weather="fog"]
.background-layer {
    --sky-start: #3c4c55;
    --sky-middle: #718087;
    --sky-end: #a5afb2;
    --glow-one: rgba(232, 239, 241, 0.2);
    --glow-two: rgba(194, 207, 212, 0.2);
    --glow-three: rgba(238, 242, 244, 0.12);
    --celestial-opacity: 0.06;
}

html[data-theme="dark"]
body:is(
    [data-weather="drizzle"],
    [data-weather="freezing-drizzle"],
    [data-weather="light-rain"],
    [data-weather="rain"],
    [data-weather="heavy-rain"],
    [data-weather="freezing-rain"],
    [data-weather="light-showers"],
    [data-weather="showers"],
    [data-weather="heavy-showers"]
)
.background-layer {
    --sky-start: #07131f;
    --sky-middle: #1d3649;
    --sky-end: #4d6675;
    --glow-one: rgba(72, 116, 151, 0.24);
    --glow-two: rgba(76, 93, 123, 0.2);
    --glow-three: rgba(138, 158, 170, 0.08);
    --celestial-opacity: 0.04;
}

html[data-theme="dark"]
body:is(
    [data-weather="thunderstorm"],
    [data-weather="hail-thunderstorm"]
)
.background-layer {
    --sky-start: #030611;
    --sky-middle: #12182a;
    --sky-end: #35384c;
    --glow-one: rgba(97, 79, 169, 0.22);
    --glow-two: rgba(45, 57, 91, 0.28);
    --glow-three: rgba(113, 95, 167, 0.09);
    --celestial-opacity: 0.02;
}

html[data-theme="dark"]
body:is(
    [data-weather="light-snow"],
    [data-weather="snow"],
    [data-weather="heavy-snow"],
    [data-weather="snow-showers"]
)
.background-layer {
    --sky-start: #425865;
    --sky-middle: #788d99;
    --sky-end: #b6c5cb;
    --glow-one: rgba(235, 245, 249, 0.22);
    --glow-two: rgba(176, 208, 222, 0.2);
    --glow-three: rgba(245, 249, 251, 0.14);
    --celestial-opacity: 0.08;
}

/* =======================================================
   PALETY – SVĚTLÝ REŽIM
======================================================= */

html[data-theme="light"]
body[data-daytime="day"]
.background-layer {
    --sky-start: #9bcbdc;
    --sky-middle: #c7e2ea;
    --sky-end: #edf5f7;
    --glow-one: rgba(255, 225, 143, 0.42);
    --glow-two: rgba(106, 183, 211, 0.26);
    --glow-three: rgba(255, 255, 255, 0.28);
    --celestial-color: rgba(255, 206, 72, 0.5);
    --celestial-opacity: 0.38;
}

html[data-theme="light"]
body[data-daytime="night"]
.background-layer {
    --sky-start: #8fa8bf;
    --sky-middle: #c0d0df;
    --sky-end: #edf2f6;
    --glow-one: rgba(93, 112, 166, 0.18);
    --glow-two: rgba(135, 146, 190, 0.2);
    --glow-three: rgba(255, 255, 255, 0.22);
    --celestial-color: rgba(105, 119, 169, 0.2);
    --celestial-opacity: 0.24;
}

html[data-theme="light"]
body:is(
    [data-weather="clear"],
    [data-weather="mainly-clear"]
)[data-daytime="day"]
.background-layer {
    --sky-start: #7dc5df;
    --sky-middle: #b8dfeb;
    --sky-end: #eef8f9;
    --glow-one: rgba(255, 205, 58, 0.6);
    --glow-two: rgba(69, 166, 202, 0.22);
    --glow-three: rgba(255, 244, 197, 0.28);
    --celestial-color: rgba(255, 193, 28, 0.66);
    --celestial-opacity: 0.72;
}

html[data-theme="light"]
body:is(
    [data-weather="clear"],
    [data-weather="mainly-clear"]
)[data-daytime="night"]
.background-layer {
    --sky-start: #829bb8;
    --sky-middle: #b8c9dc;
    --sky-end: #eef2f6;
    --glow-one: rgba(72, 93, 148, 0.18);
    --glow-two: rgba(105, 115, 167, 0.18);
    --glow-three: rgba(255, 255, 255, 0.18);
    --celestial-color: rgba(74, 90, 139, 0.23);
    --celestial-opacity: 0.32;
}

html[data-theme="light"]
body[data-weather="partly-cloudy"]
.background-layer {
    --sky-start: #99bfce;
    --sky-middle: #c4d8df;
    --sky-end: #eef3f4;
    --glow-one: rgba(239, 192, 90, 0.3);
    --glow-two: rgba(86, 132, 160, 0.19);
    --glow-three: rgba(255, 255, 255, 0.22);
    --celestial-opacity: 0.28;
}

html[data-theme="light"]
body[data-weather="overcast"]
.background-layer {
    --sky-start: #9eafb8;
    --sky-middle: #c8d2d7;
    --sky-end: #eef1f2;
    --glow-one: rgba(95, 113, 124, 0.13);
    --glow-two: rgba(118, 132, 141, 0.14);
    --glow-three: rgba(255, 255, 255, 0.18);
    --celestial-opacity: 0.06;
}

html[data-theme="light"]
body[data-weather="fog"]
.background-layer {
    --sky-start: #a8b6bc;
    --sky-middle: #d2dadd;
    --sky-end: #f0f2f2;
    --glow-one: rgba(74, 92, 103, 0.11);
    --glow-two: rgba(106, 121, 129, 0.12);
    --glow-three: rgba(255, 255, 255, 0.24);
    --celestial-opacity: 0.04;
}

html[data-theme="light"]
body:is(
    [data-weather="drizzle"],
    [data-weather="freezing-drizzle"],
    [data-weather="light-rain"],
    [data-weather="rain"],
    [data-weather="heavy-rain"],
    [data-weather="freezing-rain"],
    [data-weather="light-showers"],
    [data-weather="showers"],
    [data-weather="heavy-showers"]
)
.background-layer {
    --sky-start: #829cac;
    --sky-middle: #b8c9d2;
    --sky-end: #e4ebee;
    --glow-one: rgba(48, 84, 111, 0.16);
    --glow-two: rgba(70, 94, 116, 0.16);
    --glow-three: rgba(255, 255, 255, 0.18);
    --celestial-opacity: 0.03;
}

html[data-theme="light"]
body:is(
    [data-weather="thunderstorm"],
    [data-weather="hail-thunderstorm"]
)
.background-layer {
    --sky-start: #7b8294;
    --sky-middle: #aeb5c2;
    --sky-end: #d8dce3;
    --glow-one: rgba(75, 58, 128, 0.2);
    --glow-two: rgba(56, 65, 91, 0.19);
    --glow-three: rgba(255, 255, 255, 0.14);
    --celestial-opacity: 0.02;
}

html[data-theme="light"]
body:is(
    [data-weather="light-snow"],
    [data-weather="snow"],
    [data-weather="heavy-snow"],
    [data-weather="snow-showers"]
)
.background-layer {
    --sky-start: #9eafb8;
    --sky-middle: #cfdee4;
    --sky-end: #f3f7f8;
    --glow-one: rgba(87, 118, 137, 0.12);
    --glow-two: rgba(111, 148, 168, 0.13);
    --glow-three: rgba(255, 255, 255, 0.32);
    --celestial-opacity: 0.06;
}

html[data-theme="light"]
.background-overlay {
    background:
        radial-gradient(
            ellipse at 50% -15%,
            rgba(255, 255, 255, 0.12),
            transparent 54%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(217, 230, 236, 0.18)
        );
}

/* =======================================================
   VRSTVY POČASÍ
======================================================= */

.weather-effects {
    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    opacity: 0;

    transition: opacity 420ms ease;
}

.weather-effects.effects-active {
    opacity: 1;
}

.weather-effects-canvas,
.weather-cloud-layer,
.weather-fog-layer,
.weather-lightning-layer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.weather-effects-canvas {
    z-index: 3;
}

/* -------------------------------------------------------
   Rozptýlená oblačnost – pouze gradienty, žádné ostré masky.
------------------------------------------------------- */

.weather-cloud-layer {
    --cloud-opacity-far: 0.28;
    --cloud-opacity-near: 0.2;
    --cloud-light-a: rgba(225, 235, 242, 0.28);
    --cloud-light-b: rgba(160, 181, 197, 0.2);
    position: absolute;
    inset: -20%;

    z-index: 1;

    overflow: hidden;
    opacity: 0;

    transition:
        opacity 850ms ease,
        filter 850ms ease;
}

.weather-cloud-layer::before,
.weather-cloud-layer::after {
    position: absolute;
    inset: -12%;

    content: "";

    border-radius: 50%;

    will-change: transform, opacity;
}

.weather-cloud-layer::before {
    opacity: var(--cloud-opacity-far);

    background:
        radial-gradient(
            ellipse 44% 25% at 18% 34%,
            var(--cloud-light-a),
            transparent 72%
        ),
        radial-gradient(
            ellipse 52% 29% at 52% 42%,
            var(--cloud-light-b),
            transparent 74%
        ),
        radial-gradient(
            ellipse 42% 25% at 84% 33%,
            var(--cloud-light-a),
            transparent 73%
        );

    filter: blur(34px);

    animation:
        weather-cloud-haze-far
        var(--cloud-far-duration, 110s)
        ease-in-out
        infinite alternate;
}

.weather-cloud-layer::after {
    opacity: var(--cloud-opacity-near);

    background:
        radial-gradient(
            ellipse 48% 24% at 28% 63%,
            var(--cloud-light-b),
            transparent 72%
        ),
        radial-gradient(
            ellipse 58% 32% at 69% 58%,
            var(--cloud-light-a),
            transparent 74%
        ),
        radial-gradient(
            ellipse 36% 22% at 91% 72%,
            var(--cloud-light-b),
            transparent 75%
        );

    filter: blur(42px);

    animation:
        weather-cloud-haze-near
        var(--cloud-near-duration, 82s)
        ease-in-out
        infinite alternate;
}

.weather-cloud-layer.is-visible {
    opacity: 1;
}

.weather-cloud-layer[data-intensity="light"] {
    --cloud-opacity-far: 0.28;
    --cloud-opacity-near: 0.18;
}

.weather-cloud-layer[data-intensity="heavy"] {
    --cloud-opacity-far: 0.56;
    --cloud-opacity-near: 0.42;
}

.weather-cloud-layer[data-intensity="storm"] {
    --cloud-opacity-far: 0.72;
    --cloud-opacity-near: 0.58;
}

html[data-theme="dark"]
.weather-cloud-layer {
    --cloud-light-a: rgba(213, 226, 236, 0.3);
    --cloud-light-b: rgba(141, 165, 185, 0.21);
}

html[data-theme="dark"]
.weather-cloud-layer[data-intensity="heavy"]::before,
html[data-theme="dark"]
.weather-cloud-layer[data-intensity="storm"]::before {
    background:
        radial-gradient(
            ellipse 48% 28% at 18% 34%,
            rgba(151, 171, 185, 0.36),
            transparent 72%
        ),
        radial-gradient(
            ellipse 56% 32% at 55% 42%,
            rgba(91, 111, 128, 0.34),
            transparent 74%
        ),
        radial-gradient(
            ellipse 46% 28% at 86% 34%,
            rgba(127, 145, 160, 0.3),
            transparent 73%
        );
}

html[data-theme="dark"]
.weather-cloud-layer[data-intensity="heavy"]::after,
html[data-theme="dark"]
.weather-cloud-layer[data-intensity="storm"]::after {
    background:
        radial-gradient(
            ellipse 52% 26% at 28% 64%,
            rgba(75, 94, 111, 0.34),
            transparent 72%
        ),
        radial-gradient(
            ellipse 62% 35% at 69% 57%,
            rgba(106, 125, 141, 0.31),
            transparent 74%
        );
}

html[data-theme="light"]
.weather-cloud-layer {
    --cloud-light-a: rgba(255, 255, 255, 0.64);
    --cloud-light-b: rgba(143, 161, 173, 0.25);
}

html[data-theme="light"]
.weather-cloud-layer[data-intensity="heavy"]::before,
html[data-theme="light"]
.weather-cloud-layer[data-intensity="storm"]::before {
    background:
        radial-gradient(
            ellipse 48% 28% at 18% 34%,
            rgba(255, 255, 255, 0.58),
            transparent 72%
        ),
        radial-gradient(
            ellipse 56% 32% at 55% 42%,
            rgba(102, 120, 133, 0.29),
            transparent 74%
        ),
        radial-gradient(
            ellipse 46% 28% at 86% 34%,
            rgba(240, 246, 249, 0.48),
            transparent 73%
        );
}

html[data-theme="light"]
.weather-cloud-layer[data-intensity="heavy"]::after,
html[data-theme="light"]
.weather-cloud-layer[data-intensity="storm"]::after {
    background:
        radial-gradient(
            ellipse 52% 26% at 28% 64%,
            rgba(83, 103, 117, 0.24),
            transparent 72%
        ),
        radial-gradient(
            ellipse 62% 35% at 69% 57%,
            rgba(255, 255, 255, 0.45),
            transparent 74%
        );
}

/* -------------------------------------------------------
   Mlha – široké vrstvy bez ostrých pásů.
------------------------------------------------------- */

.weather-fog-layer {
    z-index: 2;

    opacity: 0;

    background:
        radial-gradient(
            ellipse 85% 20% at 8% 26%,
            rgba(241, 246, 248, 0.36),
            transparent 72%
        ),
        radial-gradient(
            ellipse 92% 23% at 88% 50%,
            rgba(218, 230, 235, 0.34),
            transparent 73%
        ),
        radial-gradient(
            ellipse 90% 18% at 28% 76%,
            rgba(246, 249, 250, 0.28),
            transparent 72%
        );

    background-size:
        145% 100%,
        155% 100%,
        150% 100%;

    filter: blur(27px);

    transform: scale(1.14);

    transition:
        opacity 800ms ease,
        filter 800ms ease;
}

.weather-fog-layer.is-visible {
    opacity: 0.88;

    animation:
        weather-fog-soft-drift
        34s
        ease-in-out
        infinite alternate;
}

html[data-theme="dark"]
.weather-fog-layer {
    background:
        radial-gradient(
            ellipse 85% 20% at 8% 26%,
            rgba(220, 232, 238, 0.26),
            transparent 72%
        ),
        radial-gradient(
            ellipse 92% 23% at 88% 50%,
            rgba(180, 199, 209, 0.24),
            transparent 73%
        ),
        radial-gradient(
            ellipse 90% 18% at 28% 76%,
            rgba(229, 237, 241, 0.22),
            transparent 72%
        );
}

html[data-theme="light"]
.weather-fog-layer {
    opacity: 0;

    background:
        radial-gradient(
            ellipse 85% 20% at 8% 26%,
            rgba(80, 100, 111, 0.18),
            transparent 72%
        ),
        radial-gradient(
            ellipse 92% 23% at 88% 50%,
            rgba(255, 255, 255, 0.72),
            transparent 73%
        ),
        radial-gradient(
            ellipse 90% 18% at 28% 76%,
            rgba(99, 117, 126, 0.14),
            transparent 72%
        );
}

html[data-theme="light"]
.weather-fog-layer.is-visible {
    opacity: 0.72;
}

/* -------------------------------------------------------
   Blesky – kontrastní v tmavém i světlém režimu.
------------------------------------------------------- */

.weather-lightning-layer {
    z-index: 4;

    opacity: 0;

    background:
        radial-gradient(
            ellipse at 70% 7%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(193, 210, 255, 0.56) 13%,
            rgba(118, 137, 211, 0.18) 34%,
            transparent 62%
        ),
        linear-gradient(
            114deg,
            transparent 0 55.4%,
            rgba(244, 248, 255, 0.96) 55.75%,
            rgba(149, 171, 242, 0.75) 55.95%,
            transparent 56.35%
        );

    mix-blend-mode: screen;

    pointer-events: none;
}

html[data-theme="light"]
.weather-lightning-layer {
    background:
        radial-gradient(
            ellipse at 70% 7%,
            rgba(71, 78, 138, 0.35) 0%,
            rgba(104, 113, 176, 0.2) 21%,
            transparent 58%
        ),
        linear-gradient(
            114deg,
            transparent 0 55.25%,
            rgba(65, 75, 141, 0.7) 55.52%,
            rgba(255, 255, 255, 1) 55.78%,
            rgba(82, 96, 173, 0.58) 56.02%,
            transparent 56.45%
        );

    mix-blend-mode: normal;
}

.weather-lightning-layer.is-flashing {
    animation:
        weather-lightning-visible-flash
        760ms
        ease-out
        both;
}

/* =======================================================
   ANIMACE
======================================================= */

@keyframes weather-background-flow {
    0% {
        background-position:
            0% 0%,
            100% 5%,
            48% 100%,
            0% 50%;
    }

    45% {
        background-position:
            13% 7%,
            87% 14%,
            58% 84%,
            48% 48%;
    }

    100% {
        background-position:
            25% 15%,
            74% 2%,
            40% 78%,
            100% 52%;
    }
}

@keyframes weather-background-breathe {
    from {
        filter:
            saturate(0.95)
            brightness(0.98);
    }

    to {
        filter:
            saturate(1.08)
            brightness(1.04);
    }
}

@keyframes weather-celestial-drift {
    from {
        transform:
            translate3d(-2vw, -1vh, 0)
            scale(0.94);
    }

    to {
        transform:
            translate3d(12vw, 6vh, 0)
            scale(1.08);
    }
}

@keyframes weather-atmosphere-drift {
    from {
        transform:
            translate3d(-4%, -2%, 0)
            rotate(-1deg);
    }

    to {
        transform:
            translate3d(5%, 3%, 0)
            rotate(1deg);
    }
}

@keyframes weather-cloud-haze-far {
    from {
        transform:
            translate3d(
                var(--cloud-drift-far-start, -3vw),
                -1vh,
                0
            )
            scale(0.96);
    }

    to {
        transform:
            translate3d(
                var(--cloud-drift-far-end, 8vw),
                4vh,
                0
            )
            scale(1.07);
    }
}

@keyframes weather-cloud-haze-near {
    from {
        transform:
            translate3d(
                var(--cloud-drift-near-start, 4vw),
                3vh,
                0
            )
            scale(1.03);
    }

    to {
        transform:
            translate3d(
                var(--cloud-drift-near-end, -9vw),
                -3vh,
                0
            )
            scale(1.12);
    }
}

@keyframes weather-fog-soft-drift {
    from {
        background-position:
            -25% 18%,
            125% 50%,
            -15% 79%;

        transform:
            translateX(-3%)
            scale(1.14);
    }

    to {
        background-position:
            115% 24%,
            -20% 47%,
            110% 73%;

        transform:
            translateX(3%)
            scale(1.17);
    }
}

@keyframes weather-lightning-visible-flash {
    0% {
        opacity: 0;
    }

    7% {
        opacity: 0.92;
    }

    14% {
        opacity: 0.12;
    }

    22% {
        opacity: 0.72;
    }

    31% {
        opacity: 0.04;
    }

    40% {
        opacity: 0.46;
    }

    52%,
    100% {
        opacity: 0;
    }
}

/* =======================================================
   VOLBA VIZUÁLNÍCH EFEKTŮ A REDUCED MOTION
======================================================= */

body[data-effects="disabled"]
.weather-effects {
    opacity: 0;
    visibility: hidden;
}

body[data-effects="disabled"]
.background-layer,
body[data-effects="disabled"]
.background-layer::before,
body[data-effects="disabled"]
.background-layer::after {
    animation: none;
}

body[data-effects="disabled"]
.weather-cloud-layer,
body[data-effects="disabled"]
.weather-fog-layer,
body[data-effects="disabled"]
.weather-lightning-layer {
    display: none;
}

body[data-effects="enabled"]
.weather-effects {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .background-layer,
    .background-layer::before,
    .background-layer::after,
    .weather-cloud-layer::before,
    .weather-cloud-layer::after,
    .weather-fog-layer,
    .weather-lightning-layer,
    .weather-effects-canvas {
        animation: none !important;
    }

    .weather-cloud-layer.is-visible {
        opacity: 0.28;
    }

    .weather-fog-layer.is-visible {
        opacity: 0.42;
    }
}

@media (max-width: 640px) {
    .weather-cloud-layer {
        inset: -28%;
    }

    .weather-cloud-layer::before {
        filter: blur(28px);
    }

    .weather-cloud-layer::after {
        filter: blur(34px);
    }

    .weather-fog-layer {
        filter: blur(22px);
    }
}

/* =======================================================
   BACKGROUND RENDERING INVARIANTS
   Stabilní pravidla proti opakování animovaných gradientů.
======================================================= */

.background-layer {
    background-color: var(--sky-middle, #6e9eb2);
}

.background-layer,
.background-layer::before,
.background-layer::after,
.background-overlay,
.weather-cloud-layer::before,
.weather-cloud-layer::after,
.weather-fog-layer,
.weather-lightning-layer {
    background-repeat: no-repeat;
}

.background-layer,
.background-overlay {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}