/* Santae Weather APNG v1.1.3. Keep controls outside the clipped effect layers. */
.santae-weather-root .santae-weather-effect,
.santae-weather-root .santae-weather-cloud-clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none !important;
}
.santae-weather-root .santae-weather-effect {
    background-position: center top;
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: .82;
    user-select: none;
}
.wideWeatherScene.santae-weather-root .santae-weather-effect { z-index: 6; }
.santae-weather-root[data-weather="snowing"] .santae-weather-effect { opacity: .9; }
.santae-weather-root[data-weather="storming"] .santae-weather-effect { opacity: .95; }
.santae-weather-root[data-weather="sunny"] .santae-weather-effect {
    background-position: right top;
    background-repeat: no-repeat;
    /* Size the original rays to the banner height, not the full viewport width. */
    background-size: auto 140%;
    opacity: .26;
    filter: blur(2px);
    -webkit-mask-image: linear-gradient(to bottom, #000 15%, rgba(0, 0, 0, .65) 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 15%, rgba(0, 0, 0, .65) 60%, transparent 100%);
    animation: none !important;
}
/* A quiet, steady glow bridges the original APNG's pause between glints.
   It exists only while the day-time Sunny effect is actually active. */
.santae-weather-root[data-weather="sunny"][data-weather-time="day"][data-weather-effect="on"] .santae-weather-effect::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 560px 240px at right top, rgba(255, 239, 185, .55), rgba(255, 239, 185, .16) 45%, transparent 75%);
}
.santae-weather-root .santae-weather-cloud-clip > .headerMid,
.santae-weather-root .santae-weather-cloud-clip > .wideWeatherClouds {
    left: -40px;
    width: calc(100% + 80px);
    animation: none !important;
}
.santae-weather-root .wideWeatherRain,
.santae-weather-root .wideWeatherOverlay,
.santae-weather-root .wideWeatherSprinkles { animation: none !important; }
.santae-weather-root.santae-weather-moving .santae-weather-cloud-clip > .headerMid,
.santae-weather-root.santae-weather-moving .santae-weather-cloud-clip > .wideWeatherClouds {
    animation: santae-weather-cloud-drift 45s ease-in-out infinite alternate !important;
}
.santae-weather-root.santae-weather-moving .headerSparkles,
.santae-weather-root.santae-weather-moving .wideWeatherSprinkles {
    animation: santae-weather-star-glow 5s ease-in-out infinite alternate !important;
}
/* Foggy uses the original cloudy artwork, scrolling left at 10px/second.
   Keep the legacy 3840px / 384s drift instead of the APNG cloud sway. */
.santae-weather-root[data-weather="foggy"] .santae-weather-cloud-clip > .headerMid,
.santae-weather-root[data-weather="foggy"] .santae-weather-cloud-clip > .wideWeatherClouds {
    left: 0;
    width: 100%;
    transform: none;
    animation: santae-weather-fog-drift 384s linear infinite !important;
    animation-play-state: paused !important;
}
.santae-weather-root.santae-weather-moving[data-weather="foggy"] .santae-weather-cloud-clip > .headerMid,
.santae-weather-root.santae-weather-moving[data-weather="foggy"] .santae-weather-cloud-clip > .wideWeatherClouds {
    animation-play-state: running !important;
}
/* These legacy images already contain precipitation. Avoid drawing it twice. */
.santae-weather-root[data-weather-effect="on"] .headerRain,
.santae-weather-root[data-weather-effect="on"] .wideWeatherRain,
.santae-weather-root[data-weather-effect="on"][data-weather="raining"] .santae-weather-cloud-clip,
.santae-weather-root[data-weather-effect="on"][data-weather="snowing"] .santae-weather-cloud-clip,
.santae-weather-root[data-weather-effect="on"][data-weather="snowing"] .headerSparkles,
.santae-weather-root[data-weather-effect="on"][data-weather="snowing"] .wideWeatherSprinkles {
    display: none !important;
}
.santae-weather-root[data-weather-color-sensitive="true"] .santae-weather-effect {
    filter: grayscale(70%);
}
.santae-weather-root[data-weather="sunny"][data-weather-color-sensitive="true"] .santae-weather-effect {
    filter: grayscale(70%) blur(2px);
}
@keyframes santae-weather-cloud-drift {
    from { transform: translateX(-32px); }
    to { transform: translateX(32px); }
}
@keyframes santae-weather-fog-drift {
    from { background-position-x: 0px; }
    to { background-position-x: -3840px; }
}
@keyframes santae-weather-star-glow {
    from { opacity: .45; }
    to { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
    .santae-weather-root .santae-weather-effect { background-image: none !important; animation: none !important; }
    .santae-weather-root[data-weather="sunny"] .santae-weather-effect::before { content: none; }
    .santae-weather-root[data-weather="foggy"] .santae-weather-cloud-clip > .headerMid,
    .santae-weather-root[data-weather="foggy"] .santae-weather-cloud-clip > .wideWeatherClouds,
    .santae-weather-root.santae-weather-moving .santae-weather-cloud-clip > .headerMid,
    .santae-weather-root.santae-weather-moving .santae-weather-cloud-clip > .wideWeatherClouds,
    .santae-weather-root.santae-weather-moving .headerSparkles,
    .santae-weather-root.santae-weather-moving .wideWeatherSprinkles { animation: none !important; }
}