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

   触れるつまみ:
     --fr-color  帯の色
     --fr-h      帯の高さ
     --fr-line   すじの色
     --fr-speed  すじの流れる速さ（秒。0s で止まる）

   上と下に帯を置きます。帯の中は**空けてある**ので、
   そこへ見出しや時計・参加者の一覧を置くと、画面がまとまります。

   配信画面の最前面（.stage-frame）に重なる。中（映像のところ）は隠さない。

   ★ 帯は半透明にしてある。塗りつぶすと、16:9の映像が切れて見える。
   ★ すじは上の帯だけ。上下とも動かすと、目が休まらない。
   ============================================================ */
.pv-frame-ribbon{
  --fr-color:#16203a;
  --fr-h:72px;
  --fr-line:#7cc4ff;
  --fr-speed:14s;
}
.pv-frame-ribbon .stage-frame{
  inset:0;
  box-sizing:border-box;
  /* 上と下の帯。中は空ける。 */
  background:
    linear-gradient(color-mix(in srgb, var(--fr-color) 88%, transparent),
                    color-mix(in srgb, var(--fr-color) 88%, transparent))
      top / 100% var(--fr-h) no-repeat,
    linear-gradient(color-mix(in srgb, var(--fr-color) 88%, transparent),
                    color-mix(in srgb, var(--fr-color) 88%, transparent))
      bottom / 100% var(--fr-h) no-repeat;
}
/* 上の帯の下ふちを、すじが流れる */
.pv-frame-ribbon .stage-frame::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:calc(var(--fr-h) - 3px);
  height:3px;
  background:linear-gradient(90deg,
    transparent, var(--fr-line), transparent);
  background-size:40% 100%;
  background-repeat:no-repeat;
  animation:frame-ribbon-stage-ribbon var(--fr-speed) linear infinite;
}
/* 下の帯の上ふちは、動かさない細い線 */
.pv-frame-ribbon .stage-frame::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:calc(var(--fr-h) - 2px);
  height:2px;
  background:color-mix(in srgb, var(--fr-line) 55%, transparent);
}
@keyframes frame-ribbon-stage-ribbon{
  0%  { background-position:-45% 0; }
  100%{ background-position:145% 0; }
}
@media(prefers-reduced-motion:reduce){
.pv-frame-ribbon .stage-frame::before{ animation:none; background-position:50% 0; }
}

.pv-frame-ribbon.p0{--fr-color:#16203a;--fr-h:72px;--fr-line:#7cc4ff;}
.pv-frame-ribbon.p1{--fr-color:#12261e;--fr-h:72px;--fr-line:#7ce0a8;}
.pv-frame-ribbon.p2{--fr-color:#2a1618;--fr-h:72px;--fr-line:#ffb07a;}
.pv-frame-ribbon.p3{--fr-color:#141414;--fr-h:72px;--fr-line:#d0d0d0;}
.pv-frame-ribbon.p4{--fr-color:#1a1630;--fr-h:44px;--fr-line:#b79bff;}
.pv-frame-ribbon.p5{--fr-color:#101820;--fr-h:110px;--fr-line:#5ed8d8;}