/* ============================================================
   背景連貫效果（三個方向，用網址參數切換）
     ?bg=1  一條線貫穿全站（預設）
     ?bg=2  色塊接力，段與段之間沒有硬邊界
     ?bg=3  粒子網路，滑鼠會擾動
     ?bg=0  全部關掉
   三種都用 mix-blend-mode:difference —— 深色段自動變亮線、淺色段自動變暗線，
   不用為了每一段各做一套顏色。
   ============================================================ */

.bgfx{
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;z-index:5;
  mix-blend-mode:difference;
}

/* ---------- 1：一條線 ---------- */
#bg-line{display:block}
#bg-line path{
  fill:none;stroke:#fff;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.13;
}
/* 線經過的轉折點放一個小圓，捲到才亮 */
#bg-line circle{fill:#fff;opacity:0;transition:opacity .6s var(--e)}
#bg-line circle.on{opacity:.22}

/* ---------- 2：色塊接力 ---------- */
/* 段與段的交界補一塊弧形，顏色取下一段的底色，滑下去像同一張紙 */
.seam{
  position:absolute;left:-6%;right:-6%;height:clamp(60px,8vw,130px);
  z-index:5;pointer-events:none;
}
.seam.down{border-radius:0 0 50% 50%/0 0 100% 100%}
.seam.up{border-radius:50% 50% 0 0/100% 100% 0 0}
/* 走這個方向時，原本 hero 底下那條弧線就多餘了 */
body[data-bg="2"] .curve{display:none}

/* ---------- 3：粒子網路 ---------- */
#bg-particles{display:block}

@media(prefers-reduced-motion:reduce){
  .bgfx{display:none}
}
/* 手機不跑：畫面小、看不出連貫，還吃電 */
@media(max-width:820px){
  .bgfx{display:none}
  .seam{display:none}
  body[data-bg="2"] .curve{display:block}
}