/* ============================================================
   FX — 流動極光(Aurora)
   無方格、無走勢線。大面積柔焦色帶緩慢流動 + 微縮放 + 細微噪點。
   深色 page-hero 疊上像北極光的柔焦色帶。
   僅作用於內頁(body:not(.lp));尊重 prefers-reduced-motion。
   載入順序須在 app.css / site.css 之後。
   ============================================================ */

/* 底色移到 html,讓 body 下的固定背景層(z-index:-1)可透出 */
html{background:var(--bg)}
body:not(.lp){background:transparent}

.page-fx{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
body.lp .page-fx{display:none}

/* ── 柔焦極光色帶(青 / teal / 藍),緩慢漂移 + 微縮放,營造流動感 ── */
.page-fx .fx-aura{position:absolute; filter:blur(95px); will-change:transform}
.page-fx .a1{width:52vw; height:52vw; min-width:480px; min-height:480px; left:-12vw; top:-18vh;
  background:radial-gradient(circle at 42% 42%, oklch(72% 0.13 212 / .34), transparent 64%);
  animation:flowA 30s var(--ease) infinite alternate}
.page-fx .a2{width:46vw; height:46vw; min-width:440px; min-height:440px; right:-12vw; top:12%;
  background:radial-gradient(circle at 58% 42%, oklch(72% 0.12 176 / .28), transparent 64%);
  animation:flowB 38s var(--ease) infinite alternate}
.page-fx .a3{width:56vw; height:56vw; min-width:520px; min-height:520px; left:30%; top:52%;
  background:radial-gradient(circle at 50% 50%, oklch(56% 0.19 263 / .24), transparent 64%);
  animation:flowC 46s var(--ease) infinite alternate}

@keyframes flowA{from{transform:translate(0,0) scale(1)}     to{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes flowB{from{transform:translate(0,0) scale(1.1)}   to{transform:translate(-7vw,5vh) scale(1)}}
@keyframes flowC{from{transform:translate(0,0) scale(1)}     to{transform:translate(6vw,-6vh) scale(1.12)}}

/* ── 細微噪點(消除漸層的「AI 扁平感」,增加質感),靜態 ── */
.page-fx .fx-grain{position:absolute; inset:0; opacity:.03; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* ── 深色 page-hero:像北極光的柔焦色帶緩慢流動 ── */
.page-hero::before,.page-hero::after{content:""; position:absolute; pointer-events:none; z-index:0;
  filter:blur(55px); border-radius:45%}
.page-hero::before{width:62%; height:150%; left:2%; top:-25%; opacity:.55;
  background:linear-gradient(115deg, transparent 16%, oklch(72% 0.13 212 / .50), oklch(72% 0.12 176 / .32), transparent 84%);
  animation:auroraA 24s ease-in-out infinite alternate}
.page-hero::after{width:56%; height:150%; right:-4%; top:-22%; opacity:.45;
  background:linear-gradient(60deg, transparent 16%, oklch(58% 0.19 263 / .50), oklch(72% 0.13 212 / .30), transparent 84%);
  animation:auroraB 30s ease-in-out infinite alternate}

@keyframes auroraA{from{transform:translate(-6%,0) rotate(-5deg) scale(1)}    to{transform:translate(8%,4%) rotate(4deg) scale(1.12)}}
@keyframes auroraB{from{transform:translate(5%,0) rotate(4deg) scale(1.08)}   to{transform:translate(-7%,3%) rotate(-4deg) scale(1)}}

/* 內頁 .section-alt 半透明,讓背景淡淡透出,維持分區層次 */
body:not(.lp) .section-alt{background:oklch(96.5% 0.01 258 / .72)}

/* 降低動態偏好:停所有動畫,保留靜態色帶構圖 */
@media (prefers-reduced-motion: reduce){
  .page-fx .fx-aura,.page-hero::before,.page-hero::after{animation:none}
}