/* ════════════════════════════════════════════════
EXTRAS — Film Grain · Intro Screen · Command Palette
Add to index.html :
════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────
1. FILM GRAIN
Animated SVG-noise overlay — zero JS cost,
pure CSS composition on the GPU.
──────────────────────────────────────────────── */
#grain {
position: fixed;
inset: -120px; /* overshoot edges so translate never reveals bg */
z-index: 998;
pointer-events: none;
opacity: 0.042;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 256px 256px;
animation: grain-anim 0.38s steps(4) infinite;
will-change: transform;
}
@keyframes grain-anim {
0% { transform: translate(0px, 0px); }
25% { transform: translate(-22px, 14px); }
50% { transform: translate(18px, -10px); }
75% { transform: translate(-14px,-20px); }
100% { transform: translate(10px, 8px); }
}
html.light-mode #grain {
opacity: 0.025;
mix-blend-mode: multiply;
}
/* ────────────────────────────────────────────────
2. INTRO SCREEN
──────────────────────────────────────────────── */
/* Hide instantly on repeat visits (class set by inline