/* Clear preparation → travel → impact. All moving effects use transform/opacity only. */
.cinema-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  color: var(--cinema-accent, #e7e2b6);
  contain: layout style paint;
}
.cinema-layer *, .cinema-layer *::before, .cinema-layer *::after { pointer-events: none; }
.cinema-at {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
}
.cinema-drawing {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: center;
  animation: fbc-emerge calc(var(--cinema-time, 1000ms) * var(--cinema-length, .65)) cubic-bezier(.16, .7, .3, 1) calc(var(--cinema-time, 1000ms) * var(--cinema-delay, 0)) both;
}
.cinema-drawing svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cinema-at.cinema-focus .cinema-drawing { animation-name: fbc-focus; }
.cinema-at:is(.cinema-rune, .cinema-echo) .cinema-drawing { animation-name: fbc-rune; }
.cinema-at.cinema-arc .cinema-drawing { animation-name: fbc-cut; }
.cinema-at.cinema-ward .cinema-drawing { animation-name: fbc-ward; }
.cinema-at.cinema-impact .cinema-drawing { animation-name: fbc-impact; }
.cinema-at.cinema-slam .cinema-drawing { animation-name: fbc-shockwave; }
.cinema-at.cinema-blessing .cinema-drawing { animation-name: fbc-blessing; }
.cinema-at.cinema-aura .cinema-drawing { animation-name: fbc-aura; }
.cinema-at.cinema-sunrise .cinema-drawing { animation-name: fbc-sunrise; }
.cinema-at.cinema-threat .cinema-drawing { animation-name: fbc-threat; }
.cinema-at.cinema-thread .cinema-drawing { animation-name: fbc-thread; }
.cinema-at:is(.cinema-spark, .cinema-shard, .cinema-leaf) .cinema-drawing { animation-name: fbc-spark; }
.cinema-at.cinema-falling-light .cinema-drawing { animation-name: fbc-falling; }
.cinema-at.cinema-training-seal .cinema-drawing { animation-name: fbc-training-seal; }
.cinema-at.cinema-training-node .cinema-drawing { animation-name: fbc-blessing; }
.cinema-at.cinema-training-impact .cinema-drawing { animation-name: fbc-impact; }
.cinema-at.cinema-guardian-aura .cinema-drawing { animation-name: fbc-guardian-aura; }
.cinema-at.cinema-guardian-seal .cinema-drawing { animation-name: fbc-guardian-seal; }
.cinema-at.cinema-earned-medallion .cinema-drawing { animation-name: fbc-earned-medallion; }
.cinema-flight {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  animation: fbc-flight calc(var(--cinema-time, 1000ms) * var(--cinema-length, .42)) cubic-bezier(.28, .26, .62, 1) calc(var(--cinema-time, 1000ms) * var(--cinema-delay, .14)) both;
}
.cinema-flight > svg { display: block; position: absolute; width: 90px; height: 18px; transform: translate(-78%, -50%) rotate(var(--cinema-angle, 0deg)); transform-origin: 78% 50%; overflow: visible; }
.cinema-flight-light > svg { width: 116px; height: 24px; }
.cinema-flight-gust > svg { width: 107px; height: 27px; }
.cinema-link {
  position: absolute;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform-origin: left center;
  animation: fbc-link calc(var(--cinema-time, 1000ms) * .79) ease-out calc(var(--cinema-time, 1000ms) * var(--cinema-delay, .16)) both;
}

