/* ═══════════════════════════════════════════════════════════
   業務アニメーション（E1／脱バンドル方式）の枠
   ═══════════════════════════════════════════════════════════

   受領物 r3 は `window.OM_BAR = false` で**再生バーを描かない**
   （高さも0で計算される。INTEGRATION.md §2 / §6）。r1 のときに要った
   「44px ぶん背を高くして切り落とす」細工はもう要らない。 */

.yu-uc {
  background: #0a0a0a;              /* 受領物のレターボックスと同じ面（絵の一部） */
  border-radius: var(--yu-r, 12px);
  overflow: hidden;
}

.yu-uc__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;             /* 予約する。**読み込みで高さが動かない** */
  overflow: hidden;
}

.yu-uc__stage { position: absolute; inset: 0; }

/* **LP側のリセットを受領物へ effect させない。**
   `base.css` の `img, svg { max-width: 100% }` が、受領物の
   `<svg width="1920" height="1080">` を枠幅（例 1060px）へ潰す。受領物は
   そのうえで自前の `transform: scale()` を掛けるので、**二重に縮んで**
   絵が枠の55%になり、左右に黒帯が出る（実測 585px / 1060px）。
   絵は出ているし CSP も通るので、**構造の検査では緑のまま**すり抜ける。
   検知は tools/qa_e1.py の gate 10（絵が枠幅を満たしているか）。 */
.yu-uc__stage svg { max-width: none; }

/* 受領物が描く前の見た目。**空の黒い穴にしない。** */
.yu-uc__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(16px, 3vw, 30px);
  color: #f7f5ef;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.yu-uc__num {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(247, 245, 239, .30);
  line-height: 1;
}

.yu-uc__name { font-size: clamp(15px, 1.8vw, 20px); font-weight: 700; }

.yu-uc__line {
  font-size: clamp(13px, 1.5vw, 16px);
  color: rgba(247, 245, 239, .72);
  max-width: 34em;
}

/* 受領物が描き始めたらフォールバックは引っ込む。
   **JS が動かなければ出たまま**＝業務名と締めの一文は必ず読める。

   **`opacity` だけで隠してはいけない。** `base.css` の reduced-motion 規則が
   `*, *::before, *::after { opacity: 1 !important; }` を掛けるので、
   reduced-motion の人にはフォールバックが**絵の上に重なったまま**残る
   （実測。文字が二重になって読めなくなる）。`visibility` はその規則に
   含まれていないので、こちらで確実に消す。opacity は通常時の淡い切り替え用。
   検知は tools/qa_e1.py の gate 11。 */
.yu-uc[data-uc-state="playing"] .yu-uc__fallback,
.yu-uc[data-uc-state="paused"] .yu-uc__fallback,
.yu-uc[data-uc-state="reduced"] .yu-uc__fallback {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .yu-uc__fallback { transition: none; }
}