/* where: HEIST動画前景 / what: 不透明な顔と個別の三択軌跡 / why: 参加者を見失わず前後に動く距離感を伝える */
.heist-cinematic-crew[hidden] {
  display:block; position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  --crew-color:#e5bd72; --crew-size:clamp(42px,12vw,76px);
}
.heist-cinematic .heist-cinematic-skip { z-index:2; }
.heist-cinematic-member {
  --depth-near:1.6; --crew-sway:1vw; --crew-rise:0vh; --crew-turn:1; --crew-tempo:1; --crew-start:0;
  z-index:2; transform-origin:center; opacity:1;
  position:absolute; top:50%; width:var(--crew-size); height:var(--crew-size);
  margin-left:calc(var(--crew-size) / -2); margin-top:calc(var(--crew-size) / -2);
  animation:heist-crew-charge calc(var(--crew-duration) * var(--crew-tempo)) cubic-bezier(.2,.7,.2,1) calc(var(--delay) + var(--crew-duration) * var(--crew-start)) both;
  will-change:transform;
}
/* 先頭のspanは衝撃波。続く最大5人は速度・開始・振幅・回転を固定でずらし、毎回の再抽選はしない。 */
.heist-cinematic-member:nth-of-type(5n+2) {
  --depth-near:1.52; --crew-sway:.8vw; --crew-rise:1vh; --crew-turn:-1; --crew-tempo:.94; --crew-start:.025;
}
.heist-cinematic-member:nth-of-type(5n+3) {
  --depth-near:1.28; --crew-sway:-.8vw; --crew-rise:-1vh; --crew-turn:1; --crew-tempo:1; --crew-start:.045; z-index:1;
}
.heist-cinematic-member:nth-of-type(5n+4) {
  --depth-near:1.6; --crew-sway:1.2vw; --crew-rise:0vh; --crew-turn:.7; --crew-tempo:.9; --crew-start:.09;
}
.heist-cinematic-member:nth-of-type(5n+5) {
  --depth-near:1.36; --crew-sway:-.6vw; --crew-rise:2vh; --crew-turn:-.75; --crew-tempo:.96; --crew-start:.015; z-index:1;
}
.heist-cinematic-member:nth-of-type(5n+6) {
  --depth-near:1.45; --crew-sway:-1vw; --crew-rise:-2vh; --crew-turn:1.1; --crew-tempo:.92; --crew-start:.065;
}
.heist-cinematic-face {
  display:block; width:100%; height:100%; border:2px solid var(--crew-color); border-radius:50%;
  overflow:hidden; background:#141619; box-shadow:0 0 0 4px #080b0dcc,0 8px 24px #000b,0 0 22px #e5bd7233;
}
.heist-cinematic-face img { display:block; width:100%; height:100%; object-fit:cover; }
.heist-cinematic-member>.heist-role-icon { position:absolute; right:0; bottom:0; width:20px; height:20px; }
.heist-cinematic-member>.heist-role-icon svg { width:12px; height:12px; }
.heist-cinematic-mark {
  position:absolute; left:50%; top:40%; width:min(60vw,360px); aspect-ratio:1;
  border:1px solid var(--crew-color); border-radius:50%; opacity:0;
  animation:heist-crew-breach var(--crew-duration) ease-out both;
}
/* 突破: 奥で溜め、手前へ大きく迫ってから奥へ抜ける。 */
@keyframes heist-crew-charge {
  0% { transform:translate(0,calc(28vh + var(--crew-rise))) scale(.3) rotate(0deg); }
  14% { transform:translate(calc(var(--crew-sway) * -1),calc(18vh + var(--crew-rise))) scale(.72) rotate(calc(var(--crew-turn) * -3deg)); }
  32% { transform:translate(var(--crew-sway),calc(21vh + var(--crew-rise))) scale(.5) rotate(calc(var(--crew-turn) * -8deg)); }
  49% { transform:translate(var(--crew-sway),calc(-10vh + var(--crew-rise))) scale(var(--depth-near)) rotate(calc(var(--crew-turn) * 5deg)); }
  57% { transform:translate(calc(var(--crew-sway) * -.5),calc(-6vh + var(--crew-rise))) scale(1.2) rotate(calc(var(--crew-turn) * -3deg)); }
  70% { transform:translate(0,calc(-10vh + var(--crew-rise))) scale(.95) rotate(calc(var(--crew-turn) * 2deg)); }
  100% { transform:translate(calc(var(--crew-sway) * -.4),calc(-26vh + var(--crew-rise))) scale(.3) rotate(0deg); }
}
@keyframes heist-crew-breach {
  0%,42% { opacity:0; transform:translate(-50%,-50%) scale(.15); }
  50% { opacity:.65; }
  78%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.8); }
}
/* 知略: 左右へ展開して包囲し、少しずつずれた合図で収束する。 */
.heist-cinematic-crew[data-approach="plan"] { --crew-color:#91bcd1; }
[data-approach="plan"] .heist-cinematic-member { animation-name:heist-crew-flank; }
[data-approach="plan"] .heist-cinematic-mark { border-style:dashed; animation-name:heist-crew-lock; }
@keyframes heist-crew-flank {
  0% { transform:translate(0,calc(25vh + var(--crew-rise))) scale(.3) rotate(0deg); }
  16% { transform:translate(var(--crew-sway),calc(18vh + var(--crew-rise))) scale(.9) rotate(calc(var(--crew-turn) * 3deg)); }
  40% { transform:translate(calc(var(--flank) * 4vw + var(--crew-sway)),calc(var(--flank) * 8vh + var(--crew-rise))) scale(.5) rotate(calc(var(--crew-turn) * -6deg)); }
  64% { transform:translate(calc(var(--flank) * 4vw + var(--crew-sway)),calc(var(--flank) * -10vh - 4vh + var(--crew-rise))) scale(.85) rotate(calc(var(--crew-turn) * 5deg)); }
  80% { transform:translate(var(--crew-sway),calc(-7vh + var(--crew-rise))) scale(var(--depth-near)) rotate(calc(var(--crew-turn) * -3deg)); }
  100% { transform:translate(0,calc(-14vh + var(--crew-rise))) scale(.3) rotate(0deg); }
}
@keyframes heist-crew-lock {
  0% { opacity:0; transform:translate(-50%,-50%) scale(1.2) rotate(-60deg); }
  35%,65% { opacity:.45; }
  85% { opacity:.7; transform:translate(-50%,-50%) scale(.65) rotate(30deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(30deg); }
}
/* 潜入: 顔を常に見せたまま左右へ避け、順番に奥へ抜ける。 */
.heist-cinematic-crew[data-approach="sneak"] { --crew-color:#8dbda9; }
[data-approach="sneak"] .heist-cinematic-member { animation-name:heist-crew-slip; }
[data-approach="sneak"] .heist-cinematic-mark { display:none; }
@keyframes heist-crew-slip {
  0% { transform:translate(calc(-3vw + var(--crew-sway)),calc(25vh + var(--crew-rise))) scale(.3) rotate(0deg); }
  18% { transform:translate(var(--crew-sway),calc(15vh + var(--crew-rise))) scale(1.1) rotate(calc(var(--crew-turn) * -6deg)); }
  35% { transform:translate(calc(3vw + var(--crew-sway)),calc(8vh + var(--crew-rise))) scale(.48) rotate(calc(var(--crew-turn) * -2deg)); }
  51% { transform:translate(calc(-3vw + var(--crew-sway)),var(--crew-rise)) scale(calc(var(--depth-near) * .92)) rotate(calc(var(--crew-turn) * 6deg)); }
  68% { transform:translate(calc(-3vw + var(--crew-sway)),calc(-7vh + var(--crew-rise))) scale(.48) rotate(calc(var(--crew-turn) * 2deg)); }
  82% { transform:translate(calc(2vw + var(--crew-sway)),calc(-14vh + var(--crew-rise))) scale(1.2) rotate(calc(var(--crew-turn) * -5deg)); }
  100% { transform:translate(var(--crew-sway),calc(-24vh + var(--crew-rise))) scale(.3) rotate(0deg); }
}
@media (prefers-reduced-motion:reduce) {
  .heist-cinematic-crew .heist-cinematic-member { animation:none; transform:none; opacity:1; will-change:auto; }
  .heist-cinematic-crew .heist-cinematic-mark { display:none; }
}