/* AI 暗角唯一样式入口：普通 AI 画面与 CPU 内容页均由 CSS 伪元素覆盖视口。
   不创建 Three.js 物体、不写入深度、不受 PCB 朝向 / 圆形渐隐 / 雾影响。
   静态渐变只绘制到场景容器；进入 / 退出仅过渡 opacity。
   不使用 blur / backdrop-filter / 混合模式，不增加 Three.js 全屏 pass。
   下列 3 项控制常规 AI 暗角；CPU 内容页的额外暗角位于文件末尾。普通产品页面不显示暗角。 */
html.viewer_page #webgl_container {
    --ai-vignette-strength: 0.82; /* 最外角压暗强度，0～1；中心保持完全透明。 */
    --ai-vignette-clear: 34%; /* 中心无暗角的区域，按椭圆半径计算。 */
    --ai-vignette-duration: 550ms; /* AI 进入 / 退出的淡入淡出时间。 */
    isolation: isolate;
}

html.viewer_page #webgl_container::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent var(--ai-vignette-clear), rgba(0, 0, 0, 0.08) 60%, rgba(0, 0, 0, 0.42) 80%, #000000 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ai-vignette-duration) ease, visibility 0s linear var(--ai-vignette-duration);
}

html.viewer_page.smart-mode:not(.smart-closing) #webgl_container::after {
    opacity: var(--ai-vignette-strength);
    visibility: visible;
    transition-delay: 0s, 0s;
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    html.viewer_page #webgl_container::after { transition: none; }
}

/* 原暗角位于画布下层，会被内容面板覆盖；这层只柔化整个窗口的外缘，不拦截指针。
   透明中心随相机投影移到芯片位置，强度由面板原有 opacity 同步控制，不增加 WebGL pass。 */
.smart_dialog::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, #00000066, #00000000 16%), radial-gradient(ellipse farthest-corner at var(--smart-dialog-focus-x, 50%) var(--smart-dialog-focus-y, 50%), #00000000 28%, #00000008 48%, #00000038 72%, #000000A6 100%);
}

@media (max-width: 75em) and (max-aspect-ratio: 1/1) {
    .smart_dialog::after { background: linear-gradient(to top, #00000066, #00000000 16%), radial-gradient(ellipse farthest-corner at var(--smart-dialog-focus-x, 50%) var(--smart-dialog-focus-y, 50%), #00000000 28%, #00000008 48%, #00000038 72%, #000000A6 100%); }
}
