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

   触れるつまみ:
     --bg-a   奥の色
     --bg-b   光の色1
     --bg-c   光の色2
     --bg-speed  動きの速さ（秒。大きいほどゆっくり）

   配信画面の最背面（.stage-bg）に敷かれる。
   クリックは通るので、OBSの操作を邪魔しない。
   ============================================================ */
.pv-bg-aurora{
  --bg-a:#0d1020;
  --bg-b:#3fd3a8;
  --bg-c:#7a6bff;
  --bg-speed:26s;
}
.pv-bg-aurora .stage-bg{
  background:var(--bg-a);
  overflow:hidden;
}
/* 光の帯を2枚重ねて、ゆっくり動かす */
.pv-bg-aurora .stage-bg::before,.pv-bg-aurora .stage-bg::after{
  content:"";
  position:absolute;
  left:-30%; right:-30%; top:-40%; bottom:-40%;
  background:
    radial-gradient(45% 30% at 30% 40%, var(--bg-b), transparent 70%),
    radial-gradient(40% 28% at 70% 60%, var(--bg-c), transparent 70%);
  opacity:.55;
  filter:blur(50px);
  animation:bg-aurora-stage-aurora var(--bg-speed) ease-in-out infinite alternate;
}
.pv-bg-aurora .stage-bg::after{
  animation-duration:calc(var(--bg-speed) * 1.6);
  animation-direction:alternate-reverse;
  opacity:.4;
}
@keyframes bg-aurora-stage-aurora{
  0%  { transform:translate(-6%, -3%) rotate(-3deg) scale(1.05); }
  100%{ transform:translate(6%, 4%) rotate(3deg) scale(1.15); }
}
@media(prefers-reduced-motion:reduce){
.pv-bg-aurora .stage-bg::before,.pv-bg-aurora .stage-bg::after{ animation:none; }
}

.pv-bg-aurora.p0{--bg-a:#0d1020;--bg-b:#3fd3a8;--bg-c:#7a6bff;}
.pv-bg-aurora.p1{--bg-a:#1b1018;--bg-b:#ff8fb8;--bg-c:#ffca7a;}
.pv-bg-aurora.p2{--bg-a:#08131f;--bg-b:#4fb8ff;--bg-c:#7affd8;}
.pv-bg-aurora.p3{--bg-a:#1a0f14;--bg-b:#ff9a5c;--bg-c:#c86bff;}
.pv-bg-aurora.p4{--bg-a:#101010;--bg-b:#7a7a7a;--bg-c:#3a3a3a;}
.pv-bg-aurora.p5{--bg-a:#05060c;--bg-b:#2b4a8a;--bg-c:#5a3f8a;}