From 7438498d4b93cb56b378c154643a71c888e4309b Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 18 May 2026 04:18:30 -0600
Subject: [PATCH] feat: add diagonal scroll animation to AC tile background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@keyframes ac-bg-scroll mirrors the reference site's bgScroll:
background-position 100%0% → 0%100% over 80s infinite.
Disabled via prefers-reduced-motion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 style.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/style.css b/style.css
index e9e62af..45c9cd1 100644
--- a/style.css
+++ b/style.css
@@ -1832,11 +1832,21 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
   color: var(--accent);
 }
 
+@keyframes ac-bg-scroll {
+  0% {
+    background-position: 100% 0%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
+}
+
 html[data-design-theme="animal-crossing"] body::before {
   background-image: url("/textures/ac-tile.webp");
   background-size: auto;
   background-repeat: repeat;
   opacity: 0.6;
+  animation: ac-bg-scroll 80s linear infinite;
 }
 
 html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
@@ -1844,6 +1854,7 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
   background-size: auto;
   background-repeat: repeat;
   opacity: 0.12;
+  animation: ac-bg-scroll 80s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1853,6 +1864,10 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
     transition-duration: 0.01ms !important;
     transform: none !important;
   }
+
+  html[data-design-theme="animal-crossing"] body::before {
+    animation: none !important;
+  }
 }
 
 /* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */