/* 根戸ろまん ハブ — PV のキャラのカットイン（trio / dash）。中身は pv.js が台本（pv-data.js）から組む。
   trio＝縦 3 コマ。斜めの白い継ぎ目で割り、左・右のコマは上から／真ん中は下から同時に滑り込む。
   dash＝黒地に斜めの帯。帯が横から滑り込み、帯の中の顔のアップが遅れて止まる（ゲームの PV の必殺技）。
   台本の語り（.pv-say・z4）はこの上に乗る。 */

.pv-trio,
.pv-dash { z-index: 3; pointer-events: none; }

.trio-set,
.dash-set { position: absolute; inset: 0; display: none; }
.trio-set.is-on,
.dash-set.is-on { display: block; }

[data-scene="trio"] .pv-tone { background-color: var(--white); background-image: none; }
[data-scene="dash"] .pv-tone { background-color: var(--ink); background-image: none; }
[data-scene="trio"] .pv-hud,
[data-scene="dash"] .pv-hud { color: var(--white); }

/* ── trio: 継ぎ目は 左＝上 32%→下 26%・右＝上 71.8%→下 75.8%（白の幅 2.4%） ── */
.trio-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at var(--ax) 32%, rgba(255, 78, 139, 0.55), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 7px);
}
.trio-panel.p1 { left: 0; width: 32%; --ax: 46.9%; clip-path: polygon(0 0, 100% 0, 81.25% 100%, 0 100%); }
.trio-panel.p2 {
  left: 28.4%;
  width: 45.4%;
  --ax: 51.5%;
  clip-path: polygon(13.2% 0, 91.2% 0, 100% 100%, 0 100%);
  background-color: var(--pink);
  background-image:
    radial-gradient(circle at var(--ax) 30%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.3) 1.6px, transparent 1.9px);
  background-size: 100% 100%, 9px 9px;
}
.trio-panel.p3 { left: 72.2%; width: 27.8%; --ax: 52%; clip-path: polygon(0 0, 100% 0, 100% 100%, 14.4% 100%); }

/* 顔の中心（絵の fx・fy %）をコマの (--ax, y %) に置く。高さ＝コマの zoom 倍 */
.trio-fig {
  position: absolute;
  left: var(--ax);
  top: calc(var(--y) * 1%);
  height: calc(var(--zoom) * 100%);
  width: auto;
  max-width: none;
  translate: calc(var(--fx) * -1%) calc(var(--fy) * -1%);
}

/* ── dash ── */
.dash-band {
  position: absolute;
  left: -15%;
  width: 130%;
  top: 22%;
  height: 44%;
  rotate: -7deg;
  overflow: hidden;
  background: var(--ink);
  border-block: 3px solid var(--white);
  box-shadow: 0 -9px 0 var(--pink), 0 9px 0 var(--pink);
}
.dash-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
}
.dash-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dash-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 9cqi, 44px);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--white);
  -webkit-text-stroke: 0.12em var(--pink);
  paint-order: stroke fill;
  rotate: -7deg;
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .trio-set.is-on { animation: shake 260ms 300ms linear 1; }
  .is-live .trio-set.is-on .p1,
  .is-live .trio-set.is-on .p3 { animation: drop-in 300ms var(--sweep) both; }
  .is-live .trio-set.is-on .p2 { animation: rise-in 300ms var(--sweep) both; }
  .is-live .trio-set.is-on .trio-fig { animation: fig-settle 900ms 200ms var(--ease) both; }
  .is-live[data-scene="trio"] .pv-flash { animation: flash-hit 260ms 280ms ease-out; }

  .is-live .dash-set.is-on { animation: shake 240ms 300ms linear 1; }
  .is-live .dash-set.is-on .dash-band { animation: dash-in 280ms var(--sweep) both; }
  .is-live .dash-set.is-on .dash-band::after { animation: flash-hit 240ms 260ms ease-out; }
  .is-live .dash-set.is-on .dash-img { animation: dash-pan 900ms 120ms var(--ease) both; }
  .is-live .dash-set.is-on .dash-line { animation: slide-l 300ms 360ms var(--ease) both; }
}

@keyframes drop-in { from { transform: translateY(-105%); } to { transform: none; } }
@keyframes rise-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fig-settle { from { scale: 1.12; } to { scale: 1; } }
@keyframes flash-hit { from { opacity: 0.85; } to { opacity: 0; } }
@keyframes dash-in { from { translate: 110% 0; } to { translate: 0 0; } }
@keyframes dash-pan { from { translate: 22% 0; scale: 1.15; } to { translate: 0 0; scale: 1; } }