/* =========================================================
   背景（配信画面ふうの壁紙）
     ぜんぶCSSで描いている。動画・画像は使わない。
     最初に作った「配信の背景をトレースした版」に戻したもの（2026-09-21）。
       ・薄いグリッド（縦横＋斜め）
       ・ミント〜黄緑のグラデーション円
       ・斜線で塗った円
       ・×印・ひし形・細い斜線
     色は :root、位置は各クラスにまとめてある。
   ========================================================= */
:root {
    --bd-base:  #F7FBFB;               /* 下地 */
    --bd-line:  rgba(23,49,58,.055);   /* グリッドの線 */
    --bd-mint:  #7FD8DE;
    --bd-lime:  #CDEB9C;
    --bd-violet:#C3B2FF;               /* 紫がかった円に使う */
    --bd-violet-2:#9FD8F0;
    --bd-ink:   #17313a;
}

.backdrop {
    position: absolute;      /* 配信画面（.screen-view）の中いっぱい */
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bd-base);
}

/* ---------- 縦横のグリッド ---------- */
.backdrop::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        repeating-linear-gradient(90deg, var(--bd-line) 0 1px, transparent 1px 172px),
        repeating-linear-gradient(0deg,  var(--bd-line) 0 1px, transparent 1px 172px);
}
/* ---------- 斜めのグリッド（×に交差する線） ---------- */
.backdrop::after {
    content: "";
    position: absolute;
    inset: -30%;
    background:
        repeating-linear-gradient( 45deg, rgba(23,49,58,.04) 0 1px, transparent 1px 243px),
        repeating-linear-gradient(-45deg, rgba(23,49,58,.04) 0 1px, transparent 1px 243px);
}

/* ---------- 共通 ---------- */
.bd { position: absolute; }

/* ---------- 丸をまとめる層 ----------
   goo フィルタで、近づいた丸どうしの境目がくっついて見える。
   フィルタは「不透明な形」にしか効かないので、
   薄さはこの層の opacity でつける（丸自体は opacity:1） */
.bd-goo {
    position: absolute;
    inset: 0;
    opacity: .5;
    filter: url(#goo);
}
.bd-goo-def { position: absolute; width: 0; height: 0; }
.bd-goo .bd-circle,
.bd-goo .bd-hatch { opacity: 1; }

/* ---------- グラデーションの円 ---------- */
.bd-circle {
    border-radius: 50%;
    background: linear-gradient(155deg, var(--bd-mint), var(--bd-lime));
    opacity: .62;
}
.bd-circle--1 { width: 30vw; max-width: 380px; aspect-ratio: 1; left: -6vw;  top: 52vh; }
.bd-circle--2 { width: 13vw; max-width: 170px; aspect-ratio: 1; left: 27vw;  top: -3vh; opacity: .58; }
.bd-circle--3 { width: 17vw; max-width: 230px; aspect-ratio: 1; right: -3vw; top: 24vh; opacity: .52; }
.bd-circle--4 { width: 11vw; max-width: 140px; aspect-ratio: 1; right: 14vw; bottom: -4vh; opacity: .46; }

/* ---------- 紫寄りのグラデーション円（もと斜線の円） ---------- */
.bd-hatch {
    border-radius: 50%;
    background: linear-gradient(150deg, var(--bd-violet), var(--bd-violet-2));
    opacity: .5;
}
.bd-hatch--1 { width: 15vw; max-width: 190px; aspect-ratio: 1; left: 44vw; top: 38vh; }
.bd-hatch--2 { width: 12vw; max-width: 150px; aspect-ratio: 1; left: -4vw; top: 6vh; opacity: .44; }
.bd-hatch--3 { width: 10vw; max-width: 130px; aspect-ratio: 1; right: 4vw; top: -3vh; opacity: .46; }

/* ---------- ひし形（線だけ） ---------- */
.bd-diamond {
    width: 15px; aspect-ratio: 1;
    border: 1.5px solid rgba(90,190,200,.75);
    transform: rotate(45deg);
}
.bd-diamond--1 { left: 16vw; top: 22vh; }
.bd-diamond--2 { left: 34vw; top: 74vh; width: 11px; }
.bd-diamond--3 { right: 22vw; top: 14vh; width: 18px; }
.bd-diamond--4 { right: 8vw;  bottom: 16vh; width: 13px; }
.bd-diamond--5 { left: 7vw;   bottom: 9vh;  width: 10px; }

/* ---------- ×印 ---------- */
.bd-x {
    color: var(--bd-ink);
    font-size: 13px;
    line-height: 1;
    opacity: .75;
}
.bd-x--1 { left: 2vw;  top: 28vh; }
.bd-x--2 { left: 30vw; top: 14vh; font-size: 10px; color: rgba(90,190,200,.9); }
.bd-x--3 { left: 49vw; bottom: 22vh; }
.bd-x--4 { right: 12vw; top: 33vh; }
.bd-x--5 { left: 9vw;  bottom: 24vh; font-size: 11px; }
.bd-x--6 { right: 30vw; top: 7vh;  font-size: 11px; color: rgba(90,190,200,.9); }

/* ×を並べた帯（動画の左下・右上にあるやつ） */
.bd-xrow {
    color: rgba(126,214,222,.95);
    font-size: 11px;
    letter-spacing: .5em;
    line-height: 1.5;
}
.bd-xrow--1 { left: 1vw;  top: 62vh; }
.bd-xrow--2 { right: 1vw; top: 26vh; }

/* =========================================================
   ●の動き
     js/backdrop.js が動いているときは、位置も潰れもJSが transform で描く
     （衝突して反発するため）。JSが動かないときの保険として、
     CSSのゆっくりした漂いも残してある。
   ========================================================= */
.bd-circle, .bd-hatch { will-change: transform; }
.backdrop.is-physics .bd-circle,
.backdrop.is-physics .bd-hatch { animation: none !important; }

.bd-circle--1 { animation: bd-drift 31s ease-in-out infinite alternate; }
.bd-circle--2 { animation: bd-drift 43s ease-in-out infinite alternate -9s; }
.bd-circle--3 { animation: bd-drift 37s ease-in-out infinite alternate -21s; }
.bd-circle--4 { animation: bd-drift 49s ease-in-out infinite alternate -5s; }
.bd-hatch--1  { animation: bd-drift 53s ease-in-out infinite alternate -14s; }
.bd-hatch--2  { animation: bd-drift 47s ease-in-out infinite alternate -30s; }
.bd-hatch--3  { animation: bd-drift 59s ease-in-out infinite alternate -38s; }
@keyframes bd-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(2vw, -2.6vh, 0); }
}

@media (max-width: 760px) {
    .bd-xrow--2, .bd-x--2, .bd-x--6 { display: none; }
    /* スマホは負荷を考えてフィルタを切る */
    .bd-goo { filter: none; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .bd-circle, .bd-hatch { animation: none; transform: none; border-radius: 50%; }
    .bd-goo { filter: none; opacity: .55; }
}