feat: phase2 immersive journey (semantic scene transitions + camera feel)

themes/dreamscape/assets/css/dreamscape.css

@@ -257,6 +257,46 @@ main {
 .story-journey {
     position: relative;
     isolation: isolate;
+    --scene-accent: rgba(123,104,238,0.30);
+    --scene-accent-soft: rgba(34,211,238,0.16);
+    transition: transform 0.12s linear, filter 0.4s ease;
+    will-change: transform;
+}
+
+.scene-veil {
+    position: fixed;
+    inset: 0;
+    z-index: -2;
+    pointer-events: none;
+    background:
+      radial-gradient(circle at 20% 20%, var(--scene-accent), transparent 45%),
+      radial-gradient(circle at 80% 70%, var(--scene-accent-soft), transparent 55%);
+    opacity: 0.45;
+    transition: opacity 0.5s ease, filter 0.5s ease, background 0.6s ease;
+}
+
+body[data-scene="void"] .scene-veil {
+    background:
+      radial-gradient(circle at 18% 24%, rgba(99,102,241,0.30), transparent 46%),
+      radial-gradient(circle at 74% 75%, rgba(56,189,248,0.14), transparent 56%);
+}
+
+body[data-scene="starsea"] .scene-veil {
+    background:
+      radial-gradient(circle at 28% 18%, rgba(34,211,238,0.30), transparent 44%),
+      radial-gradient(circle at 76% 70%, rgba(147,197,253,0.18), transparent 56%);
+}
+
+body[data-scene="crystal"] .scene-veil {
+    background:
+      radial-gradient(circle at 18% 32%, rgba(167,139,250,0.32), transparent 44%),
+      radial-gradient(circle at 82% 70%, rgba(96,165,250,0.20), transparent 56%);
+}
+
+body[data-scene="calling"] .scene-veil {
+    background:
+      radial-gradient(circle at 22% 24%, rgba(45,212,191,0.32), transparent 44%),
+      radial-gradient(circle at 76% 74%, rgba(59,130,246,0.18), transparent 56%);
 }
 
 .story-orb {
@@ -342,6 +382,23 @@ main {
     text-shadow: 0 0 18px rgba(123,104,238,0.22);
 }
 
+.article-body > p.active-scene::after {
+    content: '';
+    position: absolute;
+    left: -0.4rem;
+    top: 0.35rem;
+    width: 2px;
+    height: calc(100% - 0.6rem);
+    border-radius: 2px;
+    background: linear-gradient(180deg, rgba(34,211,238,0.7), transparent);
+    opacity: 0.75;
+}
+
+body.scene-shift .scene-veil {
+    opacity: 0.7;
+    filter: saturate(1.25) brightness(1.05);
+}
+
 /* 手机端沉浸优化 */
 @media (max-width: 640px) {
     .story-progress {
@@ -361,6 +418,7 @@ main {
 @media (prefers-reduced-motion: reduce) {
     .story-orb,
     .story-progress-bar,
+    .scene-veil,
     .reveal,
     .js-ready .article-body p {
         animation: none !important;