/* Six Crowns Chronicle v5.55 commander attack motions */
.commander-attack-motion{--motion-accent:#e8c66a;position:fixed;inset:0;z-index:50000;overflow:hidden;pointer-events:auto;isolation:isolate;color:#fff;font-family:inherit;opacity:0;transition:opacity .22s ease}
.commander-attack-motion.playing{opacity:1}
.commander-attack-motion.leaving{opacity:0}
.attack-motion-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,color-mix(in srgb,var(--motion-accent) 26%,transparent),transparent 43%),linear-gradient(112deg,rgba(2,6,16,.94),rgba(7,12,25,.88) 52%,rgba(2,4,11,.97));backdrop-filter:blur(2px)}
.commander-attack-motion.enemy .attack-motion-backdrop{background:radial-gradient(circle at 70% 50%,color-mix(in srgb,var(--motion-accent) 28%,transparent),transparent 43%),linear-gradient(248deg,rgba(2,6,16,.94),rgba(7,12,25,.88) 52%,rgba(2,4,11,.97))}
.attack-motion-speedlines{position:absolute;inset:-12%;opacity:.5;background:repeating-linear-gradient(112deg,transparent 0 18px,color-mix(in srgb,var(--motion-accent) 48%,transparent) 19px 21px,transparent 22px 46px);transform:translateX(-18%);animation:attackMotionLines .78s linear infinite}
.commander-attack-motion.enemy .attack-motion-speedlines{transform:scaleX(-1) translateX(-18%)}
.attack-motion-aura{position:absolute;width:min(72vw,900px);aspect-ratio:1;left:-12vw;top:50%;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--motion-accent) 28%,transparent),transparent 63%);filter:blur(18px);animation:attackMotionAura .72s ease-in-out infinite alternate}
.commander-attack-motion.enemy .attack-motion-aura{left:auto;right:-12vw}
.attack-motion-sprite-stage{position:absolute;left:2.5vw;top:50%;width:min(64vw,760px);height:min(88vh,720px);translate:-8% -50%;display:grid;place-items:center;transform-origin:center;animation:attackMotionEnter .36s cubic-bezier(.2,.9,.25,1) forwards}
.commander-attack-motion.enemy .attack-motion-sprite-stage{left:auto;right:2.5vw;transform:scaleX(-1);translate:8% -50%;animation-name:attackMotionEnterEnemy}
.attack-motion-sprite{width:min(62vw,720px);max-height:86vh;aspect-ratio:var(--frame-ratio,1);background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 14px 22px rgba(0,0,0,.76)) drop-shadow(0 0 22px color-mix(in srgb,var(--motion-accent) 65%,transparent));will-change:background-position,transform}
.commander-attack-motion.impact .attack-motion-sprite{animation:attackMotionImpact .2s ease-out}
.attack-motion-target{position:absolute;right:5.5vw;top:50%;translate:0 -50%;width:clamp(108px,15vw,210px);aspect-ratio:1;border-radius:50%;border:3px solid color-mix(in srgb,var(--motion-accent) 76%,white);background:#111827;box-shadow:0 0 0 8px rgba(255,255,255,.05),0 0 40px color-mix(in srgb,var(--motion-accent) 55%,transparent);overflow:visible}
.commander-attack-motion.enemy .attack-motion-target{right:auto;left:5.5vw}
.attack-motion-target img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%;filter:brightness(.88)}
.attack-motion-target i{position:absolute;inset:-35%;opacity:0;background:conic-gradient(from 20deg,transparent,var(--motion-accent),transparent 20%,var(--motion-accent),transparent 42%,var(--motion-accent),transparent 65%);mask:radial-gradient(circle,transparent 0 39%,#000 41% 44%,transparent 46%);animation:attackTargetRing .52s .28s ease-out forwards}
.commander-attack-motion.impact .attack-motion-target{animation:attackTargetHit .28s ease-out}
.attack-motion-caption{position:absolute;left:5vw;bottom:6vh;display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 10px #000;transform:skewX(-7deg)}
.commander-attack-motion.enemy .attack-motion-caption{left:auto;right:5vw;align-items:flex-end;transform:skewX(7deg)}
.attack-motion-caption small{font-size:clamp(10px,1vw,14px);letter-spacing:.25em;color:var(--motion-accent);font-weight:900}
.attack-motion-caption b{font-size:clamp(22px,4vw,54px);line-height:1;font-weight:950;letter-spacing:.03em}
.attack-motion-caption span{font-size:clamp(13px,1.8vw,24px);font-weight:800;color:#fff1c2;border-top:1px solid color-mix(in srgb,var(--motion-accent) 68%,transparent);padding-top:5px}
.attack-motion-impact{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 77% 50%,#fff 0 1%,var(--motion-accent) 2% 5%,transparent 23%)}
.commander-attack-motion.enemy .attack-motion-impact{background:radial-gradient(circle at 23% 50%,#fff 0 1%,var(--motion-accent) 2% 5%,transparent 23%)}
.commander-attack-motion.impact .attack-motion-impact{animation:attackMotionFlash .28s ease-out}
.commander-attack-motion.critical .attack-motion-impact{filter:brightness(1.45)}
.commander-attack-motion.true-dragon .attack-motion-backdrop{background:radial-gradient(circle at 30% 50%,rgba(255,37,72,.38),transparent 46%),linear-gradient(112deg,rgba(22,0,8,.97),rgba(15,3,15,.92) 52%,rgba(3,1,8,.98))}
.commander-attack-motion.true-dragon .attack-motion-caption b{color:#fff0f3;text-shadow:0 0 15px #ff1f4c,0 2px 10px #000}
.attack-motion-generic-art{position:absolute;left:7vw;top:3vh;width:min(57vw,680px);height:92vh;display:flex;align-items:flex-end;justify-content:center;transform:translateX(-12%) scale(.93);opacity:0;animation:attackGenericEnter .32s ease-out forwards}
.commander-attack-motion.enemy .attack-motion-generic-art{left:auto;right:7vw;transform:translateX(12%) scaleX(-1) scale(.93);animation-name:attackGenericEnterEnemy}
.attack-motion-generic-art img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.75)) drop-shadow(0 0 24px color-mix(in srgb,var(--motion-accent) 58%,transparent))}
.commander-attack-motion.generic .attack-motion-impact{opacity:1;animation:attackGenericSlash .6s ease-out forwards}
@keyframes attackMotionLines{to{background-position:170px 0}}
@keyframes attackMotionAura{to{transform:scale(1.12);opacity:.75}}
@keyframes attackMotionEnter{to{translate:0 -50%}}
@keyframes attackMotionEnterEnemy{to{translate:0 -50%}}
@keyframes attackMotionImpact{0%{transform:translateX(0) scale(1)}45%{transform:translateX(2.4%) scale(1.04)}100%{transform:translateX(0) scale(1)}}
@keyframes attackTargetRing{0%{opacity:0;transform:rotate(-70deg) scale(.45)}55%{opacity:1}100%{opacity:0;transform:rotate(75deg) scale(1.08)}}
@keyframes attackTargetHit{0%,100%{transform:translateX(0)}30%{transform:translateX(12px) rotate(2deg)}60%{transform:translateX(-7px) rotate(-2deg)}}
@keyframes attackMotionFlash{0%{opacity:0;transform:scale(.7)}35%{opacity:.92}100%{opacity:0;transform:scale(1.35)}}
@keyframes attackGenericEnter{to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes attackGenericEnterEnemy{to{opacity:1;transform:translateX(0) scaleX(-1) scale(1)}}
@keyframes attackGenericSlash{0%,25%{opacity:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}45%{opacity:.95;clip-path:polygon(0 0,90% 0,67% 100%,0 100%)}100%{opacity:0;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}}
@media(max-width:760px){
  .attack-motion-sprite-stage{left:-4vw;width:78vw;height:74vh}.commander-attack-motion.enemy .attack-motion-sprite-stage{right:-4vw}
  .attack-motion-sprite{width:76vw}
  .attack-motion-target{width:25vw;right:3vw}.commander-attack-motion.enemy .attack-motion-target{left:3vw}
  .attack-motion-caption{left:4vw;bottom:4vh;max-width:75vw}.commander-attack-motion.enemy .attack-motion-caption{right:4vw}
  .attack-motion-generic-art{left:-2vw;width:74vw;height:84vh}.commander-attack-motion.enemy .attack-motion-generic-art{right:-2vw}
}
@media(prefers-reduced-motion:reduce){.attack-motion-speedlines,.attack-motion-aura,.attack-motion-target i{animation:none!important}.commander-attack-motion,.attack-motion-sprite-stage,.attack-motion-generic-art{transition:none!important;animation-duration:.01ms!important}}

/* v5.55: transparent sprite sheets must blend directly into the battle backdrop. */
.attack-motion-sprite{background-color:transparent!important}
.attack-motion-sprite-stage{background:transparent!important}