/* All decorative paint is restricted to the upper corners and outer edges. */
.caw-effects { --caw-opacity: .55; --caw-sun-opacity: .9; position: fixed; inset: 0; z-index: 20; overflow: hidden; pointer-events: none !important; contain: strict; }
.caw-effects *, .caw-effects *::before, .caw-effects *::after { pointer-events: none !important; box-sizing: border-box; }
.caw-effects[data-strength="2"] { --caw-opacity: .75; }
.caw-effects[data-strength="2"] { --caw-sun-opacity: .96; }
.caw-effects[data-strength="3"] { --caw-opacity: 1; --caw-sun-opacity: 1; }
.caw-sun { --caw-sun-edge: clamp(14px, 2vw, 28px); position: absolute; top: clamp(80px, 7vw, 98px); left: var(--caw-sun-edge); width: clamp(148px, 13vw, 188px); height: clamp(148px, 13vw, 188px); opacity: var(--caw-sun-opacity); animation: caw-glow 14s ease-in-out infinite alternate; filter: drop-shadow(0 5px 12px rgb(205 139 23 / 18%)); transform-origin: center; }
.caw-effects[data-sun-side="right"] .caw-sun { right: var(--caw-sun-edge); left: auto; }
.caw-sun::before { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff5b8 0%, #ffda63 38%, #f8bd3c 73%, #e9a52c 100%); box-shadow: 0 0 0 3px rgb(255 208 77 / 24%), 0 0 24px rgb(255 193 45 / 56%), 0 0 58px rgb(255 210 92 / 30%); }
.caw-sun::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from -3deg, rgb(244 173 29 / 76%) 0deg 4deg, transparent 4deg 28deg); -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35% 47%, transparent 48%); mask: radial-gradient(circle, transparent 0 34%, #000 35% 47%, transparent 48%); }
.caw-cloud { position: absolute; top: 28px; width: 150px; height: 32px; border-radius: 50%; background: rgb(162 184 199 / 16%); opacity: var(--caw-opacity); animation: caw-drift 28s ease-in-out infinite alternate; }
.caw-cloud::before, .caw-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.caw-cloud::before { width: 68px; height: 42px; left: 24px; top: -18px; }
.caw-cloud::after { width: 48px; height: 36px; right: 20px; top: -12px; }
.caw-cloud-left { left: -45px; }
.caw-cloud-right { right: -45px; top: 70px; animation-delay: -12s; }
.caw-rain { position: absolute; top: 0; bottom: 0; width: min(7vw, 100px); overflow: hidden; opacity: var(--caw-opacity); }
.caw-rain-left { left: 0; }
.caw-rain-right { right: 0; }
.caw-effects[data-scene="showers"] .caw-rain { opacity: 0; animation: caw-showers 90s linear infinite; }
.caw-drop { position: absolute; top: -20px; width: 1px; height: 13px; background: rgb(64 113 147 / 22%); animation: caw-fall 3s linear infinite; }
.caw-effects[data-scene="heavy-rain"] .caw-drop { height: 20px; width: 1.5px; background: rgb(64 113 147 / 26%); }
.caw-effects[data-scene="storm"] .caw-drop { height: 24px; width: 1.5px; background: rgb(64 99 123 / 28%); animation-name: caw-driven-rain; }
.caw-effects[data-scene="storm"] .caw-cloud { background: rgb(104 127 144 / 20%); animation-duration: 7s; }
.caw-wind { position: absolute; left: -45%; width: 65%; height: 1px; border-radius: 50%; background: rgb(85 117 134 / 20%); animation: caw-gust 4s ease-in-out infinite; }
@keyframes caw-glow { from { transform: scale(.96); } to { transform: scale(1.04); } }
@keyframes caw-drift { from { transform: translateX(-8px); } to { transform: translateX(12px); } }
@keyframes caw-fall { to { transform: translateY(calc(100vh + 30px)); } }
/* A shower is a possibility during the forecast hour, not continuous rain now. */
@keyframes caw-showers { 0%, 65%, 88%, 100% { opacity: 0; } 69%, 84% { opacity: var(--caw-opacity); } }
@keyframes caw-driven-rain { from { transform: translateX(12px) rotate(-18deg); } to { transform: translate(-24px, calc(100vh + 30px)) rotate(-18deg); } }
@keyframes caw-gust { 0% { transform: translateX(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(240%); opacity: 0; } }
@media (max-width: 600px) {
    .caw-sun { --caw-sun-edge: 8px; top: 66px; width: 148px; height: 148px; }
    .caw-cloud { width: 112px; height: 24px; }
}
@media (prefers-reduced-motion: reduce), print { .caw-effects { display: none !important; } }