/* Prescott weather: window glass, trail scene, Mac readout */
.screen-weather:not(:empty):before{content:' · '}
@media(max-height:600px){.screen-weather{display:none}}

.wx-layer{--wash:transparent;--sk:1;--flake:#fff;position:absolute;overflow:hidden;pointer-events:none;container-type:size;contain:strict}
.wx-layer>*{position:absolute;display:none;pointer-events:none}
.wx-window{left:0;top:0;width:32.5%;height:39.5%;z-index:2;--tw:90px;--th:120px;--tw2:140px;--th2:170px;--tw3:110px;--th3:150px;--fog-h:50%}
.wx-trail{inset:0;z-index:3;--tw:216px;--th:288px;--tw2:336px;--th2:408px;--tw3:264px;--th3:360px}
.wx-desk-flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 14% 20%,#e8f1ffcc,#cfe0f800 70%)}

/* Tiles: slightly wobbly hand-drawn streaks */
.wx-streaks-a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='120' viewBox='0 0 90 120' fill='none' stroke='%23f2f8fd' stroke-linecap='round'%3E%3Cpath d='M22 6Q20 16 17 27' stroke-width='1.2' opacity='.8'/%3E%3Cpath d='M63 14Q61.5 22 59 31' stroke-width='.9' opacity='.55'/%3E%3Cpath d='M41 38Q38 52 34 66' stroke-width='1.4' opacity='.85'/%3E%3Cpath d='M78 52Q76 60 73.5 69' stroke-width='.9' opacity='.5'/%3E%3Cpath d='M10 74Q8.5 84 6 94' stroke-width='1.1' opacity='.7'/%3E%3Cpath d='M56 84Q53 98 49 111' stroke-width='1.3' opacity='.8'/%3E%3Cpath d='M30 100Q28.5 106 26.5 112' stroke-width='.8' opacity='.45'/%3E%3Cpath d='M84 96Q82 104 79.5 113' stroke-width='1' opacity='.6'/%3E%3C/svg%3E")}
.wx-streaks-b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='170' viewBox='0 0 140 170' fill='none' stroke='%23f2f8fd' stroke-linecap='round'%3E%3Cpath d='M18 10Q15 28 10 46' stroke-width='1.3' opacity='.6'/%3E%3Cpath d='M70 6Q66.5 22 62 38' stroke-width='1.1' opacity='.5'/%3E%3Cpath d='M112 30Q109 46 104 62' stroke-width='1.5' opacity='.7'/%3E%3Cpath d='M44 70Q41 88 35 106' stroke-width='1.2' opacity='.55'/%3E%3Cpath d='M94 92Q91 106 86 120' stroke-width='1' opacity='.5'/%3E%3Cpath d='M126 116Q124 128 120 140' stroke-width='1.2' opacity='.6'/%3E%3Cpath d='M20 128Q17 144 12 158' stroke-width='1.4' opacity='.65'/%3E%3Cpath d='M66 134Q64 148 60 160' stroke-width='.9' opacity='.45'/%3E%3C/svg%3E")}
.wx-streaks-c{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='150' viewBox='0 0 110 150' fill='none' stroke='%23f2f8fd' stroke-linecap='round'%3E%3Cpath d='M26 14Q24.5 22 22 32' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M78 48Q76.5 55 74 64' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M46 88Q44 97 41 107' stroke-width='.8' opacity='.65'/%3E%3Cpath d='M94 118Q92.5 125 90 133' stroke-width='.7' opacity='.5'/%3E%3C/svg%3E")}
.wx-streaks{inset:0;background-repeat:repeat;opacity:calc(var(--so,.8)*var(--sk));animation:wx-fall var(--sp,.55s) linear infinite}
.wx-streaks-a{background-size:var(--tw) var(--th);--fall:var(--th)}
.wx-streaks-b{background-size:var(--tw2) var(--th2);--fall:var(--th2);--sp:.8s;background-position:37px 21px}
.wx-streaks-c{background-size:var(--tw3) var(--th3);--fall:var(--th3);--sp:1.1s;background-position:13px 40px}
@keyframes wx-fall{to{background-position-y:calc(var(--fall) + var(--y0,0px))}}
.wx-streaks-b{--y0:21px}
.wx-streaks-c{--y0:40px}

/* Wash / fog */
.wx-wash{inset:0;background:var(--wash)}
.wx-trail .wx-wash{bottom:62%;-webkit-mask-image:linear-gradient(#000 55%,#0000);mask-image:linear-gradient(#000 55%,#0000)}
/* Each blob stays inside its tile so the drifting band has no seams. */
.wx-fog{left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;background-image:radial-gradient(ellipse 20% 40% at 22% 52%,var(--fogc,#f1f1ea),#0000),radial-gradient(ellipse 20% 34% at 52% 45%,var(--fogc,#f1f1ea),#0000),radial-gradient(ellipse 20% 40% at 78% 55%,var(--fogc,#f1f1ea),#0000);opacity:var(--fo,.7);animation:wx-drift 70s linear infinite}
.wx-fog-a{top:8%;height:var(--fog-h,50%)}
.wx-fog-b{top:42%;height:var(--fog-h,50%);animation-duration:110s;animation-direction:reverse;background-position:-20% 0;--fo:.55}
.wx-trail .wx-fog-a{top:36%;height:26%}
.wx-trail .wx-fog-b{top:58%;height:34%}
@keyframes wx-drift{to{transform:translateX(-50%)}}

/* Snow */
.wx-flakes{inset:0}
.wx-flakes>i{position:absolute;left:var(--x);top:0;width:var(--s);height:var(--s);border-radius:var(--r);background:radial-gradient(circle at 40% 38%,var(--flake) 0 38%,#ffffffcc 55%,#fff0 76%);animation:wx-snow var(--d) linear var(--dl) infinite;will-change:transform}
.wx-trail .wx-flakes>i{width:calc(var(--s)*1.7);height:calc(var(--s)*1.7)}
@keyframes wx-snow{0%{transform:translate(0,-8cqh)}25%{transform:translate(calc(var(--dx)*.6),22cqh)}50%{transform:translate(calc(var(--dx)*-.4),50cqh)}75%{transform:translate(var(--dx),78cqh)}100%{transform:translate(0,110cqh)}}

/* Drops running down the glass */
.wx-drops{inset:0}
.wx-drops>b{position:absolute;left:var(--x);top:0;width:var(--w);height:calc(var(--w)*2.3);border-radius:50% 50% 55% 55%/38% 38% 62% 62%;background:radial-gradient(ellipse at 40% 30%,#fffffff0,#dcecf8aa 55%,#ffffff22);box-shadow:0 1px 1px #2e2a2224;transform:translateY(var(--y));animation:wx-trickle var(--d) ease-in var(--dl) infinite}
@keyframes wx-trickle{0%{transform:translateY(var(--y));opacity:0}6%{opacity:1}22%{transform:translateY(var(--y))}32%{transform:translateY(calc(var(--y) + 9cqh))}52%{transform:translateY(calc(var(--y) + 9cqh))}66%{transform:translateY(calc(var(--y) + 22cqh))}78%{transform:translateY(calc(var(--y) + 22cqh));opacity:1}100%{transform:translateY(calc(var(--y) + 42cqh));opacity:0}}

/* Lightning */
.wx-flash{inset:0;background:radial-gradient(ellipse at 30% 25%,#fff,#e4efff 45%,#cfe0f8aa);opacity:0}
.wx-trail .wx-flash{background:linear-gradient(#f4f8ff,#dbe6f6cc 60%,#c4d4ebaa)}
.wx-flash.on{animation:wx-bolt .95s ease-out}
.wx-desk-flash.on{animation:wx-bolt-soft .95s ease-out}
@keyframes wx-bolt{0%{opacity:0}6%{opacity:.95}16%{opacity:.2}26%{opacity:.8}45%{opacity:.12}100%{opacity:0}}
@keyframes wx-bolt-soft{0%{opacity:0}6%{opacity:.14}16%{opacity:.03}26%{opacity:.11}100%{opacity:0}}

/* Per kind */
[data-kind=cloudy]{--wash:linear-gradient(#7d8996a8,#98a3adb0)}
[data-kind=cloudy]>.wx-wash{display:block}
[data-kind=cloudy]>.wx-fog-a{display:block;--fogc:#a6b0b8;--fo:.6}
.wx-trail[data-kind=cloudy]>.wx-fog{display:none}
.wx-trail[data-kind=cloudy]{--wash:linear-gradient(#6f7c8c99,#8b97a455 70%,#0000)}

[data-kind=fog]{--wash:#e6e8e24d}
[data-kind=fog]>.wx-wash{display:block}
[data-kind=fog]>.wx-fog{display:block;--fogc:#f3f2ea;--fo:.8}
.wx-trail[data-kind=fog]{--wash:linear-gradient(#e6e8e266,#0000)}
.wx-trail[data-kind=fog]>.wx-fog-a{--fo:.7}

[data-kind=drizzle]{--wash:#8c97a22e}
[data-kind=drizzle]>.wx-wash{display:block}
[data-kind=drizzle]>.wx-streaks-c{display:block;--so:.75;--sp:1.4s}
[data-kind=drizzle]>.wx-streaks-a{display:block;--so:.35;--sp:1.1s}

[data-kind=rain]{--wash:#6e7b8a52}
[data-kind=rain]>.wx-wash{display:block}
[data-kind=rain]>.wx-streaks-a,[data-kind=rain]>.wx-streaks-b{display:block}
[data-kind=rain]>.wx-drops{display:block}
.wx-trail[data-kind=rain]>.wx-fog-b{display:block;--fogc:#c9d1d6;--fo:.35}

[data-kind=snow]{--wash:#dfe7ee26}
[data-kind=snow]>.wx-wash{display:block}
[data-kind=snow]>.wx-flakes{display:block}
.wx-trail[data-kind=snow]>.wx-fog-b{display:block;--fogc:#eef2f5;--fo:.3}

[data-kind=storm]{--wash:#2f3b4d99}
[data-kind=storm]>.wx-wash{display:block}
[data-kind=storm]>.wx-streaks{display:block;--so:.95;--sp:.4s}
[data-kind=storm]>.wx-streaks-b{--sp:.55s}
[data-kind=storm]>.wx-drops,[data-kind=storm]>.wx-flash{display:block}
.wx-trail[data-kind=storm]{--wash:linear-gradient(#27323fb3,#3b485799 70%,#0000)}
.wx-trail[data-kind=storm]>.wx-fog-b{display:block;--fogc:#8d98a3;--fo:.35}

/* Evening: darker wash, streaks as faint light-catching lines */
body.evening .wx-layer{--sk:.5;--flake:#dbe6f4}
body.evening .wx-window[data-kind=cloudy]{--wash:linear-gradient(#0c1522bb,#16202cb0)}
body.evening .wx-window[data-kind=fog]{--wash:#1a243040}
body.evening .wx-window[data-kind=drizzle]{--wash:#0d162330}
body.evening .wx-window[data-kind=rain]{--wash:#0b142266}
body.evening .wx-window[data-kind=snow]{--wash:#0d162330}
body.evening .wx-window[data-kind=storm]{--wash:#050b14b3}
body.evening .wx-trail[data-kind=cloudy]{--wash:linear-gradient(#0c1522b0,#16202c55 70%,#0000)}
body.evening .wx-trail[data-kind=storm]{--wash:linear-gradient(#050b14cc,#0b142266 70%,#0000)}
body.evening .wx-fog{--fo:.28}
body.evening .wx-drops>b{background:radial-gradient(ellipse at 40% 30%,#dfeaf8aa,#9db4cc66 55%,#ffffff10);box-shadow:none}
body.evening .wx-flash{opacity:0}

/* Paused: another scene, Mac zoom, or hidden tab */
.wx-paused,.wx-paused *{animation-play-state:paused!important}

/* Reduced motion: static faint streaks, flakes and fog, no lightning */
@media(prefers-reduced-motion:reduce){
  .wx-streaks,.wx-fog,.wx-drops>b{animation:none}
  .wx-streaks{opacity:calc(var(--so,.8)*var(--sk)*.5)}
  .wx-flakes>i{animation:none;transform:translateY(var(--y))}
  .wx-drops>b{opacity:.8}
  .wx-flash.on,.wx-desk-flash.on{animation:none}
}