/* 生きた見本（bg-glow）。build/_scope-css.js が作る。手で直さない。 */
.pv-bg-glow{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0f1116}
.pv-bg-glow .stage-bg{position:absolute;inset:0;pointer-events:none}
.pv-bg-glow .stage-frame{position:absolute;pointer-events:none}
.pv-bg-glow .mock{position:absolute;inset:0;background:linear-gradient(120deg,#2a2f52,#3b5680)}
.pv-bg-glow .mock-a{position:absolute;left:5%;top:11%;width:53%;height:62%;border-radius:14px;background:rgba(255,255,255,.05)}
.pv-bg-glow .mock-b{position:absolute;left:62%;top:11%;width:33%;height:62%;border-radius:14px;background:rgba(255,255,255,.05)}
/* ============================================================
   配信画面の背景  glow — ほのあかり

   触れるつまみ:
     --bg-a      地の色
     --bg-b      あかりの色
     --bg-power  あかりの強さ（0〜1）
     --bg-speed  ゆれる速さ（秒。大きいほどゆっくり）

   下からのやわらかいあかりが、息をするようにゆっくり強くなったり弱くなったりします。
   歌枠・雑談のように、画面を静かに見せたいときに。

   ★ ぼかしは2枚まで。重ねるほど、配信中のPCで重くなる。
   ★ 地の色は暗めを既定にしてある。明るくすると、上に乗せた白文字が読みにくい。
   ============================================================ */
.pv-bg-glow{
  --bg-a:#0a0c12;
  --bg-b:#6f8cff;
  --bg-power:.55;
  --bg-speed:9s;
}
.pv-bg-glow .stage-bg{
  background:var(--bg-a);
  overflow:hidden;
}
/* 下からのあかり */
.pv-bg-glow .stage-bg::before{
  content:"";
  position:absolute;
  left:-20%; right:-20%; bottom:-45%;
  height:110%;
  background:radial-gradient(50% 50% at 50% 100%,
    color-mix(in srgb, var(--bg-b) 85%, transparent), transparent 70%);
  opacity:var(--bg-power);
  filter:blur(40px);
  animation:bg-glow-stage-glow var(--bg-speed) ease-in-out infinite alternate;
}
/* 上の隅に、小さいあかりをもう1つ */
.pv-bg-glow .stage-bg::after{
  content:"";
  position:absolute;
  left:-10%; top:-35%;
  width:70%; height:80%;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--bg-b) 55%, transparent), transparent 70%);
  opacity:calc(var(--bg-power) * .6);
  filter:blur(52px);
  animation:bg-glow-stage-glow calc(var(--bg-speed) * 1.7) ease-in-out infinite alternate-reverse;
}
@keyframes bg-glow-stage-glow{
  0%  { transform:translateY(4%) scale(1); }
  100%{ transform:translateY(-4%) scale(1.12); }
}
@media(prefers-reduced-motion:reduce){
.pv-bg-glow .stage-bg::before,.pv-bg-glow .stage-bg::after{ animation:none; }
}

.pv-bg-glow.p0{--bg-a:#0a0c12;--bg-b:#6f8cff;--bg-power:.55;}
.pv-bg-glow.p1{--bg-a:#120a0c;--bg-b:#ff7a5c;--bg-power:.55;}
.pv-bg-glow.p2{--bg-a:#08120d;--bg-b:#4fd39a;--bg-power:.5;}
.pv-bg-glow.p3{--bg-a:#100a16;--bg-b:#d78bff;--bg-power:.6;}
.pv-bg-glow.p4{--bg-a:#0b0b0d;--bg-b:#8a97ad;--bg-power:.32;}
.pv-bg-glow.p5{--bg-a:#060910;--bg-b:#4fc8ff;--bg-power:.85;}