chore: complete update

resources/css/utilities/noise.css

@@ -0,0 +1,62 @@
+.noise-bg {
+    --noise-opacity: 0.15;
+
+    background-image:
+        repeating-radial-gradient(circle at 1px 1px,
+        rgba(255, 255, 255, var(--noise-opacity, 0.03)) 0,
+        rgba(0, 0, 0, var(--noise-opacity, 0.03)) 1px,
+        transparent 2px
+        );
+    background-size: 3px 3px;
+}
+
+.grain {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+
+    background-color: #000;
+    mix-blend-mode: overlay;
+    opacity: 0.5;
+
+    animation: noise 1s steps(10) infinite;
+}
+
+@keyframes noise {
+    0%  { filter: hue-rotate(0deg); }
+    100% { filter: hue-rotate(360deg); }
+}
+
+.noise-overlay {
+    --noise-intensity: 0.03;
+
+    view-transition-name: noise;
+
+
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+
+    mix-blend-mode: overlay;
+
+    background-size: cover;
+    background: url("data:image/svg+xml;utf8,\
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
+<filter id='noiseFilter'>\
+<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/>\
+</filter>\
+<rect width='100%' height='100%' filter='url(%23noiseFilter)'/>\
+</svg>") repeat, rgba(0, 0, 0, var(--noise-intensity, 0.03));
+}
+
+.noise-overlay {
+    opacity: var(--noise-opacity, 0.05);
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.noise-overlay.hidden {
+    opacity: 0;
+}