/* ============================================================
   视频播放/暂停按钮（playbtn.css）—— 公共组件样式
   消费方：视频模组（video.css）+ 封面背景视频（cover.css）。
   DOM 契约（两处模板输出同款结构，行为走各自模板的内联事件属性）：
     <button class="work-module-video-playbtn">
         <svg class="work-module-video-btn-ring">
             <circle class="progress-background">   ← 轨道
             <circle class="progress-circle">       ← 进度弧
   状态类（由 video 标签内联事件属性切换）：is-playing（播放中→⏸）、
   is-ended（播完→↻）；默认态 ▶。

   Apple Vision Pro 页 play-pause-button 1:1 复刻（2026-09-03 抓自
   apple.com/vision-pro 的 overview.built.css，逐项对值）：
   - 按钮 38px 圆、无底色（scrim 透明——参考图里按钮直接浮在视频内容上，
     Apple 默认主题的 scrim 就是 rgba(0,0,0,0)）；
   - 图标 20px CSS mask，三个状态共用一枚 ::after，靠按钮状态类换 mask：
     默认 play ▶ / .is-playing pause ⏸ / .is-ended replay ↻（mask 为
     Apple 原版 base64 资源原样引用，颜色由 background-color 注入）——
     白色 rgba(255,255,255,1)、hover 0.9（用户指定白图标；与 Apple
     深色内容主题 icon-color 同值，2026-09-03 二轮纠正：深灰图标在
     深色视频上隐形，参考图放大核实后定稿白色）
   - 进度环 40px（-1px 偏移与按钮同心）、viewBox 100、r=45、rotate(-90deg)
     从 12 点起顺时针；轨道 #d2d2d7 stroke 6px（缩放后 2.4px）、进度弧
     #5c5c5e 实心 stroke 8px——Apple 原版弧是 rgba(0,0,0,.56) 叠在轨道上
     （混合后即 #5c5c5e），但半透明弧在画布缩放的亚像素渲染下边缘会
    透出轨道白边（用户反馈「漏底下的白圆圈」），实心化后仍有同宽叠放的
     亚像素透光（二轮反馈），三轮按用户方案把弧加粗到 8px（每侧多 1
     单位≈0.4px 实渲）物理盖死轨道，观感与参考图一致
   - 配色四轮（2026-09-03 截图验收）：Apple 配色专为深色视频内容设计
     （白图标 / 浅灰轨道 / 深灰弧），用户的浅色封面（白色展厅渲染图）上
     轨道 #d2d2d7 对比度≈0 直接隐形——图标可见、轨道消失，用户先疑心
     是层级被封面盖住，排查确认渲染正常、纯对比度问题。用户定案改为：
     轨道 #86868b（比 #d2d2d7 深一档的 Apple 体系灰，浅色封面上达 WCAG
     图形 3:1 对比标准）、进度弧纯白（与白图标同色系，深浅封面两端都
     清晰）；至此按钮配色已偏离 Apple 原版，形态/尺寸/动效仍 1:1
   - 定位：Apple 用 flex 容器推到右下 + margin 16px，绝对定位等价
     right/bottom 16px；:active 缩放 0.95（Apple 同值）
   - 交互行为在各自模板的内联事件属性（前台零 JS 文件同既有约定），
     本文件只负责外观。
   （2026-09-04 §31 收尾自 video.css 迁出为公共文件：cover 背景视频
   也要挂同款按钮——模组 CSS 按 used_module_css 按需加载，两个模组
   各自声明本文件，任何一个出现即加载）
   ============================================================ */
.work-module-video-playbtn {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 100ms linear, transform .2s ease;   /* Apple 同值 */
}
.work-module-video-playbtn:active { transform: scale(0.95); }   /* Apple 同值 */