/* The existing numeric receipt remains above these illustrations. */
.arena[data-cinema-active="true"] .combat-projectile { display: none; }
.arena[data-cinema-active="true"] #action-callout { border-left-color: var(--cinema-accent); }
.arena[data-cinema-active="true"] #action-callout .actor { color: var(--cinema-accent); }
.arena[data-cinema-active="true"] .stage-member.is-acting { border-color: var(--cinema-accent); }
.arena[data-cinema-active="true"] .stage-member.is-acting .avatar-figure {
  animation: fbc-member-strike calc(var(--cinema-time, 1000ms) * .95) cubic-bezier(.18, .6, .3, 1) both;
}
.arena[data-cinema-active="true"] .stage-member.is-acting .avatar-weapon {
  animation: fbc-weapon-strike calc(var(--cinema-time, 1000ms) * .86) ease both;
}
.arena[data-cinema-active="true"][data-cinema-actor="riven"] .stage-member.is-acting .avatar-figure { animation-name: fbc-riven-strike; }
.arena[data-cinema-active="true"][data-cinema-actor="bram"] .stage-member.is-acting .avatar-figure { animation-name: fbc-bram-strike; }
.arena[data-cinema-active="true"] .stage-member:is([data-character="lyra"], [data-character="sera"]).is-acting .avatar-figure { animation-name: fbc-archer-strike; }
.arena[data-cinema-active="true"] .stage-member:is([data-character="lyra"], [data-character="sera"]).is-acting .avatar-weapon { animation-name: fbc-bow-strike; }
.arena[data-cinema-active="true"] .stage-member:is([data-character="mira"], [data-character="orrin"]).is-acting .avatar-figure { animation-name: fbc-caster-strike; }
.arena[data-cinema-active="true"] .stage-member:is([data-character="mira"], [data-character="orrin"]).is-acting .avatar-weapon { animation-name: fbc-caster-weapon; }
.arena[data-cinema-active="true"] #enemy-art.is-hit img { animation: fbc-enemy-impact calc(var(--cinema-time, 1000ms) * .95) ease both; }
.arena[data-cinema-active="true"] #enemy-art.is-acting img { animation: fbc-enemy-strike calc(var(--cinema-time, 1000ms) * .98) cubic-bezier(.2, .66, .32, 1) both; }
.arena[data-cinema-active="true"] .stage-member.is-hit .avatar-figure { animation: fbc-party-impact calc(var(--cinema-time, 1000ms) * 1.02) ease both; }
.arena[data-cinema-active="true"] .stage-member.is-healing .avatar-figure { animation: fbc-heal-pose calc(var(--cinema-time, 1000ms) * 1.05) ease both; }
.arena[data-cinema-active="true"] .battle-number { animation-delay: calc(var(--cinema-time, 1000ms) * .36); animation-duration: calc(var(--cinema-time, 1000ms) * .98); }
.arena[data-cinema-event="enemy"] .battle-number { animation-delay: calc(var(--cinema-time, 1000ms) * .47); }
.arena[data-cinema-event="victory"] .stage-member .avatar-figure { animation: fbc-victory-pose calc(var(--cinema-time, 1000ms) * 1.18) ease both; }
.arena[data-cinema-event="defeat"] .stage-member .avatar-figure { animation: fbc-defeat-pose calc(var(--cinema-time, 1000ms) * 1.06) ease both; }
.arena[data-cinema-event="technique"] #action-callout { border-left-color: #cfb4ef; background: linear-gradient(115deg,#30263ceF,#142b32ec); }
.cinema-event-caption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 5px; padding-top: 8px; border-top: 1px solid #839eab42; color: #b7cbd1; font-size: 10px; line-height: 1.65; animation: fbc-caption .22s ease-out both; }
.cinema-event-caption>b { flex-shrink: 0; border: 1px solid #9dc2b04d; border-radius: 5px; padding: 2px 6px; color: #cbdbc5; background: #26352c7d; font-size: 8px; letter-spacing: .6px; font-weight: 700; }
.cinema-event-caption>span { min-width: 0; overflow-wrap: anywhere; }
.cinema-event-caption.is-technique>b { color: #e6d1fb; border-color: #b99ada85; background: #67517a43; }
.cinema-event-caption.is-fate-link>b { color: #e8edbd; border-color: #cadb9b8f; background: #56754843; }
.arena[data-cinema-event="fate-link"] #action-callout { border-left-color: #deecb2; background: linear-gradient(115deg,#354535ef,#142c32ed); }
.cinema-at.cinema-fate-link-seal .cinema-drawing { animation-name: fbc-training-seal; }
.cinema-at.cinema-fate-link-guard .cinema-drawing { animation-name: fbc-ward; }
.cinema-event-caption.is-guardian>b { color: #f0d6b3; border-color: #dab78075; background: #7951353d; }
.arena[data-cinema-event="guardian"] #action-callout { border-left-color: var(--cinema-accent,#e9c792); background: linear-gradient(115deg,#3f3428ec,#162a33ec); }
.arena[data-cinema-paused="true"] *,
.arena[data-cinema-paused="true"] *::before,
.arena[data-cinema-paused="true"] *::after,
.arena[data-cinema-paused="true"]::before { animation-play-state: paused !important; }

@keyframes fbc-emerge { 0% { opacity: 0; transform: scale(.48) rotate(var(--cinema-turn, 0deg)); } 24% { opacity: .79; transform: scale(.94) rotate(var(--cinema-turn, 0deg)); } 66% { opacity: .58; } 100% { opacity: 0; transform: scale(1.14) rotate(var(--cinema-turn, 0deg)); } }
@keyframes fbc-focus { 0% { opacity: 0; transform: scale(1.14) rotate(-12deg); } 35% { opacity: .54; transform: scale(.86) rotate(0); } 69% { opacity: .38; } 100% { opacity: 0; transform: scale(1.12) rotate(9deg); } }
@keyframes fbc-rune { 0% { opacity: 0; transform: scale(.56) rotate(calc(var(--cinema-turn, 0deg) - 24deg)); } 28% { opacity: .82; transform: scale(.95) rotate(var(--cinema-turn, 0deg)); } 69% { opacity: .53; } 100% { opacity: 0; transform: scale(1.14) rotate(calc(var(--cinema-turn, 0deg) + 24deg)); } }
@keyframes fbc-cut { 0% { opacity: 0; transform: scale(.4) rotate(calc(var(--cinema-turn, 0deg) - 43deg)); } 20% { opacity: .92; transform: scale(.93) rotate(var(--cinema-turn, 0deg)); } 53% { opacity: .79; transform: scale(1.1) rotate(calc(var(--cinema-turn, 0deg) + 43deg)); } 100% { opacity: 0; transform: scale(1.17) rotate(calc(var(--cinema-turn, 0deg) + 75deg)); } }
@keyframes fbc-ward { 0% { opacity: 0; transform: translateY(11px) scale(.77); } 30% { opacity: .79; transform: translateY(0) scale(1); } 74% { opacity: .51; } 100% { opacity: 0; transform: translateY(-3px) scale(1.04); } }
@keyframes fbc-impact { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .8; transform: scale(.89); } 55% { opacity: .44; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes fbc-shockwave { 0% { opacity: 0; transform: translateY(17px) scale(.25); } 26% { opacity: .7; } 100% { opacity: 0; transform: translateY(21px) scale(1.22); } }
@keyframes fbc-blessing { 0% { opacity: 0; transform: translateY(17px) scale(.65) rotate(-13deg); } 32% { opacity: .92; transform: translateY(0) scale(1) rotate(0); } 71% { opacity: .65; } 100% { opacity: 0; transform: translateY(-21px) scale(.71) rotate(13deg); } }
@keyframes fbc-aura { 0% { opacity: 0; transform: translateY(12px) scale(.65); } 36% { opacity: .42; transform: translateY(0) scale(1); } 75% { opacity: .24; } 100% { opacity: 0; transform: translateY(-9px) scale(1.14); } }
@keyframes fbc-sunrise { 0% { opacity: 0; transform: translateY(18px) scale(.65); } 32% { opacity: .72; transform: translateY(0) scale(.94); } 76% { opacity: .54; } 100% { opacity: 0; transform: translateY(-8px) scale(1.06); } }
@keyframes fbc-threat { 0% { opacity: 0; transform: scale(1.25); } 45% { opacity: .62; transform: scale(.93); } 76% { opacity: .62; } 100% { opacity: 0; transform: scale(.84); } }
@keyframes fbc-thread { 0% { opacity: 0; transform: scale(.65) rotate(-12deg); } 30% { opacity: .6; transform: scale(.95) rotate(0); } 75% { opacity: .38; } 100% { opacity: 0; transform: scale(1.1) rotate(13deg); } }
@keyframes fbc-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 22% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--cinema-drift-x, 24px), var(--cinema-drift-y, -30px)) scale(.4) rotate(45deg); } }
@keyframes fbc-falling { 0% { opacity: 0; transform: translateY(-8px) scale(.8); } 25% { opacity: .48; } 100% { opacity: 0; transform: translateY(38px) scale(.35); } }
@keyframes fbc-flight { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 13%, 78% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--cinema-dx), var(--cinema-dy), 0); } }
@keyframes fbc-link { 0% { opacity: 0; transform: rotate(var(--cinema-angle)) scaleX(0); } 32% { opacity: .32; transform: rotate(var(--cinema-angle)) scaleX(1); } 66% { opacity: .25; } 100% { opacity: 0; transform: rotate(var(--cinema-angle)) scaleX(1); } }
@keyframes fbc-member-strike { 0%, 100% { transform: translateX(0) rotate(0); } 22% { transform: translateX(-5px) rotate(-3deg); } 47% { transform: translateX(14px) rotate(6deg); } 65% { transform: translateX(8px) rotate(3deg); } }
@keyframes fbc-weapon-strike { 0%, 100% { transform: rotate(0); } 26% { transform: rotate(-24deg); } 50% { transform: rotate(29deg); } 69% { transform: rotate(13deg); } }
@keyframes fbc-riven-strike { 0%, 100% { transform: translateX(0) rotate(0); } 19% { transform: translateX(-5px) rotate(-4deg); } 38% { transform: translateX(15px) rotate(7deg); } 53% { transform: translateX(8px) rotate(-2deg); } 67% { transform: translateX(17px) rotate(6deg); } 84% { transform: translateX(4px) rotate(1deg); } }
@keyframes fbc-bram-strike { 0%, 100% { transform: translateX(0) scaleY(1); } 23% { transform: translateX(-3px) scaleY(.96); } 44% { transform: translateX(11px) scaleY(1.02); } 72% { transform: translateX(4px) scaleY(1); } }
@keyframes fbc-archer-strike { 0%, 100% { transform: translateX(0) rotate(0); } 29% { transform: translateX(-4px) rotate(-2deg); } 46% { transform: translateX(5px) rotate(1deg); } 66% { transform: translateX(-1px) rotate(0); } }
@keyframes fbc-bow-strike { 0%, 100% { transform: translateX(0) scaleX(1); } 30% { transform: translateX(-3px) scaleX(.84); } 48% { transform: translateX(4px) scaleX(1.07); } 65% { transform: translateX(0) scaleX(.98); } }
@keyframes fbc-caster-strike { 0%, 100% { transform: translateY(0); } 28% { transform: translateY(-5px); } 64% { transform: translateY(-3px); } }
@keyframes fbc-caster-weapon { 0%, 100% { transform: rotate(0); } 28% { transform: rotate(-9deg) translateY(-3px); } 56% { transform: rotate(10deg) translateY(-2px); } }
@keyframes fbc-enemy-impact { 0%, 33%, 100% { transform: translateX(0) rotate(0); } 49% { transform: translateX(9px) rotate(4deg); } 67% { transform: translateX(2px) rotate(1deg); } 80% { transform: translateX(-1px) rotate(0); } }
@keyframes fbc-enemy-strike { 0%, 100% { transform: translateX(0) rotate(0); } 28% { transform: translateX(9px) rotate(3deg); } 51% { transform: translateX(-18px) rotate(-5deg); } 75% { transform: translateX(-5px) rotate(-1deg); } }
@keyframes fbc-party-impact { 0%, 39%, 100% { transform: translateX(0) rotate(0); } 56% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(-1px) rotate(-1deg); } }
@keyframes fbc-heal-pose { 0%, 100% { transform: translateY(0); } 42% { transform: translateY(-4px); } 73% { transform: translateY(-2px); } }
@keyframes fbc-victory-pose { 0%, 100% { transform: translateY(0) rotate(0); } 24% { transform: translateY(-5px) rotate(-1deg); } 52% { transform: translateY(-2px) rotate(1deg); } }
@keyframes fbc-defeat-pose { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(4px) rotate(-2deg); opacity: .76; } }
@keyframes fbc-training-seal { 0% { opacity: 0; transform: scale(.58) rotate(-22deg); } 30% { opacity: .86; transform: scale(1) rotate(0); } 62% { opacity: .56; transform: scale(.92) rotate(12deg); } 100% { opacity: 0; transform: scale(1.12) rotate(22deg); } }
@keyframes fbc-caption { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes fbc-guardian-aura { 0% { opacity: 0; transform: scale(.7) rotate(-10deg); } 36% { opacity: .5; transform: scale(.98) rotate(0); } 72% { opacity: .3; } 100% { opacity: 0; transform: scale(1.18) rotate(13deg); } }
@keyframes fbc-guardian-seal { 0% { opacity: 0; transform: translateY(7px) scale(.86); } 32% { opacity: .76; transform: translateY(0) scale(1); } 67% { opacity: .55; } 100% { opacity: 0; transform: translateY(-5px) scale(1.09); } }
@keyframes fbc-earned-medallion { 0% { opacity: 0; transform: translateY(10px) scale(.68); } 30% { opacity: .93; transform: translateY(0) scale(1.04); } 65% { opacity: .88; transform: translateY(-3px) scale(1); } 100% { opacity: 0; transform: translateY(-16px) scale(.96); } }

/* Quiet mode preserves the event's shape and color without travel or pulsing. */
.arena[data-cinema-motion="quiet"] .cinema-quiet .cinema-drawing { animation: none; opacity: .53; transform: none; }
.arena[data-cinema-motion="quiet"] .cinema-at.cinema-ward .cinema-drawing { opacity: .33; }
.arena[data-cinema-motion="quiet"] .cinema-at.cinema-blessing .cinema-drawing { opacity: .72; }
.arena[data-cinema-motion="quiet"] :is(.cinema-flight, .cinema-link) { display: none; }
.arena[data-cinema-motion="quiet"] :is(.avatar-figure, .avatar-weapon, .battle-number),
.arena[data-cinema-motion="quiet"] #enemy-art img { animation: none !important; }
.arena[data-cinema-motion="quiet"] .battle-number { opacity: 1; transform: translate(-50%, -20px); }
.arena[data-cinema-motion="quiet"] .cinema-event-caption { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .arena[data-cinema-active="true"] :is(.cinema-flight, .cinema-link) { display: none; }
  .arena[data-cinema-active="true"] .cinema-drawing { animation: none !important; }
  .arena[data-cinema-active="true"] :is(.avatar-figure, .avatar-weapon, .battle-number),
  .arena[data-cinema-active="true"] #enemy-art img { animation: none !important; }
  .cinema-event-caption { animation: none !important; }
}
html[data-motion="reduced"] .arena[data-cinema-active="true"] :is(.cinema-flight, .cinema-link) { display: none; }
html[data-motion="reduced"] .arena[data-cinema-active="true"] .cinema-drawing { animation: none !important; }
html[data-motion="reduced"] .arena[data-cinema-active="true"] :is(.avatar-figure, .avatar-weapon, .battle-number),
html[data-motion="reduced"] .arena[data-cinema-active="true"] #enemy-art img { animation: none !important; }
html[data-motion="reduced"] .cinema-event-caption { animation: none !important; }