/* 全站统一字体栈（与首页一致） */
/* ============================================================
JO portfolio — 媒体层（视频 / 外链嵌入 / 3D）
------------------------------------------------------------
配套脚本：video.js（同目录，defer 引入）
类名统一 .vz- 前缀，不与站点现有 .ec- / .c- / .o- / .w- 冲突。
一个空容器 + data 属性就等于一个播放器：
属性速查
---------
data-vz-ratio 画面比例，默认 16/9（9/16 竖屏、1/1 方形、21/9 宽幅）
data-vz-src 本地视频，多个用 | 分隔（浏览器自动挑第一个能播的）
data-vz-poster 封面图
data-vz-fit contain（默认，完整显示）/ cover（铺满裁切）
data-vz-title 封面主标题 data-vz-desc 封面说明
data-vz-badge 封面角标 data-vz-caption 卡片下方图注
data-vz-loop ="auto" 静音自动循环（当"会动的封面"用，不出播放按钮）
data-vz-muted 初始静音 data-vz-native 改用浏览器原生控件
data-vz-optional 文件不存在时隐藏自己（配合 [data-vz-group] 可整段隐藏）
data-vz-probe ="off" 跳过存在性探测直接挂载（确定为 CDN 直链时用）
外链视频 data-vz-embed="bilibili:BV1xx411c7mD"
（也支持 youtube:ID / vimeo:ID / url:https://…）
3D 交互 data-vz-3d="../../assets/models/robot.glb"（懒加载 ）
============================================================ */
/* ---------- 容器 ---------- */
.vz-media{position:relative;z-index:2;width:100%}
.vz-media[hidden]{display:none!important}
[data-vz-group][hidden]{display:none!important}
/* ---------- 播放器外框 ---------- */
.vz-frame{
position:relative;width:100%;aspect-ratio:var(--vz-ar,16/9);overflow:hidden;
border-radius:22px;background:#0d100e;isolation:isolate;
box-shadow:0 28px 70px -34px rgba(0,0,0,.5);outline:1px solid rgba(0,0,0,.06);
font-family:var(--font);
}
.vz-frame:focus-visible{outline:2px solid #10b981;outline-offset:3px}
.vz-media[data-vz-radius="none"] .vz-frame{border-radius:0}
.vz-media[data-vz-radius="sm"] .vz-frame{border-radius:12px}
.vz-media[data-vz-radius="lg"] .vz-frame{border-radius:27px}
@media (min-width:768px){
.vz-frame{border-radius:27px}
.vz-media[data-vz-radius="sm"] .vz-frame{border-radius:14px}
}
.vz-frame:fullscreen{aspect-ratio:auto;height:100%;border-radius:0}
/* ---------- 画面 ---------- */
.vz-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#0d100e}
.vz-media[data-vz-fit="cover"] .vz-video{object-fit:cover}
.vz-canvas{position:absolute;inset:0;overflow:hidden}
.vz-canvas model-viewer{display:block;width:100%;height:100%;background:#0d100e}
.vz-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0d100e}
/* ---------- 封面 / 播放入口 ---------- */
.vz-poster{
position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;
margin:0;padding:0;border:0;background:#141816;color:#fff;cursor:pointer;
overflow:hidden;text-align:left;-webkit-appearance:none;appearance:none;font:inherit;
}
.vz-poster[hidden]{display:none}
.vz-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.vz-poster:hover>img{transform:scale(1.035);opacity:.96}
.vz-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(158deg,rgba(6,20,14,.16),rgba(4,12,9,.66))}
.vz-poster-txt{position:absolute;left:20px;right:20px;bottom:20px;z-index:3}
@media (min-width:768px){ .vz-poster-txt{left:26px;right:26px;bottom:24px} }
.vz-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:rgba(255,255,255,.13);color:#eafaf1;padding:5px 11px;font-size:var(--fs-label);font-weight:var(--fw-semi);letter-spacing:var(--ls-lg);text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vz-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399}
.vz-title{margin-top:10px;font-size:var(--fs-lead);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-h3);text-shadow:0 1px 14px rgba(0,0,0,.55)}
@media (min-width:768px){ .vz-title{font-size:var(--fs-h6)} }
.vz-desc{margin-top:6px;max-width:54ch;font-size:var(--fs-caption);line-height:var(--lh-desc);color:rgba(255,255,255,.78)}
.vz-play{
position:absolute;left:50%;top:50%;z-index:4;margin:-38px 0 0 -38px;
display:flex;align-items:center;justify-content:center;width:76px;height:76px;
border-radius:50%;background:rgba(255,255,255,.94);color:#0f7a5a;
box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease;
}
.vz-play svg{width:26px;height:26px;margin-left:3px}
.vz-poster:hover .vz-play{transform:scale(1.08);background:#fff}
.vz-play--sm{width:54px;height:54px;margin:-27px 0 0 -27px}
.vz-play--sm svg{width:19px;height:19px;margin-left:2px}
/* ---------- 控制条 ---------- */
.vz-ctl{
position:absolute;left:0;right:0;bottom:0;z-index:5;
display:flex;align-items:center;gap:8px;padding:40px 12px 10px;
background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.24),transparent);
opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.vz-media:hover .vz-ctl,
.vz-media:focus-within .vz-ctl,
.vz-media.is-playing .vz-ctl,
.vz-media.is-paused .vz-ctl{opacity:1;pointer-events:auto}
@media (hover:none){ .vz-ctl{opacity:1;pointer-events:auto;padding:34px 10px 8px} }
@media (min-width:768px){ .vz-ctl{gap:10px;padding:44px 16px 12px} }
.vz-cbtn{
flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;
transition:background .2s ease,color .2s ease;
}
.vz-cbtn:hover{background:rgba(255,255,255,.16)}
.vz-cbtn:focus-visible{outline:2px solid #34d399;outline-offset:2px}
.vz-cbtn svg{width:17px;height:17px}
.vz-cbtn.is-on{color:#34d399}
.vz-media[data-vz-fit] .vz-ctl{--vz-unused:0}
/* 进度条 */
.vz-seek{position:relative;flex:1 1 auto;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vz-seek-track{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.26)}
.vz-seek-buf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:rgba(255,255,255,.22)}
.vz-seek-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:#34d399}
.vz-seek-knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(.55);transition:transform .2s ease}
.vz-seek:hover .vz-seek-knob,.vz-seek.is-drag .vz-seek-knob{transform:translate(-50%,-50%) scale(1)}
.vz-time{flex:none;font-size:var(--fs-meta);font-weight:var(--fw-semi);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-sm);color:rgba(255,255,255,.88);white-space:nowrap}
.vz-time--dur{color:rgba(255,255,255,.55)}
@media (max-width:479px){ .vz-time--dur,.vz-time--sep{display:none} }
/* ---------- 图注 / 缺省提示 ---------- */
.vz-cap{margin-top:10px;padding:0 2px;font-size:var(--fs-meta);line-height:var(--lh-desc);color:#5c6b61}
.vz-cap b{color:#1a1a1a;font-weight:var(--fw-bold)}
.vz-missing{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;padding:28px;text-align:center;background:#f2f5f3;color:#7d8881;font-size:var(--fs-caption);line-height:var(--lh-body);
}
.vz-missing b{color:#3d453f;font-weight:var(--fw-bold)}
.vz-missing code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-meta);background:rgba(0,0,0,.05);border-radius:5px;padding:2px 6px;color:#3d453f}
/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
.vz-poster>img,.vz-play,.vz-ctl{transition:none!important}
.vz-poster:hover>img{transform:none}
}
/* 全站统一 rem 基准：1rem = 10px（与首页一致） */
:root{font-size:62.5%}