/* 图标层：mask 定形状、background-color 定颜色（Apple 同机制，颜色走变量） */
.work-module-video-playbtn::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 1);
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwMTEuNDQtMS42MiAxLjg2IDEuODYgMCAwMTEuMTEuMzFsOC41MyA1Yy43Ni40NCAxLjE3LjggMS4xNyAxLjUxcy0uNDEgMS4wNy0xLjE3IDEuNTFsLTguNTMgNWExLjg2IDEuODYgMCAwMS0xLjExLjMxQTEuNDIgMS40MiAwIDAxNSAxNS4yNXoiLz48L3N2Zz4=") center / contain no-repeat;
}
.work-module-video-playbtn:hover::after { background-color: rgba(255, 255, 255, 0.9); }
.work-module-video-playbtn.is-playing::after {
    /* ⚠️ 两行必须是同一枚 SVG（2026-09-04 用户截图验收抓出的 bug）：
       标准 mask 声明在后会覆盖 -webkit-mask（Chrome 120+ 两属性同支持，
       后者胜出）——历史串只剩一根竖条（x=11.75 那枚），图标"少了一半"。
       改这里时两行务必同步粘贴同一枚 base64 */
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
}
.work-module-video-playbtn.is-ended::after {
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2Ljc1IDkuNGExLjUgMS41IDAgMDAtMS41IDEuNUE0Ljg4IDQuODggMCAxMTEwLjM4IDZoLjJMOS4zMSA3LjMyYTEuNSAxLjUgMCAwMDEuMDYgMi41NiAxLjQ1IDEuNDUgMCAwMDEuMDYtLjQ0TDE1IDUuODhhMS41MiAxLjUyIDAgMDAuNDQtMS4wNkExLjU0IDEuNTQgMCAwMDE1IDMuNzVMMTEuNDMuMTlhMS40OSAxLjQ5IDAgMDAtMi4xMiAwIDEuNTEgMS41MSAwIDAwMCAyLjEybC43NS43NWE3Ljg1IDcuODUgMCAxMDguMTkgNy44NCAxLjUgMS41IDAgMDAtMS41LTEuNXoiIGZpbGw9IiMxZDFkMWYiLz48L3N2Zz4=") center / contain no-repeat;
}

/* 进度环：SVG 两枚圆叠放（轨道 + 进度弧），pointer-events:none 点击穿透。
   stroke 声明在 svg 上供进度弧继承，轨道单独覆盖——Apple 同结构 */
.work-module-video-btn-ring {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 40px;
    height: 40px;
    fill: transparent;
    stroke: #fff;                       /* 进度弧纯白（2026-09-03 用户定案）：与白图标同色系，
                                           深浅封面两端都清晰；Apple 原值 #5c5c5e =
                                           rgba(0,0,0,.56) 叠轨道的等效色，出处见头部注释 */
    stroke-width: 6px;
    stroke-linecap: round;
    pointer-events: none;
    transform: rotate(-90deg);          /* 进度从 12 点起顺时针（Apple 同款） */
    will-change: transform;
}
.work-module-video-btn-ring .progress-background {
    /* 轨道浅灰（2026-09-03 用户定案）：原 #d2d2d7（Apple 原值）在浅色
       封面上对比度≈0，2.4px 细线直接隐形（截图验收反馈「只有图标没有
       轨道」）；加深一档到 #86868b——白底对比约 3.3:1 达 WCAG 图形
       标准，深色视频上也是可辨的灰环，两端场景都成立 */
    stroke: #86868b;
}
.work-module-video-btn-ring .progress-circle {
    stroke-width: 8px;                  /* 比轨道（6px）每侧多 1 单位：同宽叠放时缩放采样
                                           会让弧边缘透出底下轨道，加粗彻底盖住（用户验收定案） */
    stroke-dasharray: 283;              /* ceil(2π×45)=283，Apple 的 getTotalLength 取整同值 */
    stroke-dashoffset: 283;             /* 初始 0%：弧全藏（timeupdate 逐步拉到 0=100%） */
    transition: stroke-dashoffset .25s linear;  /* timeupdate ~4Hz 的平滑插值 */
}