@xingwangzhe/stalux 1.39.3 → 1.39.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.39.3",
+    "version": "1.39.4",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/internal/style-names.generated.ts

@@ -287,50 +287,52 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-bg-color": "--s1n",
         "--stalux-bg-filter": "--s1o",
         "--stalux-nav-offset": "--s1p",
-        "--stalux-site-header-height": "--s1q",
-        "--stalux-site-header-min-height": "--s1r",
-        "--stalux-text-shadow": "--s1s",
-        "--surface-glass": "--s1t",
-        "--surface-glass-shadow": "--s1u",
-        "--tag-bg": "--s1v",
-        "--tag-bg-hover": "--s1w",
-        "--tl-line": "--s1x",
-        "--tl-pad": "--s1y",
-        "--transition-fast": "--s1z",
-        "--transition-medium": "--s20",
-        "--transition-normal": "--s21",
-        "--transition-slow": "--s22",
-        "--transition-slower": "--s23",
-        "--transition-slowest": "--s24",
-        "--un-rotate": "--s25",
-        "--un-rotate-x": "--s26",
-        "--un-rotate-y": "--s27",
-        "--un-rotate-z": "--s28",
-        "--un-scale-x": "--s29",
-        "--un-scale-y": "--s2a",
-        "--un-scale-z": "--s2b",
-        "--un-skew-x": "--s2c",
-        "--un-skew-y": "--s2d",
-        "--un-translate-x": "--s2e",
-        "--un-translate-y": "--s2f",
-        "--un-translate-z": "--s2g",
-        "--updated-bg": "--s2h",
-        "--updated-border": "--s2i",
-        "--white-05p": "--s2j",
-        "--white-10p": "--s2k",
-        "--white-15p": "--s2l",
-        "--white-20p": "--s2m",
-        "--white-30p": "--s2n",
-        "--white-50p": "--s2o",
-        "--white-60p": "--s2p",
-        "--white-70p": "--s2q",
-        "--white-75p": "--s2r",
-        "--white-78p": "--s2s",
-        "--white-80p": "--s2t",
-        "--white-85p": "--s2u",
-        "--white-90p": "--s2v",
-        "--white-95p": "--s2w",
-        "--white-full": "--s2x"
+        "--stalux-side-in-x": "--s1q",
+        "--stalux-side-out-x": "--s1r",
+        "--stalux-site-header-height": "--s1s",
+        "--stalux-site-header-min-height": "--s1t",
+        "--stalux-text-shadow": "--s1u",
+        "--surface-glass": "--s1v",
+        "--surface-glass-shadow": "--s1w",
+        "--tag-bg": "--s1x",
+        "--tag-bg-hover": "--s1y",
+        "--tl-line": "--s1z",
+        "--tl-pad": "--s20",
+        "--transition-fast": "--s21",
+        "--transition-medium": "--s22",
+        "--transition-normal": "--s23",
+        "--transition-slow": "--s24",
+        "--transition-slower": "--s25",
+        "--transition-slowest": "--s26",
+        "--un-rotate": "--s27",
+        "--un-rotate-x": "--s28",
+        "--un-rotate-y": "--s29",
+        "--un-rotate-z": "--s2a",
+        "--un-scale-x": "--s2b",
+        "--un-scale-y": "--s2c",
+        "--un-scale-z": "--s2d",
+        "--un-skew-x": "--s2e",
+        "--un-skew-y": "--s2f",
+        "--un-translate-x": "--s2g",
+        "--un-translate-y": "--s2h",
+        "--un-translate-z": "--s2i",
+        "--updated-bg": "--s2j",
+        "--updated-border": "--s2k",
+        "--white-05p": "--s2l",
+        "--white-10p": "--s2m",
+        "--white-15p": "--s2n",
+        "--white-20p": "--s2o",
+        "--white-30p": "--s2p",
+        "--white-50p": "--s2q",
+        "--white-60p": "--s2r",
+        "--white-70p": "--s2s",
+        "--white-75p": "--s2t",
+        "--white-78p": "--s2u",
+        "--white-80p": "--s2v",
+        "--white-85p": "--s2w",
+        "--white-90p": "--s2x",
+        "--white-95p": "--s2y",
+        "--white-full": "--s2z"
     },
     "animations": {
         "fadeInUpComment": "k0",
@@ -339,21 +341,24 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "stalux-article-enter-back": "k3",
         "stalux-cursor-blink": "k4",
         "stalux-link-avatar-spin": "k5",
-        "stalux-page-enter": "k6",
-        "stalux-page-enter-back": "k7",
-        "stalux-page-exit": "k8",
-        "stalux-random-spin": "k9",
-        "stalux-sidebar-left-back-in": "ka",
-        "stalux-sidebar-left-back-out": "kb",
-        "stalux-sidebar-left-in": "kc",
-        "stalux-sidebar-left-out": "kd",
-        "stalux-sidebar-right-back-in": "ke",
-        "stalux-sidebar-right-back-out": "kf",
-        "stalux-sidebar-right-in": "kg",
-        "stalux-sidebar-right-out": "kh",
-        "stalux-social-stalux-social-arrive": "ki",
-        "stalux-taxonomy-enter": "kj",
-        "stalux-taxonomy-enter-back": "kk",
-        "stalux-word-word-glow": "kl"
+        "stalux-random-spin": "k6",
+        "stalux-sidebar-left-back-in": "k7",
+        "stalux-sidebar-left-back-out": "k8",
+        "stalux-sidebar-left-in": "k9",
+        "stalux-sidebar-left-out": "ka",
+        "stalux-sidebar-right-back-in": "kb",
+        "stalux-sidebar-right-back-out": "kc",
+        "stalux-sidebar-right-in": "kd",
+        "stalux-sidebar-right-out": "ke",
+        "stalux-social-stalux-social-arrive": "kf",
+        "stalux-taxonomy-enter": "kg",
+        "stalux-taxonomy-enter-back": "kh",
+        "stalux-vt-new-route": "ki",
+        "stalux-vt-old-route": "kj",
+        "stalux-vt-side-in": "kk",
+        "stalux-vt-side-out": "kl",
+        "stalux-vt-title-swap-new": "km",
+        "stalux-vt-title-swap-old": "kn",
+        "stalux-word-word-glow": "ko"
     }
 };

package/src/layouts/Stalux.astro

@@ -2,7 +2,6 @@
 import { getCollection } from "astro:content";
 import Footer from "@components/stalux/layout/footer.astro";
 import Head from "@components/stalux/layout/head.astro";
