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

   触れるつまみ:
     --bg-a     地の色
     --bg-b     線の色
     --bg-size  しまの幅
     --bg-speed 動きの速さ（秒。大きいほどゆっくり）

   ななめのしまが、ゆっくり流れ続けます。
   配信画面の最背面（.stage-bg）に敷かれる。

   ★ 動かすのは background-position だけ。ぼかしや影は使わない
     （配信中のPCで重くなる）。
   ★ しまは薄くしてある。濃くすると、上に重ねた文字が読みにくくなる。
   ============================================================ */
.pv-bg-stripe{
  --bg-a:#141824;
  --bg-b:#4a7fd0;
  --bg-size:120px;
  --bg-speed:24s;
}
.pv-bg-stripe .stage-bg{
  background-color:var(--bg-a);
  background-image:repeating-linear-gradient(
    115deg,
    color-mix(in srgb, var(--bg-b) 30%, transparent) 0,
    color-mix(in srgb, var(--bg-b) 30%, transparent) calc(var(--bg-size) * .18),
    transparent calc(var(--bg-size) * .18),
    transparent calc(var(--bg-size) * .5)
  );
  background-size:var(--bg-size) var(--bg-size);
  animation:bg-stripe-stage-stripe var(--bg-speed) linear infinite;
}
/* うっすら明るいところを作って、平らに見えないようにする */
.pv-bg-stripe .stage-bg::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 30% 20%,
    color-mix(in srgb, var(--bg-b) 22%, transparent), transparent 70%);
  pointer-events:none;
}
@keyframes bg-stripe-stage-stripe{
  0%  { background-position:0 0; }
  100%{ background-position:var(--bg-size) 0; }
}
@media(prefers-reduced-motion:reduce){
.pv-bg-stripe .stage-bg{ animation:none; }
}

.pv-bg-stripe.p0{--bg-a:#141824;--bg-b:#4a7fd0;--bg-size:120px;}
.pv-bg-stripe.p1{--bg-a:#101c18;--bg-b:#48c39a;--bg-size:120px;}
.pv-bg-stripe.p2{--bg-a:#1d1215;--bg-b:#ff8f5c;--bg-size:120px;}
.pv-bg-stripe.p3{--bg-a:#161225;--bg-b:#9a7bff;--bg-size:120px;}
.pv-bg-stripe.p4{--bg-a:#12141a;--bg-b:#6f7c92;--bg-size:64px;}
.pv-bg-stripe.p5{--bg-a:#0f1418;--bg-b:#5ec8d8;--bg-size:200px;}