/* Calcebra sky (weatherFx.js): sun, clouds, rainbow, haze, frost and the
   falling weather, inside #scenery so they are clipped to the rail and the
   top strip like the paintings. Soft and painterly: blurred edges, low
   opacity, slow drift. Everything here is decorative and never takes
   pointer events. Motion stops with the Motion setting (#scenery.sc-still,
   .wx-still) and with prefers-reduced-motion. */

#weatherFx,
#weatherFxFront {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Behind the fox (z 2 in foxScene.css); the falling weather in front. */
#weatherFx { z-index: 1; }
#weatherFxFront { z-index: 3; }

/* ---------------------------------------------------------------- sun */

#weatherFx .wx-sun {
    position: absolute;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 200, 0.72) 0, rgba(255, 236, 178, 0.34) 30%, rgba(255, 232, 170, 0) 70%);
    transition: transform 2s ease, opacity 2s ease;
    will-change: transform;
}

#weatherFx .wx-sun-disc {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbec 0, #fff5d2 44%, rgba(255, 238, 186, 0.9) 58%, rgba(255, 236, 180, 0) 72%);
    filter: blur(0.4px);
}

#weatherFx .wx-sun-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.7;
    background: repeating-conic-gradient(rgba(255, 244, 205, 0) 0deg 7deg, rgba(255, 244, 205, 0.4) 9deg, rgba(255, 244, 205, 0) 11deg 20deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 20%, #000 30%, transparent 70%);
    mask-image: radial-gradient(circle, transparent 0 20%, #000 30%, transparent 70%);
    animation: wx-turn 200s linear infinite;
}

/* Low sun (morning, golden hour, sunrise, sunset): warmer and wider. */
#weatherFx .wx-sun.wx-sun-low {
    background: radial-gradient(circle, rgba(255, 210, 150, 0.6) 0, rgba(255, 178, 122, 0.3) 34%, rgba(255, 170, 120, 0) 72%);
}

#weatherFx .wx-sun-low .wx-sun-disc {
    background: radial-gradient(circle, #fff2d6 0, #ffe0ac 46%, rgba(255, 200, 140, 0.9) 60%, rgba(255, 190, 130, 0) 74%);
}

@keyframes wx-turn {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------- sunrise, sunset, stars */

/* The warm sky of a sunrise or sunset: peach and soft gold along the top
   strip's horizon (its bottom edge), fading up to a clear blue and down the
   top of the rail. weatherFx.js sets the opacity and --wx-sun-x. Light and
   illustrative - a wash, never a heavy cast. */
#weatherFx .wx-glow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--scene-top, 38px) + 34vh);
    opacity: 0;
    transition: opacity 3s ease;
    background:
        radial-gradient(ellipse 30% 30% at var(--wx-sun-x, 50%) var(--scene-top, 38px), rgba(255, 214, 150, 0.8), rgba(255, 214, 150, 0) 72%),
        linear-gradient(to bottom,
            rgba(150, 182, 222, 0.3) 0,
            rgba(255, 222, 170, 0.42) calc(var(--scene-top, 38px) * 0.55),
            rgba(255, 198, 146, 0.52) var(--scene-top, 38px),
            rgba(255, 218, 170, 0.2) calc(var(--scene-top, 38px) + 12vh),
            rgba(255, 218, 170, 0) calc(var(--scene-top, 38px) + 34vh));
}

/* Lowest sun: a little apricot-rose right at the horizon. */
#weatherFx .wx-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3s ease;
    background: radial-gradient(ellipse 22% 20% at var(--wx-sun-x, 50%) var(--scene-top, 38px), rgba(246, 176, 150, 0.6), rgba(246, 176, 150, 0) 75%);
}

#weatherFx .wx-glow.wx-low::after { opacity: 1; }

/* Late in the sunset the top of the sky turns a dusky blue. */
#weatherFx .wx-glow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--scene-top, 38px);
    opacity: 0;
    transition: opacity 3s ease;
    background: linear-gradient(to bottom, rgba(84, 104, 150, 0.45), rgba(84, 104, 150, 0));
}

#weatherFx .wx-glow.wx-late::before { opacity: 1; }

/* Long, soft golden light across the land, from the sun's side. */
#weatherFx .wx-golden {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3s ease;
    background:
        linear-gradient(105deg, rgba(255, 206, 130, 0.26), rgba(255, 206, 130, 0.04) 55%, rgba(255, 206, 130, 0) 80%),
        linear-gradient(to bottom, rgba(255, 210, 140, 0.1), rgba(255, 190, 120, 0.16));
}

