.recess-hour-backdrop{--recess-hour-dot-size: 20px;--recess-hour-sweep-size: 256px;width:100%;height:100%;background:conic-gradient(from 180deg at 50% 70%,#fafafa,#eec32d,#ec4b4b,#709ab9,#4dffbf,#fafafa 1turn);mask:radial-gradient(circle at 50% 50%,white var(--recess-hour-dot-radius, 2px),transparent calc(var(--recess-hour-dot-radius, 2px) + .5px)) 50% 50% / var(--recess-hour-dot-size) var(--recess-hour-dot-size),url(../../../images/recess-hour-sweep.webp) var(--recess-hour-sweep-size) 50% / var(--recess-hour-sweep-size) var(--recess-hour-sweep-size);-webkit-mask-composite:source-in;mask-composite:intersect;animation:recess-hour-flicker 20s infinite linear}.recess-hour-backdrop.recess-hour-backdrop-over-photo{--recess-hour-dot-radius: 2.5px;background:#fff}.recess-hour-glow{filter:drop-shadow(0 0 3px rgb(255 255 255 / .9));-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent);mask-image:linear-gradient(to bottom,black 60%,transparent)}.dark .recess-hour-glow{filter:none;opacity:.35}@keyframes recess-hour-flicker{to{-webkit-mask-position:50% 50%,0 50%;mask-position:50% 50%,0 50%}}.recess-hour-live-gradient{background-image:linear-gradient(to right,#eec32d,#ec4b4b,#709ab9,#4dffbf,#eec32d);background-size:300% 100%;animation:recess-hour-gradient-x 6s ease infinite}@keyframes recess-hour-gradient-x{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media (prefers-reduced-motion: reduce){.recess-hour-backdrop,.recess-hour-live-gradient{animation:none}}