/* ========================================================================
   「纸上生风」刻本风精修层  guji-pro.css
   ------------------------------------------------------------------
   定位：叠在 guji-theme.css 之上的"灵动感"层，不改任何布局属性。
   设计原则：
   1. 只动 transform / opacity / box-shadow / background —— 布局零改动；
   2. 全部覆盖包在 body:not(.night-mode):not(.eye-mode) —— 夜间/护眼零影响；
   3. 全部动效包在 @media (prefers-reduced-motion: no-preference) —— 可关闭；
   4. 滚动驱动动画只在 @supports (animation-timeline: ...) 内启用，
      不支持的浏览器自动无动效（渐进增强，零 JS）；
   5. 入场动画一律 animation-fill-mode: backwards —— 动画区间结束后
      不再占用 transform，不与悬停浮起冲突；
   6. 删除模板里本文件的 <link> 一行即可完整回滚。
   ======================================================================== *//* ---------- 0. 精修令牌（继承并微调 guji-theme） ---------- */body:not(.night-mode):not(.eye-mode){--gj-ease-out:cubic-bezier(0.22, 1, 0.36, 1);--gj-rise:14px;/* 桌面端入场位移 */--gj-progress-w:2px/* 阅读进度墨线粗细 */}@media (max-width: 767px){body:not(.night-mode):not(.eye-mode){--gj-rise:8px/* 手机端入场幅度减半，防晕 */}}/* ---------- 1. 阅读进度墨线（朱砂细线，随滚动生长） ---------- *//* 站点首页/人物页的滚动发生在内部容器（#contentArea / .character-main），
   因此用命名滚动时间线（timeline-scope 提升到 body）驱动，
   而不是 scroll(root)；进度线 fixed 在视口顶端。 */@supports (animation-timeline: scroll()){body:not(.night-mode):not(.eye-mode){timeline-scope:--gj-content-scroll}/* 首页与人物页的真实滚动容器 */body:not(.night-mode):not(.eye-mode) :is(#contentArea, .character-main){scroll-timeline:--gj-content-scroll block}@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode)::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--gj-progress-w);background:linear-gradient(90deg,
                var(--gj-cinnabar-hi, #b04a3c), var(--gj-cinnabar-lo, #8f2f24));transform-origin:0 50%;transform:scaleX(0);z-index:9000;pointer-events:none;animation:gj-progress-line linear both;animation-timeline:--gj-content-scroll}}}@keyframes gj-progress-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}/* ---------- 2. 顶栏滚动收紧（只加深投影，不改高度） ---------- */@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) .top-bar{animation:gj-topbar-deepen linear both;animation-timeline:--gj-content-scroll;animation-range:0px 160px}}}@keyframes gj-topbar-deepen{to{box-shadow:0 4px 18px rgba(74, 58, 34, 0.14)}}/* ---------- 3. 首屏揭幕：正文纸页一次性淡入 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) #article-container,body:not(.night-mode):not(.eye-mode) .member-container,body:not(.night-mode):not(.eye-mode) .character-wrap{animation:gj-enter 0.55s var(--gj-ease-out) backwards}}@keyframes gj-enter{from{opacity:0;transform:translateY(calc(var(--gj-rise) / 2))}to{opacity:1;transform:none}}/* ---------- 4. 滚动入场：卡片进入视口时依次浮现 ---------- *//* 仅在支持 scroll-driven animations 的浏览器启用；
   fill-mode 用 backwards：动画区间外不占用 transform，悬停浮起不受影响 */@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) :is(
            .story-card,
            .dyn-card,
            .membership-card,
            #recommendationCard,
            .fun-heatmap-card,
            .fun-history-card,
            .fun-quote-card,
            .fun-quiz-card,
            .fun-dynasty-card,
            .qa-module,
            .privilege-item,
            .avatar-option,
            .member-menu,
            .content-block
        ){animation:gj-rise-in backwards;animation-timeline:view();animation-range:entry 0% entry 55%}}}@keyframes gj-rise-in{from{opacity:0;transform:translateY(var(--gj-rise))}to{opacity:1;transform:none}}/* ---------- 5. 导航墨点：悬停时朱砂细线从中间晕开 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) .nav a:not(.active),body:not(.night-mode):not(.eye-mode) .nav .nav-btn:not(.active){background-image:linear-gradient(
            var(--gj-cinnabar, #a63a2e), var(--gj-cinnabar, #a63a2e));background-repeat:no-repeat;background-size:0% 2px;background-position:50% calc(100% - 2px);transition:background-size 0.35s var(--gj-ease-out),background-color 0.2s ease,color 0.2s ease}@media (hover: hover){body:not(.night-mode):not(.eye-mode) .nav a:not(.active):hover,body:not(.night-mode):not(.eye-mode) .nav .nav-btn:not(.active):hover{background-size:62% 2px}}}/* ---------- 6. 目录签条：悬停时左侧朱砂签条滑入 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) .chapter-item:not(.active),body:not(.night-mode):not(.eye-mode) .volume-div:not(.active){background-image:linear-gradient(
            var(--gj-cinnabar, #a63a2e), var(--gj-cinnabar, #a63a2e));background-repeat:no-repeat;background-size:3px 0%;background-position:0 50%;transition:background-size 0.3s var(--gj-ease-out),background-color 0.18s ease,color 0.18s ease}@media (hover: hover){body:not(.night-mode):not(.eye-mode) .chapter-item:not(.active):hover,body:not(.night-mode):not(.eye-mode) .volume-div:not(.active):hover{background-size:3px 62%}}}/* ---------- 7. 卡片饰线：悬停时朱砂线展开呼吸 ---------- */@media (prefers-reduced-motion: no-preference) and (hover: hover){body:not(.night-mode):not(.eye-mode) .story-card::before,body:not(.night-mode):not(.eye-mode) .fun-heatmap-card::before,body:not(.night-mode):not(.eye-mode) .fun-history-card::before,body:not(.night-mode):not(.eye-mode) .fun-quote-card::before,body:not(.night-mode):not(.eye-mode) .fun-quiz-card::before,body:not(.night-mode):not(.eye-mode) .fun-dynasty-card::before{transform:scaleX(0.45);opacity:0.35;transform-origin:50% 50%;transition:transform 0.45s var(--gj-ease-out),opacity 0.45s ease}body:not(.night-mode):not(.eye-mode) .story-card:hover::before,body:not(.night-mode):not(.eye-mode) .fun-heatmap-card:hover::before,body:not(.night-mode):not(.eye-mode) .fun-history-card:hover::before,body:not(.night-mode):not(.eye-mode) .fun-quote-card:hover::before,body:not(.night-mode):not(.eye-mode) .fun-quiz-card:hover::before,body:not(.night-mode):not(.eye-mode) .fun-dynasty-card:hover::before{transform:scaleX(1);opacity:0.85}}/* ---------- 8. 金句卡：悬停时纸页微倾（钤印手感） ---------- */@media (prefers-reduced-motion: no-preference) and (hover: hover){body:not(.night-mode):not(.eye-mode) .fun-quote-card:hover{transform:translateY(-3px) rotate(-0.5deg)}}/* ---------- 9. 按压手感：主按钮与控件按下时轻微回缩 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) :is(
        .mode-btn, .settings-btn, .more-btn, .music-nav-btn,
        .qa-input-group button, .buy-btn, .login-btn, .register-btn,
        .auth-btn, .tool-btn, .character-cta,
        .game-start-btn, .pmd-btn-primary, .fh-btn-primary, .fq-btn-primary
    ):active{transform:scale(0.96);transition-duration:0.08s}}/* ---------- 10. logo 印章：悬停时钤印微旋 ---------- */@media (prefers-reduced-motion: no-preference) and (hover: hover){body:not(.night-mode):not(.eye-mode) .logo .desktop-only{transition:box-shadow 0.25s ease,transform 0.35s var(--gj-ease-out)}body:not(.night-mode):not(.eye-mode) .logo:hover .desktop-only{transform:rotate(-1.5deg) scale(1.03)}}/* ---------- 11. 聊天助手浮钮：呼吸召唤 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) .chatbot-float-btn{animation:gj-breathe 3.2s ease-in-out 2.5s infinite}}@keyframes gj-breathe{0%,100%{box-shadow:var(--gj-shadow-btn, 0 2px 6px rgba(143, 47, 36, 0.30))}50%{box-shadow:0 4px 16px rgba(143, 47, 36, 0.45),0 0 0 6px rgba(166, 58, 46, 0.08)}}/* ---------- 12. 选中文字：朱砂纸捻感（沿用并统一三端） ---------- */body:not(.night-mode):not(.eye-mode) ::selection{background:rgba(166, 58, 46, 0.16);color:var(--gj-ink, #2b2620)}/* ---------- 13. 平滑细节：图片与卡片内容过渡 ---------- */@media (prefers-reduced-motion: no-preference){body:not(.night-mode):not(.eye-mode) .manuscript-image,body:not(.night-mode):not(.eye-mode) .character-card img{transition:transform 0.4s var(--gj-ease-out),box-shadow 0.4s ease}@media (hover: hover){body:not(.night-mode):not(.eye-mode) .manuscript-image:hover{transform:translateY(-2px)}}}/* ---------- 14. 移动端减负：呼吸动画关闭，入场保留 ---------- */@media (max-width: 767px){body:not(.night-mode):not(.eye-mode) .chatbot-float-btn{animation:none}}