/* ============================================ TEXTURES — Page material layer ============================================ Activated via . - none (default) — no overlay - grain — body::after SVG noise overlay, slow drift - glass — .cc-glass utility class with backdrop-filter Load AFTER tokens/forces.css. Reuses the grain-shift @keyframes already defined in motion.css. ============================================ */ :root { --texture-grain-opacity: 0.08; --texture-grain-scale: 0.85; --texture-grain-duration: 8s; --texture-glass-blur: 20px; --texture-glass-saturate: 180%; } /* --- GRAIN -------------------------------------------------------- */ html[data-texture="grain"] body { position: relative; } html[data-texture="grain"] body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 9999; opacity: var(--texture-grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: calc(200px * var(--texture-grain-scale)); animation: grain-shift var(--texture-grain-duration) steps(8) infinite; } /* --- GLASS -------------------------------------------------------- */ html[data-texture="glass"] .cc-glass { backdrop-filter: blur(var(--texture-glass-blur)) saturate(var(--texture-glass-saturate)); -webkit-backdrop-filter: blur(var(--texture-glass-blur)) saturate(var(--texture-glass-saturate)); background: color-mix(in oklch, var(--color-bg) 60%, transparent); border: 1px solid color-mix(in oklch, var(--color-fg) 12%, transparent); } /* --- REDUCED-MOTION ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html[data-texture="grain"] body::after { animation: none; } }