/* Sonic Shaman 2026 Background — fade in/out neon rings */
.ss26-bg-wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-3;overflow:hidden;background:#000;pointer-events:none;transform:translate3d(0,0,0)}
/* SVG 交錯中心 = viewBox 正中央；用 top 把該中心錨到視窗 y = --ss26-y。縮放與模糊都在 SVG 內（viewBox / feGaussianBlur）處理，避免 CSS transform/filter 把 SVG 提升成合成圖層造成閃爍 */
.ss26-bg-wrap .ss-bg{position:absolute;left:0;width:100%;height:100%;display:block;top:calc(var(--ss26-y,73%) - 50%);overflow:visible}
/* 顆粒層：靜態 PNG（亮暗各半的 film grain）。不用 mix-blend-mode——Safari 上全螢幕 blend 會強迫每幀重新合成下層動畫，PNG 取代原本的 SVG feTurbulence data URI：噪點只解碼一次，不必每幀由 CPU 重算。translateZ(0) 讓這層獨立且靜態。 */
.ss26-bg-wrap .ss26-grain{position:absolute;inset:0;pointer-events:none;opacity:var(--ss26-grain,.65);mix-blend-mode:overlay;background-image:url(../img/ss26-grain.png?v=2);background-size:256px 256px;image-rendering:pixelated;transform:translateZ(0)}
/* 靜態底層：不套任何動畫，提升為獨立圖層後只光柵化一次，之後每幀只是合成，對 Safari 幾乎零成本 */
.ss26-bg-wrap .ss-bg--static{opacity:var(--ss26-static,.9);transform:translateZ(0)}
.ss26-bg-wrap .ss-bg--static .ring{animation:none!important;transform:none!important;opacity:1}
.ss26-bg-wrap .ring{fill:none;stroke-width:255.12px;stroke-miterlimit:10;transform-box:fill-box;transform-origin:center}
/* 散開 ↔ 主視覺原位。每條週期 = 2T/(2k+1)，所有光帶在 t = T, 3T, 5T… 同時回到原位（--ss26-cycle = T）。
   散開位置 (--sx/--sy/--sr) 由 JS 於載入時隨機給定；無 JS 時 fallback 0 = 停在原位。 */
.ss26-bg-wrap .ring{animation:ss26-scatter calc(var(--ss26-cycle,80s) * 2 / var(--ss26-k,1) / var(--ss26-speed,1)) cubic-bezier(.7,0,.3,1) infinite alternate,ss26-fade calc(var(--fd,20s) / var(--ss26-speed,1)) ease-in-out calc(var(--fdl,0s) / var(--ss26-speed,1)) infinite}
@keyframes ss26-scatter{
  0%{transform:translate(calc(var(--sx1,0) * var(--ss26-drift,1)),calc(var(--sy1,0) * var(--ss26-drift,1))) rotate(calc(var(--sr1,0deg) * var(--ss26-drift,1)))}
  50%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(calc(var(--sx2,0) * var(--ss26-drift,1)),calc(var(--sy2,0) * var(--ss26-drift,1))) rotate(calc(var(--sr2,0deg) * var(--ss26-drift,1)))}
}
.ss26-bg-wrap .r1{--ss26-k:1;--fd:20s;--fdl:0s}
.ss26-bg-wrap .r2{--ss26-k:5;--fd:25s;--fdl:-8s}
.ss26-bg-wrap .r3{--ss26-k:9;--fd:15s;--fdl:-4s}
.ss26-bg-wrap .r4{--ss26-k:3;--fd:22s;--fdl:-13s}
.ss26-bg-wrap .r5{--ss26-k:7;--fd:18s;--fdl:-15s}
.ss26-bg-wrap .r6{--ss26-k:1;--fd:24s;--fdl:-3s}
.ss26-bg-wrap .r7{--ss26-k:9;--fd:17s;--fdl:-11s}
.ss26-bg-wrap .r8{--ss26-k:5;--fd:21s;--fdl:-7s}
.ss26-bg-wrap .r9{--ss26-k:3;--fd:27s;--fdl:-17s}
.ss26-bg-wrap .r10{--ss26-k:7;--fd:14s;--fdl:-6s}
/* fade in/out 與散開動畫同掛在 path 上，各控制不同屬性（opacity / transform）——比外包一層 <g> 少 10 個離屏合成緩衝，Safari 上差異明顯 */
@keyframes ss26-fade{0%,100%{opacity:.05}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ss26-bg-wrap .ring{animation:none!important;opacity:1;transform:none!important}}