-import NavigationProgress from "@components/stalux/layout/navigationProgress.astro";
 import Navs from "@components/stalux/layout/navs.astro";
 import { getAccentColorStyle } from "@utils/accent-color";
 import {
@@ -89,7 +88,6 @@ const routeKind = getRouteKind(Astro.url.pathname);
         data-stalux-umami-id={headConfig?.umami?.id}
         data-stalux-umami-url={headConfig?.umami?.url}
     >
-        <NavigationProgress />
         <header
             class="stalux-site-header"
             data-stalux-font-group="header"
@@ -122,12 +120,7 @@ const routeKind = getRouteKind(Astro.url.pathname);
             transition:persist="stalux-bg-b"
             aria-hidden="true"
         ></div>
-        <main
-            class="stalux-main"
-            data-stalux-route={routeKind}
-            transition:name="stalux-page"
-            transition:animate="none"
-        >
+        <main class="stalux-main" data-stalux-route={routeKind} transition:name="stalux-page">
             <slot />
         </main>
         <Footer />

package/src/scripts/view-transitions.ts

@@ -2,8 +2,6 @@ import { getRouteKind } from "@utils/public-routes";
 import { installBackToTop } from "./back-to-top";
 import { createClientLogger } from "./logger";
 import { prepareNavigationFont } from "./navigation-font";
-import { installNavigationProgress } from "./navigation-progress";
-import { prepareRouteMotion } from "./route-motion";
 
 const logger = createClientLogger("view-transitions");
 
@@ -42,9 +40,10 @@ function setNavigationState(event: NavigationEvent, html = document.documentElem
 }
 
 function clearNavigationState(): void {
-    delete document.documentElement.dataset.staluxVtFrom;
-    delete document.documentElement.dataset.staluxVtTo;
-    delete document.documentElement.dataset.staluxVtDirection;
+    const html = document.documentElement;
+    delete html.dataset.staluxVtFrom;
+    delete html.dataset.staluxVtTo;
+    delete html.dataset.staluxVtDirection;
 }
 
 function preserveHeaderMetrics(nextDocument: Document): void {
@@ -65,9 +64,9 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
     transitionWindow.__STALUX_VT_LISTENER__ = true;
 
     let generation = 0;
-    let motion: ReturnType<typeof prepareRouteMotion> | undefined;
     let pendingBrowserMotion = false;
-    let browserMotion = false;
+    let _browserMotion = false;
+    let _routeMotionActive = false;
     window.addEventListener(
         "popstate",
         (event) => {
@@ -80,9 +79,8 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
     document.addEventListener("astro:before-preparation", (event) => {
         const navigation = event as unknown as NavigationEvent;
         const current = ++generation;
-        motion?.cancel();
-        motion = undefined;
-        browserMotion = pendingBrowserMotion && navigation.navigationType === "traverse";
+        _routeMotionActive = false;
+        _browserMotion = pendingBrowserMotion && navigation.navigationType === "traverse";
         pendingBrowserMotion = false;
         setNavigationState(navigation);
         navigation.signal.addEventListener(
@@ -108,32 +106,35 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         const navigation = event as unknown as NavigationEvent;
         if (navigation.signal.aborted) return;
         const current = generation;
-        motion = prepareRouteMotion(navigation);
         preserveHeaderMetrics(navigation.newDocument);
-        // Astro replaces the root attributes during swap. Carry motion state into
-        // the new document and keep it until the last animation actually settles.
+        _routeMotionActive = true;
+        // Astro replaces the root attributes during swap. Carry state into the
+        // new document; CSS keyframes read these data-* attributes to pick their
+        // own direction rather than letting Astro's default `fade` pair apply.
         setNavigationState(navigation, navigation.newDocument.documentElement);
         const finish = () => {
             if (current === generation) clearNavigationState();
         };
-        void motion.finished.then(finish, finish);
+        // ViewTransition.ready fires when pseudo-elements are painted out; we
+        // use it as the handoff boundary so our WAAPI for new content starts
+        // *after* the native swap has painted its snapshot.
+        const native = navigation.viewTransition;
+        Promise.resolve(native?.ready)
+            .then(
+                () => undefined,
+                () => undefined,
+            )
+            .then(finish);
     });
 
     document.addEventListener("astro:after-swap", () => {
         setRouteState(window.location.pathname);
-        // Install the effect before the first new-content paint. The browser
-        // starts its timeline after the native transition releases rendering.
-        motion?.start(document.querySelector<HTMLElement>("main[data-stalux-route]"), {
-            skip: browserMotion,
-        });
     });
 
     document.addEventListener("astro:page-load", () => {
         setRouteState(window.location.pathname);
     });
 
-    // Register after the font wrapper so prepared includes its bounded wait.
-    installNavigationProgress();
     // Footer button and scroll sentinel persist across soft navigations, so the
     // BackToTop observer is installed once per document.
     installBackToTop();

package/src/styles/generated.css

@@ -1,3 +1,3 @@
 @layer theme, base, components, utilities;
-@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-min-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-min-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-min-height:3.75rem;--stalux-site-header-height:var(--stalux-site-header-min-height);--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 2px 5px #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.85rem;--border-thin:1px;--border-medium:2px;--border-thick:3px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:4px;transition:background .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stagger-children>:first-child{animation-delay:.1s}.stagger-children>:nth-child(2){animation-delay:.15s}.stagger-children>:nth-child(3){animation-delay:.2s}.stagger-children>:nth-child(4){animation-delay:.25s}.stagger-children>:nth-child(5){animation-delay:.3s}.stagger-children>:nth-child(n+6){animation-delay:.35s}@keyframes stalux-page-exit{to{opacity:0}}@keyframes stalux-page-enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-page-enter-back{0%{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-taxonomy-enter{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-taxonomy-enter-back{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-article-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-article-enter-back{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-sidebar-left-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-out{to{opacity:0;transform:translate(-10px)}}@keyframes stalux-sidebar-left-back-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-back-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-back-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-back-out{to{opacity:0;transform:translate(-10px)}}html,.stalux-main,.stalux-main *,[data-astro-transition-persist]{view-transition-name:none!important}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left:0}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms!important;animation-delay:0s!important}.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
+@layer components{.stalux-404-home-btn{background:var(--black-20p);border:var(--border-thin) solid var(--white-20p);transition:background-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);color:var(--white-90p);font-size:var(--font-size-base);text-decoration:none;display:inline-block}.stalux-ai-prompt{clip-path:inset(50%);white-space:pre-wrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-badge-group{border:none}.stalux-badge-group-arrow{font-size:.65rem;transition:transform .2s;display:inline-block}.stalux-badge-group-summary{user-select:none;cursor:pointer;color:var(--white-70p);gap:.4rem;padding:.2rem 0;font-size:.85rem;list-style-type:none;transition:color .2s}.stalux-beian-public-security-beian{color:#ffffffb3;gap:5px;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-flex}.stalux-card-post-categories,.stalux-card-post-tags{gap:.4rem}.stalux-card-post-category{background:var(--category-bg);color:#fff;border-radius:6px;padding:.18rem .5rem;font-size:.84rem;line-height:1;display:inline-block}.stalux-card-post-description{overflow-wrap:anywhere;color:var(--white-70p);line-height:1.6}.stalux-card-post-meta{gap:.6rem}.stalux-card-post-tag{background:var(--tag-bg);color:#fff;border-radius:9999px;padding:.22rem .7rem;font-size:.85rem;line-height:1;display:inline-block}.stalux-card-post-title{overflow-wrap:anywhere;margin:0;line-height:1.35}.stalux-card-read-more{align-self:flex-start;margin-top:.6rem}.stalux-card-time{gap:.45rem;display:inline-flex}.stalux-copyright{color:var(--white-70p);gap:.3em;font-weight:500}.stalux-footer{backdrop-filter:blur(10px);color:var(--white-full);background-color:#0000001a;margin-top:auto;padding:1.5rem 0;font-size:.9rem}.stalux-footer-content{gap:.8rem;max-width:1200px;margin:0 auto;padding:0 1rem}.stalux-nav-list{transform:scale(var(--nav-scale,1));transform-origin:50%;box-sizing:border-box;gap:2rem;max-width:100%;transition:transform .22s cubic-bezier(.22,.72,.22,1);overflow:visible}.stalux-nav-overlay{pointer-events:none;z-index:999;opacity:0;background:#0009;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.stalux-nav-scroll-btn{background:var(--black-30p);backdrop-filter:blur(8px);box-shadow:var(--shadow-md);pointer-events:none;z-index:10;cursor:pointer;width:36px;height:36px;color:var(--white-full);opacity:0;border:none;border-radius:9999px;padding:0;transition:opacity .25s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.stalux-nav-toggle{z-index:998;cursor:pointer;min-width:48px;min-height:48px;color:inherit;background:0 0;border:none;padding:.75rem;display:none}.stalux-post-card{box-sizing:border-box;cursor:pointer;gap:var(--space-lg);border-radius:var(--radius-lg);background-color:var(--card-bg);height:100%;padding:var(--space-lg);box-shadow:var(--card-box-shadow);transition:transform .22s cubic-bezier(.22,.72,.22,1)}.stalux-stats-site-build-time{color:#fffc;margin-top:.5rem;font-size:.9rem}.stalux-stats-stats-separator{color:#ffffff80}.stalux-theme-info{color:var(--white-70p);gap:.3em;font-size:.85rem}.stalux-home-body{min-height:calc(100vh - var(--stalux-site-header-height));padding-bottom:var(--space-3xl);position:relative}.stalux-nav-container{box-sizing:border-box;max-width:100%;position:relative;overflow:hidden}.stalux-author{margin-top:4em}.stalux-card-post-cover{border-radius:var(--radius-md);flex-shrink:0;height:180px;margin-bottom:.5rem;overflow:hidden}.stalux-home-title{color:var(--white-full);text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:4em}.stalux-nav-item{text-shadow:var(--stalux-text-shadow);flex-shrink:0;margin-left:1em;margin-right:1em;font-size:1.3em}.stalux-page-description{color:var(--white-60p);margin-bottom:1.5em;font-size:1.2em}.stalux-page-title{text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-typewriter{min-height:2em;text-shadow:var(--stalux-text-shadow);margin-top:1.5em;font-size:2.5em}.stalux-404-error-container{min-height:60vh;padding:2rem}.stalux-badge,.stalux-badges-wrapper .stalux-badge{width:auto}.stalux-u-min-w-0{min-width:0}.stalux-u-w-full{width:100%}.stalux-u-flex{display:flex}.stalux-u-flex-col{flex-direction:column}.stalux-u-flex-wrap{flex-wrap:wrap}.stalux-u-items-center{align-items:center}.stalux-u-justify-center{justify-content:center}.stalux-badges,.stalux-badges-wrapper{gap:.5rem}.stalux-beian-beian-info{gap:1rem}.stalux-stats-site-stats{gap:.5rem;font-size:.9rem}.stalux-nav-text{white-space:nowrap;color:var(--white-full)}.stalux-badge-group-items{padding-top:.35rem}.stalux-u-text-center{text-align:center}.stalux-badge-group-hint{color:var(--white-70p);font-size:.7rem}.stalux-badge-group-title{color:var(--white-80p)}#stalux-home-show-post-list{cursor:pointer;text-shadow:var(--stalux-text-shadow);margin-top:3em;font-size:1.5em}.stalux-post-list-container{width:100%;height:auto;margin:5px 0}.stalux-post-list-container ul{flex-wrap:wrap;gap:2rem;margin:3em;padding:0;list-style-type:none;display:flex}.stalux-post-list-container ul>li{flex:min(22rem,100%);min-width:0;margin:0}.stalux-card-post-title a{color:inherit;text-decoration:none}.stalux-post-card>a:first-child{width:100%;min-width:0;display:block}.stalux-card-post-cover img{object-fit:cover;width:100%;max-width:100%;height:100%;transition:transform var(--transition-fast)}.stalux-card-post-date,.stalux-card-post-updated{color:#e8f2ff;border-radius:10px;align-items:center;gap:.35rem;width:fit-content;padding:.28rem .6rem;font-size:.9rem;line-height:1.1;display:inline-flex}.stalux-card-post-date{background:var(--date-bg);border:1px solid var(--date-border);color:#e8f2ff}.stalux-card-post-updated{background:var(--updated-bg);border:1px solid var(--updated-border);color:#fff7de}.stalux-card-post-tags a,.stalux-card-post-categories a{text-decoration:none}.stalux-card-post-tags a:focus-visible .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:focus-visible .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-social{margin-top:3em}.stalux-social ul{flex-wrap:wrap;justify-content:center;gap:1em;margin:0;padding:0;display:flex}.stalux-social ul li{box-sizing:border-box;text-align:center;background-color:var(--white-15p);border-radius:9999px;justify-content:center;align-items:center;width:2.5em;height:2.5em;font-size:large;display:inline-flex;overflow:hidden}.stalux-social ul a,.stalux-social ul .stalux-social-icon-container,.stalux-social ul .stalux-social-custom-icon{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:inline-flex}.stalux-social[data-stalux-social-animate=true] li{animation:.28s cubic-bezier(.2,.8,.2,1) both stalux-social-stalux-social-arrive}.stalux-social[data-stalux-social-animate=true] li:nth-child(2){animation-delay:30ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(3){animation-delay:60ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(4){animation-delay:90ms}.stalux-social[data-stalux-social-animate=true] li:nth-child(5){animation-delay:.12s}.stalux-social[data-stalux-social-animate=true] li:nth-child(6){animation-delay:.15s}.stalux-social[data-stalux-social-animate=true] li:nth-child(n+7){animation-delay:.18s}nav{width:100%;min-width:0;max-width:100%}html{scroll-padding-top:var(--stalux-nav-offset,var(--stalux-site-header-height))}.stalux-site-header{z-index:990;width:100%;min-height:var(--stalux-site-header-min-height);isolation:isolate;justify-content:center;align-items:center;display:flex;position:sticky;top:0}.stalux-nav-scroll-btn[data-visible]{pointer-events:auto;opacity:1}.stalux-nav-scroll-btn[data-side=left]{left:4px}.stalux-nav-scroll-btn[data-side=right]{right:4px}.stalux-nav-scroll-btn svg{stroke:currentColor;stroke-width:2px;fill:none;width:20px;height:20px}.stalux-nav-link,.stalux-nav-link:visited{cursor:pointer;width:100%;color:inherit;min-height:44px;font:inherit;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;display:flex}.stalux-nav-link .nav-icon{stroke:var(--white-full)}.stalux-nav-toggle svg{width:32px;height:32px}.stalux-nav-overlay[data-state=show]{pointer-events:auto;opacity:1;display:block}#stalux-to-archive-archs{margin-top:2em}#stalux-date-date-time{text-shadow:var(--stalux-text-shadow);color:var(--white-full);flex-direction:column;align-items:center;margin-top:2em;display:flex}#stalux-date-date-time #stalux-date-date{min-height:1.25em;margin-bottom:.5em;font-size:2em;line-height:1.25}#stalux-date-date-time #stalux-date-time{font-variant-numeric:tabular-nums;min-height:1.25em;font-size:3em;line-height:1.25}.stalux-author-figure{justify-content:center;align-items:center;display:flex}.stalux-author-figure img{box-shadow:0 0 10px var(--stalux-accent-color);border-radius:9999px;transition:transform .65s ease-in-out}.stalux-author-figure figcaption{text-shadow:var(--stalux-text-shadow);color:var(--white-full);margin-left:1em;font-size:2.5em;font-weight:700}.stalux-author-figure-column figcaption{text-align:center;margin-top:.5em;margin-left:0}.agent-home-summary{clip-path:inset(50%);white-space:normal;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stalux-404-error-content h1{color:var(--white-90p);margin:0;font-size:6rem;font-weight:700}.stalux-404-error-content p{color:var(--white-70p);margin:1rem 0 2rem;font-size:1.5rem}.stalux-404-countdown-text{color:var(--white-50p)!important;margin:-.5rem 0 1.5rem!important;font-size:.95rem!important}.agent-recovery{max-width:42rem;line-height:1.7;margin:0 auto 1.5rem!important;font-size:1rem!important}.agent-recovery a{color:inherit;text-decoration-line:underline}.stalux-theme-info span,.stalux-copyright span{margin:0}.stalux-theme-info a{color:#fffc;margin:0 .2em;text-decoration:none;transition:color .3s}.stalux-beian-beian-info a{color:#ffffffb3;font-size:.9rem;text-decoration:none;transition:color .3s}.stalux-beian-public-security-beian img{width:15px;height:15px;display:inline-block}.stalux-badge-group-summary::-webkit-details-marker,.stalux-badge-group[open] .stalux-badge-group-hint[data-hint=collapsed],.stalux-badge-group:not([open]) .stalux-badge-group-hint[data-hint=expanded]{display:none}.stalux-badge-group[open] .stalux-badge-group-arrow{transform:rotate(90deg)}@media (hover:hover) and (pointer:fine){.stalux-card-post-tags a:hover .stalux-card-post-tag{background:var(--tag-bg-hover)}.stalux-card-post-categories a:hover .stalux-card-post-category{background:var(--category-bg-hover)}.stalux-post-card-shell:hover .stalux-post-card .stalux-card-post-cover img{transform:scale(1.025)}.stalux-post-card-shell:hover .stalux-post-card{box-shadow:var(--card-box-shadow-hover)}.stalux-nav-scroll-btn:hover{background:0 0}.stalux-nav-container:hover .stalux-nav-scroll-btn[data-visible]{opacity:1}.stalux-nav-link:hover .nav-icon,.stalux-nav-link:hover .stalux-nav-text{stroke:var(--stalux-accent-color);color:var(--stalux-accent-color)}.stalux-author-figure>a:hover img{animation:.65s ease-in-out stalux-link-avatar-spin}.stalux-404-home-btn:hover{background:var(--accent-20p);box-shadow:0 4px 12px var(--shadow-dark)}.stalux-theme-info a:hover{color:#fff;text-decoration:none}.stalux-beian-beian-info a:hover,.stalux-beian-public-security-beian:hover{color:#ffffffe6;text-decoration:none}.stalux-badge-group-summary:hover{color:var(--white-70p)}}@media (width>=601px){.stalux-site-nav{isolation:isolate;border-radius:0 0 16px 16px;transition:background-color .18s,box-shadow .18s}.stalux-site-nav[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7}}@media (width<=1100px){.stalux-nav-list{gap:1rem}.stalux-nav-item{margin-left:.6em;margin-right:.6em;font-size:1em}}@media (width<=900px){.stalux-nav-item{margin-left:.25em;margin-right:.25em;font-size:.95em}.stalux-nav-list{gap:.5rem}}@media (width<=768px){.stalux-home-body{box-sizing:border-box;width:100%;max-width:95vw;height:auto;padding:2rem .5rem 1.5rem}.stalux-home-title{word-break:break-all;margin-top:1em;font-size:2em}#stalux-home-show-post-list{margin-top:2em;font-size:1.1em}.stalux-post-list-container ul{margin:1rem}.stalux-footer{padding:1.2rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}.stalux-author{box-sizing:border-box;width:100%;max-width:95vw;margin-top:2em;padding:1em .5em}.stalux-author-figure{gap:.5em;flex-direction:column!important}.stalux-author-figure img{max-width:20vw;max-height:20vw;width:64px!important;height:64px!important}.stalux-author-figure figcaption{text-align:center;word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:90vw;margin-top:.5em;margin-left:0;font-size:1.5em}.stalux-404-error-content h1{font-size:4rem}.stalux-404-error-content p{font-size:1.2rem}.stalux-badges{gap:.3rem}.stalux-badge{width:auto}}@media (width<=600px){html{--stalux-site-header-min-height:4rem}.stalux-nav-toggle[data-state=open]{visibility:hidden;pointer-events:none}.stalux-nav-toggle[data-scrolled]{backdrop-filter:blur(20px)saturate(140%);box-shadow:0 1px 0 var(--white-10p), 0 8px 24px #0000001f;background:#181818c7;border-radius:12px}.stalux-nav-toggle{display:block;position:fixed;top:.75rem;left:.75rem}.stalux-nav-container{overflow:visible}nav{width:auto}.stalux-nav-list{pointer-events:none;z-index:1000;background:var(--black-20p);backdrop-filter:blur(20px);flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;width:min(220px,100vw - 1rem);height:100vh;padding:.5rem 1rem 2rem;position:fixed;top:0;left:0;right:auto;overflow-y:auto;transform:translate(-100%)}.stalux-nav-list[data-state=open]{pointer-events:auto;transform:translate(0)}.stalux-nav-item{border-bottom:1px solid var(--white-10p);flex-shrink:0;width:100%;margin:0;font-size:.9em}.stalux-nav-text{display:inline}.stalux-nav-link{width:100%;min-height:44px;font-size:inherit;padding:.45rem .75rem}.stalux-nav-link .nav-icon{width:18px;height:18px}}@media (width<=480px){.stalux-footer{padding:1rem 0;font-size:.8rem}.stalux-footer-content{gap:.6rem;padding:0 .8rem}}@media (prefers-reduced-motion:reduce){.stalux-social[data-stalux-social-animate=true] li{animation:none}}.stalux-main,.stalux-post-page,.stalux-post-layout>*,.stalux-link-card-content,.stalux-word-list-item,.stalux-word-card{box-sizing:border-box;min-width:0;max-width:100%}.stalux-main{overflow-wrap:anywhere}.stalux-link-shell{min-width:0;max-width:100%;display:block}.stalux-link-card{box-sizing:border-box;width:100%;max-width:100%}.stalux-category-shell{width:100%;min-width:0}.stalux-author-figure>a{flex-shrink:0;display:inline-block}.stalux-author-figure img{display:block}.stalux-post-card-shell,.stalux-category-shell,.stalux-link-shell{position:relative}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-word-card{transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}:is(.stalux-post-card-shell,.stalux-category-shell):focus-within>*,.stalux-link-shell:focus-visible>*{box-shadow:var(--card-box-shadow-hover)}:is(button,summary,[role=button]):focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:3px}@media (prefers-reduced-motion:reduce){.stalux-main *,.stalux-main :before,.stalux-main :after{transition-duration:0s!important;animation:none!important}.stalux-post-card,.stalux-category-card,.stalux-link-card,.stalux-link-card-content,.stalux-card-post-cover img,.stalux-category-icon,.stalux-author-figure img,.stalux-link-card-avatar img{transform:none!important}}@keyframes stalux-social-stalux-social-arrive{0%{opacity:0;transform:translateY(.75rem)rotate(-12deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes stalux-random-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-link-avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes stalux-word-word-glow{0%{box-shadow:0 0 30px var(--accent-50p), 0 0 80px var(--accent-30p), var(--shadow-lg);transform:scale(1.02)}to{box-shadow:0 0 20px var(--accent-40p), 0 0 60px var(--accent-20p), var(--shadow-lg);transform:scale(1)}}}@layer utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visible{visibility:visible}.absolute{position:absolute}.static{position:static}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-full{height:100%}.flex{display:flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.b,.border{border-width:1px}.text-inherit{color:inherit}.no-underline{text-decoration:none}.outline{outline-style:solid}}@layer theme;@layer base{html,body{color:#fff;width:100%;height:100%;margin:0;& main{flex:1}scrollbar-color:#4a4a4a #2a2a2a;font-family:var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;text-rendering:optimizelegibility;line-height:1.25;display:block}body{height:auto;min-height:100%}html{scrollbar-gutter:stable;background-color:var(--stalux-bg-color,#202020)}html[data-clarity-id]{opacity:1!important}a{color:inherit;cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;text-decoration:none;transition:color .2s,text-shadow .2s;position:relative}.a-none{cursor:pointer;text-decoration-skip-ink:auto;background-color:#0000;color:inherit!important;text-decoration:none!important}.a-none:after{display:none!important}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):after{content:"";background:linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));transform-origin:0;pointer-events:none;width:100%;height:1px;transition:transform .25s cubic-bezier(.25,.9,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible:after,a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active:after{transform:scaleX(1)}@media (hover:hover) and (pointer:fine){a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover:after{transform:scaleX(1)}}a:active,a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){a:hover{text-decoration:none}}a:focus{outline:none}a:focus-visible{outline:2px solid var(--stalux-accent-color);outline-offset:2px}ul{margin:0;padding:0;list-style:none}.none{display:none}.stalux-root{color:#fff;min-height:100vh}.stalux-main{min-height:calc(100vh - var(--stalux-site-header-height,3rem))}:root{--stalux-bg-color:#202020;--stalux-bg-filter:none;--stalux-site-header-min-height:3.75rem;--stalux-site-header-height:var(--stalux-site-header-min-height);--stalux-text-shadow:var(--stalux-accent-color) .08rem .08rem .18rem;--stalux-accent-color:#eab308;--stalux-accent-rgb:234 179 8;--surface-glass:var(--black-05p);--surface-glass-shadow:var(--shadow-sidebar);--card-bg:var(--surface-glass);--card-border:#ffffff1a;--card-box-shadow:0 10px 24px #00000014;--card-box-shadow-hover:0 14px 28px #0000001f;--tag-bg:#ffffff1f;--tag-bg-hover:#ffffff2e;--category-bg:#ffffff14;--category-bg-hover:#ffffff24;--date-bg:#42a0ff2e;--date-border:#42a0ff40;--updated-bg:#ffc94733;--updated-border:#ffc9474d;--white-full:#fff;--white-95p:#fffffff2;--white-90p:#ffffffe6;--white-85p:#ffffffd9;--white-80p:#ffffffe6;--white-78p:#ffffffc7;--white-75p:#ffffffbf;--white-70p:#ffffffdb;--white-60p:#fff9;--white-50p:#ffffff80;--white-30p:#ffffff4d;--white-20p:#fff3;--white-15p:#ffffff26;--white-10p:#ffffff1a;--white-05p:#ffffff0d;--black-30p:#0000004d;--black-20p:#0003;--black-15p:#00000026;--black-10p:#0000001a;--black-05p:#0000000d;--accent-90p:rgb(var(--stalux-accent-rgb) / .9);--accent-85p:rgb(var(--stalux-accent-rgb) / .85);--accent-80p:rgb(var(--stalux-accent-rgb) / .8);--accent-70p:rgb(var(--stalux-accent-rgb) / .7);--accent-60p:rgb(var(--stalux-accent-rgb) / .6);--accent-50p:rgb(var(--stalux-accent-rgb) / .5);--accent-40p:rgb(var(--stalux-accent-rgb) / .4);--accent-30p:rgb(var(--stalux-accent-rgb) / .3);--accent-20p:rgb(var(--stalux-accent-rgb) / .2);--transition-fast:.18s ease;--transition-medium:.2s ease;--transition-normal:.25s ease;--transition-slow:.3s ease;--transition-slower:.5s ease;--transition-slowest:.6s ease;--easing-bounce:cubic-bezier(.175, .885, .32, 1.275);--space-2xs:.25rem;--space-xs:.75rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-full:9999px;--shadow-sm:0 2px 5px #0000001a;--shadow-md:0 6px 16px #0003;--shadow-lg:0 8px 20px #0000004d;--shadow-xl:0 12px 26px #00000047;--shadow-sidebar:0 16px 20px -12px #000000d6, 10px 4px 16px -12px #00000094, -10px 4px 16px -12px #00000094;--shadow-raised-hover:0 20px 24px -13px #000000e6, 12px 5px 18px -13px #000000ad, -12px 5px 18px -13px #000000ad;--shadow-dark:#000000c0;--muted-text:#bbb;--font-body:"Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;--font-size-subtitle:1.35rem;--font-size-base:1.1rem;--font-size-small:.95rem;--font-size-smaller:.9rem;--font-size-tiny:.85rem;--border-thin:1px;--border-medium:2px;--border-thick:3px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:4px;transition:background .3s ease-out}@media (hover:hover) and (pointer:fine){::-webkit-scrollbar-thumb:hover{background:#5a5a5a}}::-webkit-scrollbar-corner{background:#2a2a2a}.bg-layer{z-index:-10;background-position:50%;background-repeat:repeat;background-size:auto;background-color:var(--stalux-bg-color,transparent);filter:var(--stalux-bg-filter,none);pointer-events:none;opacity:0;forced-color-adjust:none;color-scheme:light only;transition:opacity .65s ease-in-out;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.bg-layer{transition-duration:0s}}footer{padding:var(--space-lg) var(--space-md);text-align:center;color:var(--muted-text);border-top:1px solid var(--white-10p);backdrop-filter:blur(16px);background:linear-gradient(#0c0e122e,#0c0e12b8)}}@media print{[data-stalux-offscreen-code],[data-stalux-offscreen-svg]{content-visibility:visible!important;contain-intrinsic-block-size:none!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stagger-children>:first-child{animation-delay:.1s}.stagger-children>:nth-child(2){animation-delay:.15s}.stagger-children>:nth-child(3){animation-delay:.2s}.stagger-children>:nth-child(4){animation-delay:.25s}.stagger-children>:nth-child(5){animation-delay:.3s}.stagger-children>:nth-child(n+6){animation-delay:.35s}@keyframes stalux-vt-title-swap-old{to{opacity:0;filter:blur(2px);transform:scale(.94)}}@keyframes stalux-vt-title-swap-new{0%{opacity:0;filter:blur(2px);transform:scale(1.05)}70%{filter:blur();transform:scale(.98)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes stalux-vt-old-route{0%{opacity:1;transform:translate(0,0)}45%{opacity:.5}to{opacity:0;transform:translate(-6%)}}@keyframes stalux-vt-new-route{0%{opacity:0;filter:blur(1.2px);transform:translate(6%)scale(.985)}60%{opacity:.9;filter:blur();transform:translate(-.8%)scale(1)}to{opacity:1;filter:blur();transform:translate(0,0)}}::view-transition-old(stalux-page){animation:.38s cubic-bezier(.22,.72,.22,1) both stalux-vt-old-route}::view-transition-new(stalux-page){animation:.46s cubic-bezier(.22,.72,.22,1) both stalux-vt-new-route}::view-transition-old(stalux-post-title){animation:.26s cubic-bezier(.22,.72,.22,1) both stalux-vt-title-swap-old}::view-transition-new(stalux-post-title){animation:.32s cubic-bezier(.22,.72,.22,1) both stalux-vt-title-swap-new}@keyframes stalux-vt-side-out{to{opacity:0;transform:translate3d(var(--stalux-side-out-x,-14px), 0, 0)}}@keyframes stalux-vt-side-in{0%{opacity:0;transform:translate3d(var(--stalux-side-in-x,14px), 0, 0)}to{opacity:1;transform:translate(0,0)}}html,.stalux-main,.stalux-main *,[data-astro-transition-persist],[data-stalux-site-header],[data-stalux-site-header] *,.bg-layer,.bg-layer *,[data-stalux-scroll-sentinel],[data-stalux-scroll-sentinel] *,[data-stalux-back-to-top],[data-stalux-back-to-top] *{view-transition-name:none!important}[data-stalux-scroll-sentinel]{visibility:hidden;pointer-events:none;width:1px;height:1px;position:absolute;top:240px;left:0}@keyframes stalux-taxonomy-enter{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-taxonomy-enter-back{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-article-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-article-enter-back{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes stalux-sidebar-left-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-out{to{opacity:0;transform:translate(-10px)}}@keyframes stalux-sidebar-left-back-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-left-back-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-out{to{opacity:0;transform:translate(10px)}}@keyframes stalux-sidebar-right-back-in{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:translate(0)}}@keyframes stalux-sidebar-right-back-out{to{opacity:0;transform:translate(-10px)}}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){filter:none!important;animation-duration:1ms!important;animation-delay:0s!important;transform:none!important}.stalux-main,.stalux-main *,.postLayout *{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
 /*$vite$:1*/

package/src/styles/motion.css

@@ -28,35 +28,163 @@
     animation-delay: 0.35s;
 }
 
-/* Keep route motion on the page shell; named child elements handle continuity. */
-@keyframes stalux-page-exit {
+/* =========================================================
+   View Transitions：主内容 slide + 淡入 + 新内容 scale+blur 到清晰，
+   与 Astro 默认的纯淡入淡出不同 — 旧内容沿方向快速滑出，新内容对向滑入
+   带轻微 scale 从 0.985 拉回 1，配合 1.2px blur 再还原。
+   forwards (direction = "forward" | "push"): 旧内容向左滑出，新内容从右滑入
+   backwards (direction = "back" | "traverse"): 镜像方向
+   持久壳层（header、footer、背景、sentinel、back-to-top 按钮）设
+   view-transition-name: none 保留 DOM、不参与原生动画；标题/侧边栏/
+   卡片标题用局部 transition:animate 独立配置，与 root 伪元素分层。
+   方向值（forward | back）由 view-transitions.ts 写入 CSS 变量
+   --stalux-vt-old / --stalux-vt-new，伪元素继承后用 animation-name 切换。
+   ========================================================= */
+
+/* 标题 / 卡片标题交叉淡入 + 轻微缩放：让列表→详情的同名元素有“形态连续感” */
+@keyframes stalux-vt-title-swap-old {
     to {
         opacity: 0;
+        transform: scale(0.94);
+        filter: blur(2px);
     }
 }
 
-@keyframes stalux-page-enter {
+@keyframes stalux-vt-title-swap-new {
     from {
         opacity: 0;
-        transform: translateY(9px);
+        transform: scale(1.05);
+        filter: blur(2px);
+    }
+    70% {
+        transform: scale(0.98);
+        filter: blur(0px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: scale(1);
+        filter: blur(0px);
     }
 }
 
-@keyframes stalux-page-enter-back {
+/* 主内容 View Transition 动画。
+   ⚠ 约束 1：::view-transition-old() / ::view-transition-new() 属于独立 UA 伪元素树，
+   与 <html> 之间**没有祖先选择器关系**。
+   ⚠ 约束 2：CSS 变量 fallback 字符串（`var(--x, keyframesName)`）不会被 Rolldown
+   tree-shake 静态追踪 —— fallback 里的 keyframes 名会被判断为"没被引用"而裁掉。
+   所以伪元素规则必须写成**直接引用 keyframes 的完整 animation shorthand**。
+   ⚠ 约束 3：方向切换暂时放弃（祖先选择器命不中伪元素），backward 暂不镜像。
+   后续可用 WAAPI 运行时覆盖伪元素 keyframes 实现方向切换。 */
+
+@keyframes stalux-vt-old-route {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    45% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(-6%, 0, 0);
+    }
+}
+
+@keyframes stalux-vt-new-route {
+    0% {
+        opacity: 0;
+        transform: translate3d(6%, 0, 0) scale(0.985);
+        filter: blur(1.2px);
+    }
+    60% {
+        opacity: 0.9;
+        transform: translate3d(-0.8%, 0, 0) scale(1);
+        filter: blur(0px);
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        filter: blur(0px);
+    }
+}
+
+::view-transition-old(stalux-page) {
+    animation: stalux-vt-old-route 380ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+}
+
+::view-transition-new(stalux-page) {
+    animation: stalux-vt-new-route 460ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+}
+
+/* 标题交叉淡入：列表→详情 / 详情→详情 之间同名标题共享 transition:name 时
+   用一套独立动画（比 root 更快、更有“形态感”）。
+   注意：::view-transition-old/new 伪元素里不能放属性选择器（MDN 明确只接受
+   自定义 transition-name 字符串和 * 通配；属性选择器属于 legacy 浏览器实验
+   语法，lightningcss minify 不支持）。 */
+::view-transition-old(stalux-post-title) {
+    animation: stalux-vt-title-swap-old 260ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+}
+
+::view-transition-new(stalux-post-title) {
+    animation: stalux-vt-title-swap-new 320ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
+}
+
+/* 侧边栏 — 独立于 root：沿内容方向做 12px 平移 + 淡入淡出，
+   让文章详情页左右栏与主内容分层出现。 */
+@keyframes stalux-vt-side-out {
+    to {
+        opacity: 0;
+        transform: translate3d(var(--stalux-side-out-x, -14px), 0, 0);
+    }
+}
+
+@keyframes stalux-vt-side-in {
     from {
         opacity: 0;
-        transform: translateY(-9px);
+        transform: translate3d(var(--stalux-side-in-x, 14px), 0, 0);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translate3d(0, 0, 0);
     }
 }
 
+/* 持久壳层：header、背景、sentinel、back-to-top 按钮不参与 View Transition 伪元素；
+   直接设 view-transition-name: none 让浏览器为它们各自做即时更新。
+   这避免了原生快照把大体积 header 或整张背景图塞进 pseudo-element 树、
+   也与 view-transitions.ts 里的 .scrollY 优化保持一致 — 不强制 UI 同步。 */
+html,
+.stalux-main,
+.stalux-main *,
+[data-astro-transition-persist],
+[data-stalux-site-header],
+[data-stalux-site-header] *,
+.bg-layer,
+.bg-layer *,
+[data-stalux-scroll-sentinel],
+[data-stalux-scroll-sentinel] *,
+[data-stalux-back-to-top],
+[data-stalux-back-to-top] * {
+    view-transition-name: none !important;
+}
+
+/* BackToTop visibility sentinel */
+[data-stalux-scroll-sentinel] {
+    position: absolute;
+    top: 240px;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+/* =========================================================
+   下面保留的是 Astro transition:animate 用的 web 动画 keyframes，
+   供 getSidebarAnimation("left"|"right") 和分类/文章页内局部
+   transition:animate 消费；与 View Transition 伪元素层互不冲突。
+   ========================================================= */
+
 @keyframes stalux-taxonomy-enter {
     from {
         opacity: 0;
@@ -173,35 +301,16 @@
     }
 }
 
-/* The native router keeps document/history semantics; content motion uses a
-   short Web Animations API effect instead of page-sized snapshot surfaces.
-   Persisted shell elements remain live and stationary during the swap. */
-html,
-.stalux-main,
-.stalux-main *,
-[data-astro-transition-persist] {
-    view-transition-name: none !important;
-}
-
-/* BackToTop visibility sentinel: lives in document coordinates and is observed
-   by an IntersectionObserver, so route swaps never force a synchronous scroll
-   read inside the native transition's update callback. */
-[data-stalux-scroll-sentinel] {
-    position: absolute;
-    top: 240px;
-    left: 0;
-    width: 1px;
-    height: 1px;
-    visibility: hidden;
-    pointer-events: none;
-}
-
+/* prefers-reduced-motion：关闭 View Transition 伪元素上的所有动画，
+   但保留伪元素本身（浏览器会直接从 old 切到 new，视觉等价于无动画的软导航） */
 @media (prefers-reduced-motion: reduce) {
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
         animation-duration: 1ms !important;
         animation-delay: 0ms !important;
+        filter: none !important;
+        transform: none !important;
     }
 
     .stalux-main,

package/src/components/stalux/layout/navigationProgress.astro

@@ -1,55 +0,0 @@
-<div
-    data-stalux-navigation-progress
-    aria-hidden="true"
-    transition:persist="stalux-navigation-progress"
-    transition:name="stalux-navigation-progress"
-    transition:animate="none"
-></div>
-
-<style is:global>
-[data-stalux-navigation-progress] {
-    position: fixed;
-    inset: 0 0 auto;
-    height: 2px;
-    z-index: 2147483647;
-    pointer-events: none;
-    background: var(--stalux-accent-color, #eab308);
-    transform: scaleX(0);
-    transform-origin: left;
-    opacity: 0;
-    transition:
-        transform 450ms ease-out,
-        opacity 120ms ease-out;
-}
-[data-stalux-navigation-progress][data-stage] {
-    opacity: 1;
-}
-[data-stalux-navigation-progress][data-stage="complete"] {
-    transition:
-        transform 160ms ease-out,
-        opacity 120ms ease-out;
-}
-[data-stalux-navigation-progress]:not([data-stage]) {
-    transition: opacity 120ms ease-out;
-}
-::view-transition-group(stalux-navigation-progress) {
-    z-index: 2147483647;
-}
-::view-transition-old(stalux-navigation-progress) {
-    display: none;
-}
-::view-transition-new(stalux-navigation-progress) {
-    animation: none;
-}
-@media (prefers-reduced-motion: reduce) {
-    [data-stalux-navigation-progress],
-    [data-stalux-navigation-progress][data-stage] {
-        transition: none;
-    }
-}
-@media print {
-    [data-stalux-navigation-progress] {
-        display: none;
-    }
-}
-</style>

package/src/scripts/navigation-progress.ts

@@ -1,147 +0,0 @@
-import type {
-    TransitionBeforePreparationEvent,
-    TransitionBeforeSwapEvent,
-} from "astro:transitions/client";
-import { prepareRouteMotion } from "./route-motion";
-
-type Stage = "loading" | "prepared" | "swapped" | "loaded" | "complete";
-interface Navigation {
-    signal: AbortSignal;
-    stage: Stage;
-    swapped: boolean;
-    loaded: boolean;
-    animated: boolean;
-    progress: number;
-    detach: () => void;
-}
-
-/** Real milestones with bounded visual easing while waiting; never a download percentage. */
-export function installNavigationProgress(): void {
-    let active: Navigation | undefined;
-    let swapping: Navigation | undefined;
-    let trickleTimer: ReturnType<typeof setTimeout> | undefined;
-    let hideTimer: ReturnType<typeof setTimeout> | undefined;
-    const element = () => document.querySelector<HTMLElement>("[data-stalux-navigation-progress]");
-    const paint = (stage?: Stage, progress = 0) => {
-        const bar = element();
-        if (!bar) return;
-        bar.style.transform = `scaleX(${progress})`;
-        if (stage) bar.dataset.stage = stage;
-        else delete bar.dataset.stage;
-    };
-    const clear = () => {
-        clearTimeout(trickleTimer);
-        trickleTimer = undefined;
-        swapping = undefined;
-        clearTimeout(hideTimer);
-        hideTimer = undefined;
-        active?.detach();
-        active = undefined;
-        paint();
-    };
-    const advance = (navigation: Navigation, stage: Stage) => {
-        if (active !== navigation || navigation.signal.aborted) return;
-        navigation.stage = stage;
-        const milestones = {
-            loading: 0.08,
-            prepared: 0.65,
-            swapped: 0.85,
-            loaded: 0.95,
-            complete: 1,
-        };
-        navigation.progress = Math.max(navigation.progress, milestones[stage]);
-        paint(stage, navigation.progress);
-    };
-    const complete = (navigation: Navigation) => {
-        if (
-            active !== navigation ||
-            navigation.stage === "complete" ||
-            !navigation.loaded ||
-            !navigation.animated
-        )
-            return;
-        clearTimeout(trickleTimer);
-        trickleTimer = undefined;
-        advance(navigation, "complete");
-        navigation.detach();
-        hideTimer = setTimeout(() => {
-            if (active === navigation) clear();
-        }, 250);
-    };
-
-    const trickle = (navigation: Navigation) => {
-        if (active !== navigation || navigation.signal.aborted || navigation.stage === "complete")
-            return;
-        const limits = { loading: 0.6, prepared: 0.8, swapped: 0.92, loaded: 0.98 };
-        const limit = limits[navigation.stage];
-        navigation.progress += (limit - navigation.progress) * 0.12;
-        paint(navigation.stage, navigation.progress);
-        trickleTimer = setTimeout(() => trickle(navigation), 500);
-    };
-
-    document.addEventListener("astro:before-preparation", (event) => {
-        clear();
-        const preparation = event as TransitionBeforePreparationEvent;
-        if (preparation.signal.aborted || event.defaultPrevented) return;
-        const abort = () => {
-            if (active === navigation) clear();
-        };
-        const navigation: Navigation = {
-            signal: preparation.signal,
-            stage: "loading",
-            progress: 0.08,
-            swapped: false,
-            loaded: false,
-            animated: false,
-            detach: () => preparation.signal.removeEventListener("abort", abort),
-        };
-        active = navigation;
-        preparation.signal.addEventListener("abort", abort, { once: true });
-        paint("loading", navigation.progress);
-        trickleTimer = setTimeout(() => trickle(navigation), 500);
-        const loader = preparation.loader;
-        preparation.loader = async () => {
-            try {
-                await loader();
-                if (preparation.defaultPrevented) abort();
-                else advance(navigation, "prepared");
-            } catch (error) {
-                abort();
-                throw error;
-            }
-        };
-        // A later listener may cancel preparation before Astro calls the loader.
-        queueMicrotask(() => {
-            if (preparation.defaultPrevented) abort();
-        });
-    });
-    document.addEventListener("astro:before-swap", (event) => {
-        const swap = event as TransitionBeforeSwapEvent;
-        const navigation = active;
-        if (!navigation || navigation.signal !== swap.signal || swap.signal.aborted) return;
-        swapping = navigation;
-        const finished = () => {
-            if (active !== navigation || navigation.signal.aborted) return;
-            navigation.animated = true;
-            complete(navigation);
-        };
-        // Skipped/rejected animations must not leave a completed navigation stuck.
-        void prepareRouteMotion(swap).finished.then(finished);
-    });
-    document.addEventListener("astro:after-swap", () => {
-        if (!active || swapping !== active || active.signal.aborted) return;
-        swapping = undefined;
-        active.swapped = true;
-        advance(active, "swapped");
-    });
-    document.addEventListener("astro:page-load", () => {
-        if (!active?.swapped || active.signal.aborted || active.stage === "complete") return;
-        active.loaded = true;
-        advance(active, "loaded");
-        complete(active);
-    });
-    window.addEventListener("pagehide", clear);
-    window.addEventListener("pageshow", (event) => {
-        if (event.persisted) clear();
-    });
-}