/* ---------- day / night transition: sunset and sunrise ---------- */
.tz{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden}
.tz.go{visibility:visible;animation:tz-fade 1.5s linear forwards}
.tz-sky{position:absolute;inset:0}
.tz.set .tz-sky{background:linear-gradient(180deg,#0b1b4d 0%,#5b2f8a 38%,#e8563f 76%,#ffb347 100%)}
.tz.rise .tz-sky{background:linear-gradient(180deg,#2c40b0 0%,#e86fa0 40%,#ffb347 76%,#ffe38a 100%)}
.tz-sun{position:absolute;left:50%;top:0;width:72px;height:72px;margin-left:-36px;background:#ffc83d;
  box-shadow:0 -16px 0 0 #ffc83d,0 16px 0 0 #ffc83d,-16px 0 0 0 #ffc83d,16px 0 0 0 #ffc83d}
.tz.set.go .tz-sun{animation:tz-down 1.5s steps(16) forwards}
.tz.rise.go .tz-sun{animation:tz-up 1.5s steps(16) forwards}
.tz-ground{position:absolute;left:0;right:0;bottom:0;height:18%;background:#0b1440;border-top:8px solid #1b7a5b}
@keyframes tz-fade{0%{opacity:0}28%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes tz-down{from{top:22%}to{top:88%}}
@keyframes tz-up{from{top:88%}to{top:22%}}
@media (prefers-reduced-motion:reduce){.tz{display:none}}