/* * Subtle starry-night background for furayoshi.com * Sits behind all site content; pure black with sporadic twinkles. * * IMPORTANT — edge coverage and stacking: * * - The canvas lives at z-index: -1, which puts it BEHIND the body's * own background paint. So we MUST keep body background transparent * or the body paint will cover the canvas. * - The element paints below the body in the stacking order, so * painting html pure black is a safe fallback colour: when the canvas * (or its overscanned margin) doesn't cover the viewport for a moment, * the user sees pure black, never Bulma's near-white grey. * - The canvas is oversized by OVERSCAN (16 px on each side) and offset * by -OVERSCAN/2, so even when the parallax translates it by ±3 px the * viewport is still fully covered by the black canvas. The * fallback colour is just a defensive layer. * * The JS also sets canvas.style.width/height to the viewport size on * resize. To preserve the overscan, those styles are written to the * element by JS only when it actually needs to grow; we keep the * overscanned geometry in CSS as the source of truth and have the JS * leave the size alone. (See stars.js.) */ :root { --stars-overscan: 16px; } /* Page fallback: pure black on the html element. */ html { background-color: #000 !important; } /* Body must be transparent so it doesn't paint over the z-index: -1 canvas. */ body { background: transparent !important; } /* Bulma's `.has-background-black` is HSL(221deg, *, 4%) — a very dark *blue*, not pure black. On top of a black canvas it reads as a washed-out, slightly bluish tint that hides the stars. Force it to pure #000 so any section using this class blends seamlessly with the starry sky. */ .has-background-black { background-color: #000 !important; } #furayoshi-starry-sky { position: fixed; /* Size: viewport + 2 × OVERSCAN. Centred on the viewport so the transform translate never reveals the page beneath. */ left: calc(-1 * var(--stars-overscan) / 2); top: calc(-1 * var(--stars-overscan) / 2); width: calc(100vw + var(--stars-overscan)); height: calc(100vh + var(--stars-overscan)); z-index: -1; display: block; pointer-events: none; /* Pure black sky; the canvas paints stars on top of it. */ background: #000; /* Tiny parallax nudge driven by JS (--stars-x, --stars-y). NOTE: no CSS transition here — the JS does its own rAF lerp so the movement stays fluid. A CSS transition would fight the JS and feel laggy. */ --stars-x: 0px; --stars-y: 0px; transform: translate3d(var(--stars-x), var(--stars-y), 0); will-change: transform; } /* Honor users who prefer reduced motion: skip the rAF-driven parallax entirely. */ @media (prefers-reduced-motion: reduce) { #furayoshi-starry-sky { transform: none; } }