/* Event-driven effects for Clockwork Court. The resting artwork remains the normal PNG set. */
.ng-piece-motion {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    will-change: transform, left, top, filter, opacity;
    transform-origin: 50% 88%;
}
.ng-piece-motion > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ng-piece-motion.ng-action-walk > img { animation: ng-clockwork-walk 160ms linear infinite; }
.ng-piece-motion.ng-action-hop > img { animation: ng-clockwork-hop 320ms ease-in-out both; }
.ng-piece-motion.ng-action-roll > img { animation: ng-clockwork-roll 160ms linear infinite; }
.ng-piece-motion.ng-action-glide > img { animation: ng-clockwork-glide 220ms ease-in-out infinite alternate; }
.ng-piece-motion.ng-action-step > img { animation: ng-clockwork-step 180ms ease-in-out infinite; }
.ng-piece-motion.ng-is-capture > img { animation: ng-clockwork-strike 430ms cubic-bezier(.2,.8,.2,1) both; }

.ng-piece-impact {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffd166;
    box-shadow: 0 0 0 3px #7c4a12, 14px -8px 0 -2px #f6bd60, -13px -6px 0 -2px #fff0a8,
                11px 11px 0 -3px #d97706, -12px 12px 0 -3px #fbbf24;
    animation: ng-clockwork-impact 300ms ease-out both;
}
.ng-piece-captured { animation: ng-clockwork-captured 260ms ease-in both !important; }
.ng-piece-arrived { animation: ng-clockwork-arrive 220ms ease-out both; }
.ng-piece-arrived.ng-action-walk { animation: ng-clockwork-walk 150ms linear 2, ng-clockwork-arrive 300ms ease-out both; }
.ng-piece-arrived.ng-action-hop { animation: ng-clockwork-hop 320ms ease-in-out both; }
.ng-piece-arrived.ng-action-roll { animation: ng-clockwork-roll 150ms linear 2, ng-clockwork-arrive 300ms ease-out both; }
.ng-piece-arrived.ng-action-glide { animation: ng-clockwork-glide 150ms ease-in-out 2 alternate, ng-clockwork-arrive 300ms ease-out both; }
.ng-piece-arrived.ng-action-step { animation: ng-clockwork-step 150ms ease-in-out 2, ng-clockwork-arrive 300ms ease-out both; }
.ng-piece-arrived.ng-action-strike { animation: ng-clockwork-strike 430ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes ng-clockwork-walk { 0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-7%)} }
@keyframes ng-clockwork-hop { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-22%) rotate(-5deg)} 75%{transform:translateY(-8%) rotate(3deg)} }
@keyframes ng-clockwork-roll { 0%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-3%) rotate(1deg)} 100%{transform:translateY(0) rotate(-1deg)} }
@keyframes ng-clockwork-glide { from{transform:translateY(0);filter:drop-shadow(0 0 0 transparent)} to{transform:translateY(-5%);filter:drop-shadow(0 5px 5px rgba(73,156,255,.42))} }
@keyframes ng-clockwork-step { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.96) translateY(3%)} }
@keyframes ng-clockwork-strike { 0%{transform:translateX(0) rotate(0)} 34%{transform:translateX(-10%) rotate(-4deg)} 72%{transform:translateX(12%) rotate(5deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes ng-clockwork-impact { from{transform:scale(.2) rotate(0);opacity:1} to{transform:scale(2.5) rotate(90deg);opacity:0} }
@keyframes ng-clockwork-captured { to{transform:scale(.65) rotate(9deg);filter:grayscale(1) brightness(.5);opacity:0} }
@keyframes ng-clockwork-arrive { 0%{filter:brightness(1.8) drop-shadow(0 0 7px #ffd166);transform:scale(1.08)} 100%{filter:none;transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
    .ng-piece-motion > img, .ng-piece-impact, .ng-piece-captured, .ng-piece-arrived { animation: none !important; }
}