/* ------------------------------------------------------------------ Particle / Starfield Background – Phase-4 delight layer ------------------------------------------------------------------ */ /* The effect renders two tiled radial-gradient layers that move slowly on the X/Y axis, creating the illusion of drifting particles / stars. Because the colours use `currentColor` and transparency, they adapt automatically when the underlying theme tokens are tweaked. Usage: add a

as the first element inside . The element is positioned fixed with a negative z-index so it sits behind all content without affecting layout. */ .particle-bg { position: fixed; inset: 0; z-index: -1; /* Behind every real element */ pointer-events: none; /* Ignore clicks */ /* Dark fallback when CSS variables aren’t loaded yet */ background-color: var(--dark, #000); /* Two radial-gradient dot patterns offset by half a tile */ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 40%), radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 40%); /* Size of a single dot (first layer) */ background-size: 3px 3px, 3px 3px; /* Offset second layer so dots don’t overlap exactly */ background-position: 0 0, 1.5px 1.5px; animation: particle-drift 60s linear infinite; } @keyframes particle-drift { from { background-position: 0 0, 1.5px 1.5px; } to { /* Move several screen widths to achieve a slow drift effect */ background-position: 1000px 500px, 1001.5px 501.5px; } }