#weatherFx .wx-golden.wx-from-right {
    background:
        linear-gradient(255deg, rgba(255, 196, 120, 0.28), rgba(255, 196, 120, 0.05) 55%, rgba(255, 196, 120, 0) 80%),
        linear-gradient(to bottom, rgba(255, 204, 136, 0.1), rgba(255, 180, 116, 0.17));
}

/* The first stars: two thin layers, one twinkling slowly. */
#weatherFx .wx-stars {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 4s ease;
}

#weatherFx .wx-stars i {
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: no-repeat;
}

#weatherFx .wx-stars i + i { animation: wx-twinkle 6s ease-in-out infinite alternate; }

@keyframes wx-twinkle {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

/* ------------------------------------------------------------- clouds */

#weatherFx .wx-clouds {
    position: absolute;
    inset: 0;
    --wx-c: rgba(255, 255, 255, 0.92);
    --wx-shade: rgba(196, 206, 220, 0.75);
}

#weatherFx .wx-tone-warm { --wx-c: rgba(255, 240, 226, 0.9); --wx-shade: rgba(206, 180, 168, 0.6); }
#weatherFx .wx-tone-rain { --wx-c: rgba(216, 221, 228, 0.92); --wx-shade: rgba(150, 160, 174, 0.8); }
#weatherFx .wx-tone-storm { --wx-c: rgba(150, 156, 168, 0.94); --wx-shade: rgba(92, 98, 112, 0.92); }
#weatherFx .wx-tone-night { --wx-c: rgba(92, 102, 128, 0.55); --wx-shade: rgba(40, 48, 70, 0.6); }
#weatherFx .wx-tone-night-storm { --wx-c: rgba(72, 78, 98, 0.85); --wx-shade: rgba(30, 34, 48, 0.88); }

#weatherFx .wx-cloud {
    position: absolute;
    left: 0;
    display: block;
    background:
        radial-gradient(ellipse 34% 46% at 32% 56%, var(--wx-c) 0 52%, transparent 100%),
        radial-gradient(ellipse 30% 50% at 56% 40%, var(--wx-c) 0 50%, transparent 100%),
        radial-gradient(ellipse 28% 40% at 76% 60%, var(--wx-c) 0 50%, transparent 100%),
        radial-gradient(ellipse 46% 34% at 52% 74%, var(--wx-shade) 0 46%, transparent 100%);
    filter: blur(2.2px);
    transform: translateX(var(--wx-still, 0));
    animation-name: wx-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes wx-drift {
    from { transform: translateX(var(--wx-from)); }
    to { transform: translateX(var(--wx-to)); }
}

/* ------------------------------------------------------------ rainbow */

#weatherFx .wx-rainbow {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: blur(1.4px);
    transition: opacity 1.2s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--wx-rainbow-fade, 120px), transparent calc(var(--wx-rainbow-fade, 120px) + 160px));
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--wx-rainbow-fade, 120px), transparent calc(var(--wx-rainbow-fade, 120px) + 160px));
}

#weatherFx .wx-rainbow.wx-on { opacity: 0.42; transition-duration: 4s; }
#weatherFx .wx-rainbow svg { position: absolute; left: 0; top: 0; display: block; }

/* ------------------------------------------------------------ fog/mist */

.wx-haze {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3s ease;
}

#weatherFx .wx-haze.wx-on { opacity: 0.45; }
#weatherFx .wx-haze.wx-on.wx-thick { opacity: 0.85; }
#weatherFxFront .wx-haze.wx-on { opacity: 0.4; }

.wx-fog {
    position: absolute;
    left: -30%;
    width: 160%;
    display: block;
    --wx-mist: rgba(238, 240, 242, 0.85);
    background:
        radial-gradient(ellipse 30% 60% at 28% 60%, var(--wx-mist), transparent 70%),
        radial-gradient(ellipse 26% 50% at 62% 44%, var(--wx-mist), transparent 70%),
        radial-gradient(ellipse 30% 55% at 88% 62%, var(--wx-mist), transparent 70%);
    animation: wx-mist 80s ease-in-out infinite alternate;
}

.wx-night .wx-fog { --wx-mist: rgba(120, 130, 152, 0.6); }

.wx-fog-a { bottom: 0; height: 55%; }
.wx-fog-b { top: -10px; height: 90px; animation-duration: 64s; animation-delay: -20s; }
.wx-fog-c { bottom: 6%; height: 30%; animation-duration: 96s; animation-delay: -40s; }

