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

   触れるつまみ:
     --bg-a     地の色
     --bg-b     つぶの色
     --bg-size  つぶの間隔（大きいほど、まばら）
     --bg-speed 動きの速さ（秒。大きいほどゆっくり）

   配信画面の最背面（.stage-bg）に敷かれる。
   クリックは通るので、OBSの操作を邪魔しない。

   ★ 動かすのは background-position だけにしてある。
     影やぼかしを毎フレーム引き直すと、配信中のPCで重くなる。
   ============================================================ */
.pv-bg-dots{
  --bg-a:#12141c;
  --bg-b:#8fd3a8;
  --bg-size:54px;
  --bg-speed:40s;
}
.pv-bg-dots .stage-bg{
  background-color:var(--bg-a);
  /* 大小2枚のつぶを重ねると、平らに見えない */
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--bg-b) 55%, transparent) 2.5px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--bg-b) 26%, transparent) 1.5px, transparent 2px);
  background-size:
    var(--bg-size) var(--bg-size),
    calc(var(--bg-size) * 1.7) calc(var(--bg-size) * 1.7);
  background-position:0 0, calc(var(--bg-size) / 2) calc(var(--bg-size) / 2);
  animation:bg-dots-stage-dots var(--bg-speed) linear infinite;
}
@keyframes bg-dots-stage-dots{
  0%  { background-position:0 0, calc(var(--bg-size) / 2) calc(var(--bg-size) / 2); }
  100%{ background-position:
          var(--bg-size) calc(var(--bg-size) * -1),
          calc(var(--bg-size) * 2.2) calc(var(--bg-size) * -1.2); }
}
@media(prefers-reduced-motion:reduce){
.pv-bg-dots .stage-bg{ animation:none; }
}

.pv-bg-dots.p0{--bg-a:#12141c;--bg-b:#8fd3a8;--bg-size:54px;}
.pv-bg-dots.p1{--bg-a:#1b1017;--bg-b:#ff9ec0;--bg-size:54px;}
.pv-bg-dots.p2{--bg-a:#0b1420;--bg-b:#7fc4ff;--bg-size:54px;}
.pv-bg-dots.p3{--bg-a:#1d1a12;--bg-b:#ffd98a;--bg-size:54px;}
.pv-bg-dots.p4{--bg-a:#101010;--bg-b:#8a8a8a;--bg-size:44px;}
.pv-bg-dots.p5{--bg-a:#141020;--bg-b:#b79bff;--bg-size:86px;}