/* ==========================================================
   seaweed-vignette.css — 背景元素 (Backlog #60-fix-3 终态)
   ------------------------------------------------------------
   Backlog #60-fix-2 (`filter: blur`) 失败: 模糊后模态文字仍受影响阅读
                     (用户原话: "现在还是影响阅读了")
   Backlog #60-fix-3: 改用 `opacity: 0` 让背景元素直接消失
                     · 不模糊, 直接看不见
                     · 模态独占视觉, 阅读体验干净
                     · 300ms 淡出 (用户感觉"直接" 但仍有平滑过渡)

   4 文件架构 (按依赖方向, 从下到上):
       ┌────────────────────────────────────────────────────────┐
       │ index.html 控制加载顺序                                │
       │   <link>   seaweed-vignette.css   ← 本文件             │
       │   <script> seaweed-curve.js       (纯数学)            │
       │   <script> seaweed-vignette.js    (DOM 单例, 加 .active)│
       │   <script> seaweed-branch-modal.js(入口编排)          │
       │   <script> about-me.js            (用户)              │
       └────────────────────────────────────────────────────────┘

   8 轮 vignette 演进 (踩坑回顾):
       · #59 阶段 1:    CSS radial mask, 没用 mask-mode → Chrome 默认 luminance, 元素被全藏
       · #59-fix:       加 mask-mode: alpha, 椭圆 60%×65% → 椭圆不够大
       · #59-fix-2:     拿掉 mask, 14px 全屏 blur → uniform blur, 文字 invisible
       · #59-fix-3:     blur 减弱 20→14px + modal z-index 10000001 → 文字仍 faint
       · #59-fix-4:     椭圆 75%×80% + mask-mode: alpha 显式 + blur 10px → mask 还是失效
       · #59-fix-5:     退回 uniform blur 8px → 整个视口模糊, 模态区也模糊
       · #60-fix:       inline SVG mask + mask-mode: luminance → backdrop 层不被 mask 裁剪
       · #60-fix-2:     改用 filter: blur() 打 #scene + #section-about-me → 仍影响阅读
       · #60-fix-3:     **本轮**: 放弃 blur, 改用 opacity: 0, 背景直接消失
                        · body.modal-open #scene { opacity: 0 }
                        · body.modal-open #section-about-me { opacity: 0 }
                        → 模态独占视觉, 阅读体验干净 ← 终态

   终态设计 (Backlog #60-fix-3):
       · body.modal-open #scene { opacity: 0; pointer-events: none }
         — 背景海草 canvas 直接消失
       · body.modal-open #section-about-me { opacity: 0; pointer-events: none }
         — about-me 卡片 + 个人照片直接消失
       · transition: opacity 0.3s (用户感觉"直接" 但仍有平滑过渡)
       · 模态 (#about-me-modal z-index 9999999, container 10000001) 独占视觉
       · 模态文字 (rgba(10, 31, 36, 0.78+)) 在清晰米白底上, 完全无干扰
       · seaweed-vignette.js 仍调 .show()/.hide() 加 .active class, 但本文件的核心效果是 opacity: 0

   z-index 栈 (终态):
       · body:              0-5
       · seaweed-vignette:  9999990 (保留, 仅作径向 fog 渐变叠加, 边缘米白雾)
       · seaweed-frame:     9999998
       · modal overlay:     9999999
       · modal container:   10000001 (+ isolation: isolate)
   ========================================================== */

/* seaweed-branch-vignette 仍保留, 作为径向 fog 渐变叠加
   · 中心 70% 透明 (modal 区完全清晰)
   · 边缘 95-100% 米白雾 (边缘 fog 感)
   · 因为背景已 opacity: 0, 这个 vignette 现在主要是装饰性的
     (在背景消失后, 给边缘加一层米白雾, 让模态周围有"光晕"感) */
.seaweed-branch-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999990;
    background: radial-gradient(ellipse 70% 75% at center,
        rgba(232, 226, 211, 0)    0%,
        rgba(232, 226, 211, 0)   70%,
        rgba(232, 226, 211, 0.5) 95%,
        rgba(232, 226, 211, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.seaweed-branch-vignette.active {
    opacity: 1;
}

/* Backlog #60-fix-3: 模态打开时, 背景元素直接消失 (不模糊, 不残留)
   · #scene: 背景海草 canvas (整页背景)
   · #section-about-me: about-me 卡片 + 个人照片
   · 用户原话: "建议弹出模态框的时候, 后面的照片和卡片直接消失吧,
                现在还是影响阅读了"
   · opacity: 0 (完全看不见) + pointer-events: none (不可点击)
   · 0.3s 淡出过渡 (用户感觉"直接" 但仍有平滑感)
   · 模态 z-index 10000001 在它们之上, 完全独占视觉
   · 关闭模态时, 背景 0.3s 淡入回来 */

/* base state: 加 transition 让 opacity 变化平滑 */
#scene,
#section-about-me {
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* modal open state: 背景直接消失 */
body.modal-open #scene,
body.modal-open #section-about-me {
    opacity: 0;
    pointer-events: none;
}

/* [Backlog #95 · 2026-09-17] 跨模态跳转"背景内容不显示"增强:
   1. Backlog #60-fix-3 只覆盖 #scene + #section-about-me 这 2 个元素,
      portfolio / resume-section / life-collage / contact 等 .content-section
      还是会露出来. 跟 modal open / resume modal open 任一 body class 联动,
      把所有 .content-section 隐藏, 模态独占视觉.
   2. Resume Modal 用 body.resume-modal-open 而不是 body.modal-open,
      所以 Backlog #37/#60-fix-3 的 #scene / #diverOverlayCanvas / #section-about-me
      hide 规则不生效. 扩展为也响应 body.resume-modal-open.
   3. .seaweed-label-layer (z-index 120, body 直接子级) 是浮在 seaweed canvas
      顶部的章节导航标签 (ABOUT ME / RESUME / PORTFOLIO / LIFE COLLAGE / CONTACT),
      在 main.js 的 ensureSeaweedLabelLayer 创建, 不归 .content-section 管,
      必须单独 hide. */
body.modal-open #scene,
body.resume-modal-open #scene {
    opacity: 0;
    pointer-events: none;
}
body.modal-open #section-about-me,
body.resume-modal-open #section-about-me {
    opacity: 0;
    pointer-events: none;
}
body.modal-open .content-section,
body.resume-modal-open .content-section {
    opacity: 0;
    pointer-events: none;
}
body.modal-open .seaweed-label-layer,
body.resume-modal-open .seaweed-label-layer {
    opacity: 0;
    pointer-events: none;
}

/* Reduced Motion: 跳过淡入淡出 */
@media (prefers-reduced-motion: reduce) {
    .seaweed-branch-vignette {
        transition: none !important;
    }
    #scene,
    #section-about-me,
    body.modal-open #scene,
    body.modal-open #section-about-me {
        transition: none !important;
    }
}