/* ============================================================
BOSBM Holdings — Visual & Motion Library (visuals.css)
曜石鉑金 × 靛紫 | www.bosbm.ai
共用視覺/動態庫：內嵌 SVG 插圖 + CSS/JS 動態
- 只用 CIS 變數（cis.css :root），不引入新色、不用外部圖片/CDN
- 所有裝飾層 aria-hidden、pointer-events:none，不影響 a11y
- 動態節制（transform/opacity）；prefers-reduced-motion 全關
依賴：assets/cis.css（須先載入）
============================================================ */
/* ============================================================
1. 動態 HERO 背景層（疊在 .hero-bg 之上）
用法：在 .hero 內、.hero-bg 之後加一個 aria-hidden 裝飾層
============================================================ */
.viz-aurora{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.viz-aurora::before,
.viz-aurora::after{
content:"";position:absolute;inset:-25%;
background:
radial-gradient(40% 38% at 22% 26%,rgba(99,102,241,.22),transparent 60%),
radial-gradient(42% 40% at 78% 22%,rgba(139,92,246,.20),transparent 62%),
radial-gradient(50% 46% at 60% 88%,rgba(99,102,241,.12),transparent 64%);
filter:blur(8px);
will-change:transform,opacity;
}
.viz-aurora::before{animation:viz-aurora-drift 26s ease-in-out infinite alternate;}
.viz-aurora::after{
background:
conic-gradient(from 200deg at 30% 40%,rgba(139,92,246,.16),transparent 40%,rgba(99,102,241,.14) 70%,transparent);
opacity:.55;mix-blend-mode:screen;
animation:viz-aurora-spin 60s linear infinite;
}
@keyframes viz-aurora-drift{
0% {transform:translate3d(-3%,-2%,0) scale(1); opacity:.9;}
50% {transform:translate3d(4%,3%,0) scale(1.08); opacity:1;}
100%{transform:translate3d(-2%,4%,0) scale(1.04); opacity:.85;}
}
@keyframes viz-aurora-spin{
from{transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
/* 細網格 + 掃描線微動。用法 */
.viz-grid{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.viz-grid::before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(199,205,214,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(199,205,214,.045) 1px,transparent 1px);
background-size:54px 54px;
mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);
-webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);
}
.viz-grid::after{
content:"";position:absolute;left:0;right:0;height:160px;top:-160px;
background:linear-gradient(to bottom,transparent,rgba(139,92,246,.10),transparent);
animation:viz-scan 9s linear infinite;
will-change:transform;
}
@keyframes viz-scan{
0% {transform:translateY(0);}
100%{transform:translateY(calc(100vh + 320px));}
}
/* 漂浮幾何粒子/環。用法：
... (任意數量 .viz-dot / .viz-ring)
JS（visuals.js）會隨機定位/微速度，純 CSS fallback 也會漂浮 */
.viz-orbit{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.viz-orbit .viz-dot,
.viz-orbit .viz-ring{
position:absolute;display:block;border-radius:50%;
will-change:transform;
animation:viz-float 16s ease-in-out infinite;
}
.viz-orbit .viz-dot{
width:8px;height:8px;
background:var(--violet);
box-shadow:0 0 12px rgba(139,92,246,.55);
opacity:.55;
}
.viz-orbit .viz-ring{
width:120px;height:120px;background:transparent;
border:1px solid var(--line-strong);
opacity:.4;
}
.viz-orbit > *:nth-child(2){left:12%;top:22%;animation-duration:18s;}
.viz-orbit > *:nth-child(3){left:80%;top:30%;animation-duration:22s;animation-delay:-4s;}
.viz-orbit > *:nth-child(4){left:64%;top:72%;animation-duration:20s;animation-delay:-8s;}
.viz-orbit > *:nth-child(5){left:28%;top:78%;animation-duration:24s;animation-delay:-2s;}
.viz-orbit > *:nth-child(6){left:46%;top:16%;animation-duration:19s;animation-delay:-6s;}
.viz-orbit > *:nth-child(7){left:90%;top:62%;animation-duration:26s;animation-delay:-10s;}
@keyframes viz-float{
0% {transform:translate3d(0,0,0);}
25% {transform:translate3d(14px,-20px,0);}
50% {transform:translate3d(-10px,-34px,0);}
75% {transform:translate3d(-18px,-12px,0);}
100%{transform:translate3d(0,0,0);}
}
/* ============================================================
2. SVG 插圖容器
.illus — 純容器（置中、可控寬高），放 inline