/* Starfield — drifting parallax stars behind the garden. Two implementations live here: - CSS fallback: three tiled parallax layers (.stars-far/mid/near), used when JavaScript is unavailable. - JS canvas (.starfield): a non-repeating starfield drawn by starfield.js. starfield.js adds the `js` class to on init, which hides the CSS layers and reveals the canvas. With JS off, the CSS layers stay visible. */ /* ---- CSS fallback: three parallax layers ---- */ .stars-far, .stars-mid, .stars-near { position: fixed; inset: 0; pointer-events: none; background-repeat: repeat; } .stars-far { background-image: radial-gradient(1px 1px at 12% 18%, #ffffff99, transparent), radial-gradient(1px 1px at 38% 72%, #ffffff88, transparent), radial-gradient(1px 1px at 67% 41%, #ffffff99, transparent), radial-gradient(1px 1px at 83% 88%, #ffffff77, transparent), radial-gradient(1px 1px at 54% 9%, #ffffff88, transparent), radial-gradient(1px 1px at 27% 55%, #ffffff77, transparent), radial-gradient(1px 1px at 91% 27%, #ffffff99, transparent), radial-gradient(1px 1px at 5% 63%, #ffffff66, transparent), radial-gradient(1px 1px at 73% 96%, #ffffff88, transparent), radial-gradient(1px 1px at 46% 34%, #ffffff77, transparent); background-size: 300px 300px; animation: drift-far 120s linear infinite; } .stars-mid { background-image: radial-gradient(1.5px 1.5px at 22% 44%, #ffffffbb, transparent), radial-gradient(1.5px 1.5px at 71% 12%, #ffffffaa, transparent), radial-gradient(1.5px 1.5px at 48% 81%, #ffffffbb, transparent), radial-gradient(1.5px 1.5px at 88% 58%, #ffffff99, transparent), radial-gradient(1.5px 1.5px at 9% 29%, #ffffffaa, transparent), radial-gradient(1.5px 1.5px at 60% 67%, #ffffff99, transparent), radial-gradient(1px 1px at 35% 93%, #ffffffaa, transparent); background-size: 500px 500px; animation: drift-mid 70s linear infinite; } .stars-near { background-image: radial-gradient(2px 2px at 18% 36%, #ffffffdd, transparent), radial-gradient(2px 2px at 78% 22%, #ffffffcc, transparent), radial-gradient(2.5px 2.5px at 52% 74%, #ffffffee, transparent), radial-gradient(2px 2px at 31% 88%, #ffffffcc, transparent), radial-gradient(1.5px 1.5px at 85% 51%, #ffffffdd, transparent); background-size: 750px 750px; animation: drift-near 42s linear infinite; } /* travel exactly one tile on each axis so the loop is seamless */ @keyframes drift-far { to { background-position: 300px -300px; } } @keyframes drift-mid { to { background-position: 500px -500px; } } @keyframes drift-near { to { background-position: -750px -750px; } } /* ---- JS canvas ---- */ .starfield { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 0; } /* once starfield.js initializes, swap CSS layers for the canvas */ .js .stars-far, .js .stars-mid, .js .stars-near { display: none; } .js .starfield { display: block; } /* respect users who'd rather not see motion: keep stars, kill drift */ @media (prefers-reduced-motion: reduce) { .stars-far, .stars-mid, .stars-near { animation: none; } }