.leader-cut-in {
  position: relative;
  height: min(68dvh, 580px);
  min-width: 0;
  isolation: isolate;
  --entry-x: -54vw;
  --entry-y: 30vh;
  --entry-angle: -17deg;
  --strike-x: -36%;
  --strike-y: -8%;
  --roll: -9deg;
}
.skill-gem .leader-cut-in { --entry-x: -20vw; --entry-y: -64vh; --entry-angle: 21deg; --strike-y: -24%; --roll: 13deg; }
.skill-cla .leader-cut-in { --entry-x: 36vw; --entry-y: 44vh; --entry-angle: 14deg; --strike-x: -24%; --strike-y: -11%; }
.skill-gro .leader-cut-in { --entry-x: -65vw; --entry-y: -28vh; --entry-angle: -27deg; --strike-x: -44%; --roll: -21deg; }
.skill-dep .leader-cut-in { --entry-x: -27vw; --entry-y: 61vh; --entry-angle: 12deg; --strike-y: -27%; --roll: 6deg; }
.cut-actor {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 50%;
  width: 135%;
  height: 100%;
  object-fit: contain;
  translate: -50% 0;
  filter: drop-shadow(0 14px 18px #060813a8) drop-shadow(0 0 18px color-mix(in srgb,var(--skill-accent) 48%,transparent));
}
.cut-slash {
  position: absolute;
  z-index: 0;
  inset: 14% -16% 13%;
  transform: skewY(-12deg);
  background: linear-gradient(120deg, transparent, color-mix(in srgb,var(--skill-accent) 33%,#131127), #111225a8);
  border-block: 2px solid color-mix(in srgb,var(--skill-accent) 72%,transparent);
}
.cut-orbit {
  position: absolute;
  inset: 15%;
  border: 2px solid var(--skill-accent);
  border-radius: 50%;
  opacity: .42;
  box-shadow: 0 0 35px color-mix(in srgb,var(--skill-accent) 40%,transparent);
}
.skill-gpt .cut-orbit { border-style: dashed; }
.skill-gem .cut-orbit { border-radius: 18%; rotate: 45deg; }
.skill-cla .cut-orbit { border-radius: 10%; rotate: -17deg; border-style: double; border-width: 5px; }
.skill-gro .cut-orbit { border-width: 8px; border-right-color: transparent; }
.skill-dep .cut-orbit { inset: 20% 5%; transform: rotateX(43deg); }
.cut-sparks { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.cut-sparks i {
  position: absolute;
  left: 50%;
  top: 58%;
  color: var(--skill-accent);
  font: 700 clamp(12px,3dvh,28px) system-ui;
  text-shadow: 0 0 12px currentColor;
  opacity: 0;
  animation: cut-scatter .95s calc(.34s + var(--delay)) ease-out both;
}
.cut-entry .cut-slash { animation: cut-band .68s ease-out both; }
.cut-skill .cut-actor { animation: cut-strike 1.6s cubic-bezier(.21,.72,.3,1) both; }
.cut-skill .cut-orbit { animation: cut-seal 1.55s ease-out both; }
.cut-victory .cut-actor { animation: cut-rise 1.5s cubic-bezier(.18,.75,.32,1) both; }
.cut-victory .cut-orbit { animation: cut-seal 1.9s ease-out both; }
.cut-victory .cut-sparks i { animation-duration: 1.7s; }
.cut-defeat .cut-actor { animation: cut-withdraw 1.9s ease-in-out both; }
.cut-defeat .cut-slash { opacity: .42; }
.cut-defeat .cut-sparks,.cut-draw .cut-sparks { display: none; }
@keyframes cut-band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cut-strike {
  0% { opacity: 0; transform: translate(32%,9%) scale(.82); }
  23% { opacity: 1; transform: translate(13%,5%) scale(.97); }
  42% { transform: translate(var(--strike-x),var(--strike-y)) scale(1.32) rotate(var(--roll)); }
  72% { transform: translate(-5%,0) scale(1.06); }
  100% { transform: none; }
}
@keyframes cut-rise {
  0% { opacity: 0; transform: translateY(48%) scale(.82); }
  45% { opacity: 1; transform: translateY(-10%) scale(1.1); }
  100% { transform: translateY(-3%) scale(1.03); }
}
@keyframes cut-withdraw {
  0% { transform: translateX(-5%) scale(1.08); filter: brightness(1.17); }
  16% { transform: translate(6%,3%) rotate(3deg); }
  30% { transform: translate(-2%,1%) rotate(-1deg); }
  100% { transform: translate(10%,14%) scale(.87); filter: saturate(.48) brightness(.69); }
}
@keyframes cut-seal { from { scale: .38; opacity: .95; } 75% { opacity: .25; } to { scale: 1.52; opacity: 0; } }
@keyframes cut-scatter {
  from { opacity: .93; transform: rotate(var(--ray)) translateX(1dvh) scale(.2); }
  to { opacity: 0; transform: rotate(var(--ray)) translateX(28dvh) scale(1.2); }
}
/* A light 2D puppet-style entrance: a close framing opens into the hero reveal. */
.cut-entry .cut-actor {
  transform-origin: 50% 67%;
  animation: portrait-arrive 1.65s cubic-bezier(.22,.76,.26,1) both,
             portrait-breathe 2s 1.65s ease-in-out infinite;
}
.cut-entry .cut-orbit { animation: portrait-aura 2.6s ease-in-out infinite alternate; }
.portrait-sigil {
 position: absolute;
 inset: 12% 0 0;
 width: 100%;
 height: 72%;
 fill: none;
 stroke: var(--skill-accent);
 stroke-width: 2;
 opacity: .34;
 animation: portrait-aura 2.6s ease-in-out infinite alternate-reverse;
}
.phase-entry .phase-opponent,
.phase-entry .initiative-reveal,
.phase-entry .phase-copy small { animation: opening-initiative .3s 1.65s both; }
.phase-still .phase-opponent,.phase-still .initiative-reveal,.phase-still .phase-copy small { animation: none; }
.skill-gpt { --portrait-lean: 2deg; --portrait-shift: -7%; }
.skill-gem { --portrait-lean: -4deg; --portrait-shift: 5%; }
.skill-cla { --portrait-lean: -2deg; --portrait-shift: 8%; }
.skill-gro { --portrait-lean: 5deg; --portrait-shift: -10%; }
.skill-dep { --portrait-lean: 3deg; --portrait-shift: -4%; }
@keyframes portrait-arrive {
  0% { opacity: 0; transform: translate(var(--portrait-shift),8%) rotate(var(--portrait-lean)) scale(1.25); }
  28%, 44% { opacity: 1; transform: translate(var(--portrait-shift),5%) rotate(var(--portrait-lean)) scale(1.19); }
  78% { transform: translateY(-2%) scale(1.025); }
  100% { opacity: 1; transform: none; }
}
@keyframes portrait-breathe {
  0%, 100% { transform: none; }
  50% { transform: translateY(-1.8%) rotate(calc(var(--portrait-lean) * .28)) scale(1.015,1.03); }
}
@keyframes portrait-aura { to { scale: 1.14; opacity: .72; } }
@keyframes opening-initiative { from { opacity: 0; } to { opacity: 1; } }
.hand-magic {
 position: absolute;
 top: 6px;
 right: 6px;
 z-index: 2;
 padding: 2px 5px;
 border-radius: 8px;
 background: #302456;
 color: #fff1ae;
 font-size: 11px;
 pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
 .phase-entry .phase-opponent,.phase-entry .initiative-reveal,.phase-entry .phase-copy small { animation: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .leader-cut-in { height: 78dvh; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .leader-cut-in { height: 35dvh; }
  .leader-cinematic-inner .leader-cut-in { grid-row: 1; }
  .cut-actor { width: 118%; }
}
.phase-still .leader-cut-in *, .skill-still .leader-cut-in * { animation: none !important; }

.skill-qwen { --portrait-lean: -3deg; --portrait-shift: 6%; }
.skill-qwen .cut-orbit { border-style: double; border-width: 5px; }

/* Keep the first illustration underneath the second during the dissolve. */
.leader-cinematic { --skill-reveal-time: 1.27s; }
.leader-cinematic:has(.skill-prelude) { animation:none; background:#080e1a; }
.leader-cinematic:has(.skill-prelude)::before { display:none; }
.skill-prelude { position:absolute; inset:0; z-index:3; pointer-events:none; }
.skill-beat {
  position:absolute;
  inset:0;
  overflow:hidden;
  visibility:hidden;
  background:#080d18;
}
.skill-beat img { display:block; width:100%; height:100%; object-fit:cover; }
.skill-beat, .skill-beat img { will-change:opacity, transform; }
.skill-charge { animation:skill-first-shot .96s step-end both; }
.skill-release { animation:skill-second-shot .92s .69s linear both; }
.skill-charge img { animation:skill-shot-approach .94s cubic-bezier(.22,.7,.28,1) both; }
.skill-release img { animation:skill-shot-approach .92s .69s cubic-bezier(.22,.7,.28,1) both; }
.skill-charge svg {
  position:absolute;
  inset:0;
  margin:auto;
  width:min(68vw, 64dvh);
  height:min(68vw, 64dvh);
  fill:none;
  stroke:var(--skill-accent);
  stroke-width:4;
  animation:skill-charge-trace .8s ease-out both;
}
.skill-impact {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 20%, color-mix(in srgb,var(--skill-accent) 55%, transparent) 43%, transparent 68%);
  animation:skill-impact-wave .57s .82s ease-out both;
}
.skill-prelude + .leader-cinematic-inner {
  animation:skill-leader-reveal .32s var(--skill-reveal-time) ease-out both;
}
.skill-prelude + .leader-cinematic-inner :is(.cut-actor, .cut-orbit, .skill-motif svg, .skill-copy h2) {
  animation-delay:var(--skill-reveal-time);
}
.skill-prelude + .leader-cinematic-inner .skill-copy h2 { animation-name:skill-name-arrival; }
.skill-prelude + .leader-cinematic-inner .cut-sparks i {
  animation-delay:calc(var(--skill-reveal-time) + .34s + var(--delay));
}
.leader-cinematic.skill-preparing:has(.skill-prelude) { background:#050a136e; }
.skill-preparing :is(.skill-prelude,.leader-cinematic-inner,.cinema-sweep) { opacity:0 !important; }
.skill-preparing :is(.skill-prelude,.leader-cinematic-inner,.cinema-sweep),
.skill-preparing :is(.skill-prelude,.leader-cinematic-inner) * { animation-play-state:paused !important; }
@keyframes skill-first-shot {
  0% { visibility:visible; }
  100% { visibility:hidden; }
}
@keyframes skill-second-shot {
  0% { visibility:hidden; opacity:0; }
  20%, 68% { visibility:visible; opacity:1; }
  100% { visibility:hidden; opacity:0; }
}
@keyframes skill-shot-approach { from { transform:scale(1.01); } to { transform:scale(1.055); } }
@keyframes skill-charge-trace {
  0% { opacity:0; transform:scale(.92); }
  60% { opacity:.72; }
  100% { opacity:.3; transform:scale(1.02); }
}
@keyframes skill-impact-wave {
  from { opacity:.65; transform:scale(.55); }
  to { opacity:0; transform:scale(1.6); }
}
@keyframes skill-leader-reveal {
  from { visibility:hidden; opacity:0; }
  to { visibility:visible; opacity:1; }
}
@keyframes skill-name-arrival {
  from { opacity:0; transform:translateX(-26px); }
  to { opacity:1; transform:translateX(0); }
}
@media (pointer:coarse) {
  .skill-prelude + .leader-cinematic-inner .cut-actor { filter:none; }
  .skill-prelude + .leader-cinematic-inner .skill-orbit { display:none; }
  .skill-prelude + .leader-cinematic-inner .cut-sparks i:nth-child(n+7) { display:none; }
}
@media (orientation:portrait) { .skill-beat img { object-fit:contain; } }
@media (prefers-reduced-motion:reduce) { .skill-prelude { display:none; } }