/* ============================================================
   全屏模式(Cinema)—— html.hud-cinema 折叠所有边缘 HUD
   逻辑在 hud-cinema.js;这里只管视觉:
   · 退场/进场都是 0.28s 双向过渡(visibility 延迟只挂退场方向);
   · ★ .hud-toc 是 .page-hud 的子元素,而 opacity 是父级封顶的 ——
     所以【不退场 .page-hud 整棵】,只逐个退场它的直接子件;
     目录卡片和站名保持可见可点。
   · 入口:站名(hud-logo)。全屏态站名滑到屏幕最右上,再点恢复。
   · 正文容器满屏:去圆角/边框/投影;
   · prefers-reduced-motion:直接瞬切。
   ============================================================ */

/* ---- page-hud 的直接子件退场清单(不含 hud-toc / hud-logo) ---- */
html.hud-cinema .page-hud__frame,
html.hud-cinema .page-hud__band,
html.hud-cinema .hud-plants,
html.hud-cinema .hud-search,
html.hud-cinema .hud-acts,
html.hud-cinema .hud-nav,
html.hud-cinema .hud-timer,
html.hud-cinema .hud-type,
html.hud-cinema .hud-ctl,
html.hud-cinema .hud-pens,
html.hud-cinema .hud-left,
html.hud-cinema .proj-node,
html.hud-cinema .echo-say,
html.hud-cinema .echo-hot,
html.hud-cinema .hud-surge,
html.hud-cinema .top-link {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

/* ---- 常驻基线:退场目标都有双向过渡(非全屏态也挂,保证进场渐显) ---- */
.page-hud__frame,
.page-hud__band,
.hud-plants,
.hud-search,
.hud-acts,
.hud-nav,
.hud-timer,
.hud-type,
.hud-ctl,
.hud-pens,
.hud-left,
.proj-node,
.echo-say,
.echo-hot,
.hud-surge,
.top-link {
    transition: opacity 0.28s ease;
}

/* ---- 站名 = 全屏开关 ----
   ★ page-hud.css 在 extended bundle 之后加载,同特异性会翻回
     pointer-events:none —— 这里用 html 前缀拉高特异性压住它。 */
html .hud-logo--cinema {
    pointer-events: auto;
    cursor: pointer;
}

/* 丝滑平移:站名常驻过渡(双向),进全屏从左上原位滑向最右上,
   退出滑回。left/right 同时插值会瞬跳(left→auto 无法动画),
   所以基线就用 left 定位,全屏态改为右对齐 + transform 补偿,
   让浏览器在两个可插值状态间平移。 */
html .hud-logo {
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 全屏态:不换定位锚,只用 transform 把站名平移到屏幕最右上。
   translate 的目标点由 JS 写入 --cinema-tx/ty(精确像素,任意视口都对),
   CSS 只管滑过去的曲线。 */
html.hud-cinema .hud-logo {
    transform: translate(var(--cinema-tx, 0px), var(--cinema-ty, 0px));
}

/* ---- 正文:满屏贴合 ---- */
html.hud-cinema .main {
    transition: border-radius 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

html.hud-cinema .main,
html.hud-cinema .main::before {
    border-radius: 0;
}

html.hud-cinema .main {
    box-shadow: none;
}

/* ---- reduced-motion:不播过渡 ---- */
@media (prefers-reduced-motion: reduce) {

    .page-hud__frame, .page-hud__band, .hud-plants, .hud-search, .hud-acts,
    .hud-nav, .hud-timer, .hud-type, .hud-ctl, .hud-pens, .hud-left,
    .proj-node, .echo-say, .echo-hot, .hud-surge, .top-link, .hud-logo,
    html.hud-cinema .page-hud__frame, html.hud-cinema .page-hud__band,
    html.hud-cinema .hud-plants, html.hud-cinema .hud-search,
    html.hud-cinema .hud-acts, html.hud-cinema .hud-nav,
    html.hud-cinema .hud-timer, html.hud-cinema .hud-type,
    html.hud-cinema .hud-ctl, html.hud-cinema .hud-pens,
    html.hud-cinema .hud-left, html.hud-cinema .proj-node,
    html.hud-cinema .echo-say, html.hud-cinema .echo-hot,
    html.hud-cinema .hud-surge, html.hud-cinema .top-link,
    html.hud-cinema .hud-logo, html.hud-cinema .main {
        transition: none;
    }
}