/* Pixel-cloud backdrop. Opt-in: . Roll back by removing the attribute (or this file). */
:root { --cloud: light-dark(oklch(86% 0.03 var(--h)), oklch(28% 0.035 var(--h))); }
html[data-bg="pixel"] body::before {
background: var(--cloud);
-webkit-mask: url(/_shared/bg-pixel.svg?v=1) center / cover no-repeat; mask: url(/_shared/bg-pixel.svg?v=1) center / cover no-repeat;
opacity: .9;
}
html[data-bg="pixel"] body::after { /* keep a whisper of the hue wash so the page still has depth behind the clouds */
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background: radial-gradient(60rem 28rem at 50% -6rem, color-mix(in oklch, var(--glow) 55%, transparent), transparent 70%);
}
@media (max-width: 640px) { /* phones see a 360px slice of a 1600px canvas; shrink the canvas so clouds stay cloud-sized */
html[data-bg="pixel"] body::before { -webkit-mask-size: 230% auto; mask-size: 230% auto; -webkit-mask-position: center top; mask-position: center top; }
}
@media (prefers-reduced-motion: no-preference) {
html[data-bg="pixel"] body::before { animation: drift 240s linear infinite alternate; }
@keyframes drift { from { mask-position: 48% 50%; -webkit-mask-position: 48% 50%; } to { mask-position: 52% 50%; -webkit-mask-position: 52% 50%; } }
}