@keyframes wx-mist {
    from { transform: translateX(-50px); }
    to { transform: translateX(50px); }
}

/* -------------------------------------------- frost (ice, rime fog) */

#weatherFx .wx-frost {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3s ease;
}

#weatherFx .wx-frost.wx-on { opacity: 1; }

.wx-frost-rail,
.wx-frost-band {
    position: absolute;
    display: block;
    background-blend-mode: normal;
}

.wx-frost-rail {
    top: 0;
    bottom: 0;
    left: calc(var(--scene-left, 186px) - 34px);
    width: 34px;
    background:
        repeating-linear-gradient(62deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 8px),
        linear-gradient(to left, rgba(232, 242, 252, 0.78), rgba(232, 242, 252, 0));
    -webkit-mask-image: linear-gradient(to left, #000, transparent);
    mask-image: linear-gradient(to left, #000, transparent);
}

.wx-frost-band {
    left: 0;
    right: 0;
    top: calc(var(--scene-top, 38px) - 13px);
    height: 13px;
    background:
        repeating-linear-gradient(62deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 6px),
        linear-gradient(to top, rgba(232, 242, 252, 0.78), rgba(232, 242, 252, 0));
    -webkit-mask-image: linear-gradient(to top, #000, transparent);
    mask-image: linear-gradient(to top, #000, transparent);
}

/* ------------------------------------------- falling weather, lightning */

#weatherFxFront .wx-canvas {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

/* The glow behind a thunderstorm: weatherFx.js fades it up to 0.2 and back
   over 1.4 s, at most every 15-30 s, never with motion off. */
#weatherFxFront .wx-flash {
    position: absolute;
    inset: 0;
    display: none;
    opacity: 0;
    background: radial-gradient(ellipse 80% 70% at 40% 0%, rgba(236, 240, 255, 0.95), rgba(210, 220, 245, 0.35) 55%, rgba(210, 220, 245, 0) 85%);
}

#weatherFxFront .wx-flash.wx-on { display: block; }

/* ------------------------------- sprigs at the rail's edges, in the wind */

/* Painted twigs that always sway a little, more in real wind (--wind). */
#weatherFx .wx-sprigs {
    position: absolute;
    inset: 0;
    --wx-wind-k: calc(1 + var(--wind, 0) * 2.2);
    --wx-twig: #6b5238;
    --wx-leaf: #6f9450;
    --wx-bloom: transparent;
}

#weatherFx .wx-season-spring { --wx-leaf: #86ad5c; --wx-bloom: #f2c6d0; }
#weatherFx .wx-season-summer { --wx-leaf: #5f8f45; --wx-bloom: #7ea456; }
#weatherFx .wx-season-fall { --wx-leaf: #c8762f; --wx-bloom: #d9a03f; }
#weatherFx .wx-season-winter { --wx-leaf: transparent; --wx-bloom: rgba(255, 255, 255, 0.85); --wx-twig: #5e4a36; }
#weatherFx .wx-sprigs.wx-night { filter: brightness(0.42) saturate(0.6); }

#weatherFx .wx-sprig {
    position: absolute;
    display: block;
    opacity: 0.8;
    filter: blur(0.5px);
    animation: wx-sprig 7s ease-in-out infinite;
    will-change: transform;
}

#weatherFx .wx-sprig svg { display: block; overflow: visible; }
#weatherFx .wx-twig { fill: none; stroke: var(--wx-twig); stroke-width: 1.6; stroke-linecap: round; }
#weatherFx .wx-leafy { fill: var(--wx-leaf); }
#weatherFx .wx-bloom { fill: var(--wx-bloom); }
#weatherFx .wx-sprig-b { animation-duration: 8.3s; animation-delay: -3s; }
#weatherFx .wx-sprig-c { animation-duration: 6.1s; animation-delay: -1.5s; }

@keyframes wx-sprig {
    0%, 100% { transform: rotate(calc(-1.4deg * var(--wx-wind-k, 1))); }
    50% { transform: rotate(calc(2deg * var(--wx-wind-k, 1))); }
}

/* ----------------------------------------------------------- stillness */

.wx-still *,
#scenery.sc-still #weatherFx *,
#scenery.sc-still #weatherFxFront * {
    animation: none !important;
}

.wx-still .wx-flash { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    #weatherFx *,
    #weatherFxFront * {
        animation: none !important;
        transition: none !important;
    }

    #weatherFxFront .wx-flash { display: none !important; }
}