From 33eed81c0db94452ce2436cbf04b35fff3263670 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Sat, 12 Oct 2024 09:13:24 -0500
Subject: [PATCH] random noise, prefers-reduced-motion

---
 assets/style.css | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 8af4b67..0331ea6 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -18,6 +18,15 @@ body {
   font-family: "Red Hat Text";
 }
 
+@keyframes move-mask {
+  0% {
+    mask-position: 0vw 100vw, 100vw 0vw;
+  }
+  100% {
+    mask-position: 100vw 0vw, 0vw 100vw;
+  }
+}
+
 html::after {
   display: inline-block;
   content: "";
@@ -29,13 +38,15 @@ html::after {
   image-rendering: pixelated;
   background:
     url("/assets/imgs/stylistic/dot.png");
+    /* background-color: black; */
   background-position: 50% 0;
   /* background-size: 3840px 1080px; */
-  mask-image: url("/assets/imgs/stylistic/bg_dust.png");
+  mask-image: url("/assets/imgs/stylistic/bg_dust.png"), url("/assets/imgs/stylistic/bg_dust.png");
   mask-repeat: repeat;
   mask-composite: exclude;
-  mask-size: 960px 270px;
+  mask-size: 1920px 540px;
   mask-position: 50% 0;
+  animation: move-mask 250s infinite linear;
   opacity: 0.125;
   z-index: -1;
   pointer-events: none;
@@ -108,8 +119,7 @@ main .cakeView h2 {
     color: white;
   }
 
-  img:not(.screen),
-  body::after {
+  img:not(.screen) {
     filter: invert(100%) hue-rotate(180deg);
   }
 
@@ -210,4 +220,22 @@ button {
 
 .cta:hover::after {
   width: 1ch;
+}
+
+@media (prefers-reduced-motion) {
+  html::after {
+    animation: none;
+    mask-image: url("/assets/imgs/stylistic/bg_dust.png");
+  }
+
+  *,
+  *::after,
+  *::before {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  body::before {
+    display: none;
+  }
 }
\ No newline at end of file