From b06546c674f5595dbacfa94a8e9e675be3887f62 Mon Sep 17 00:00:00 2001
From: Chen Gu <guchen@MBKPro.lan>
Date: Fri, 24 Apr 2026 01:26:01 +0800
Subject: [PATCH] fix: progressive enhancement - content visible before JS
 loads

---
 themes/dreamscape/assets/css/dreamscape.css | 26 ++++++++++++++-------
 themes/dreamscape/assets/js/dreamscape.js   |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/themes/dreamscape/assets/css/dreamscape.css b/themes/dreamscape/assets/css/dreamscape.css
index c334750..3eb9a8d 100644
--- a/themes/dreamscape/assets/css/dreamscape.css
+++ b/themes/dreamscape/assets/css/dreamscape.css
@@ -303,16 +303,19 @@ main {
 .article-body p {
     margin-bottom: 1.8rem;
     text-align: justify;
+}
+
+.js-ready .article-body p {
     opacity: 0;
     animation: fadeInUp 0.8s ease forwards;
 }
 
-.article-body p:nth-child(1) { animation-delay: 0.1s; }
-.article-body p:nth-child(2) { animation-delay: 0.2s; }
-.article-body p:nth-child(3) { animation-delay: 0.3s; }
-.article-body p:nth-child(4) { animation-delay: 0.4s; }
-.article-body p:nth-child(5) { animation-delay: 0.5s; }
-.article-body p:nth-child(n+6) { animation-delay: 0.6s; }
+.js-ready .article-body p:nth-child(1) { animation-delay: 0.1s; }
+.js-ready .article-body p:nth-child(2) { animation-delay: 0.2s; }
+.js-ready .article-body p:nth-child(3) { animation-delay: 0.3s; }
+.js-ready .article-body p:nth-child(4) { animation-delay: 0.4s; }
+.js-ready .article-body p:nth-child(5) { animation-delay: 0.5s; }
+.js-ready .article-body p:nth-child(n+6) { animation-delay: 0.6s; }
 
 .article-body h2 {
     font-size: 1.5rem;
@@ -478,12 +481,17 @@ main {
 }
 
 .reveal {
-    opacity: 0;
-    transform: translateY(30px);
+    opacity: 1;
+    transform: none;
     transition: opacity 0.8s ease, transform 0.8s ease;
 }
 
-.reveal.visible {
+.js-ready .reveal {
+    opacity: 0;
+    transform: translateY(30px);
+}
+
+.js-ready .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }
diff --git a/themes/dreamscape/assets/js/dreamscape.js b/themes/dreamscape/assets/js/dreamscape.js
index f5bcf3b..0f4b7b0 100644
--- a/themes/dreamscape/assets/js/dreamscape.js
+++ b/themes/dreamscape/assets/js/dreamscape.js
@@ -141,6 +141,7 @@
     });
 
     document.addEventListener('DOMContentLoaded', () => {
+        document.body.classList.add('js-ready');
         init();
         setupReveal();
         setupParallax();