/*
 * Code-animated SVG Skanimals, drawn inline (the battle and the admin review). Each drawing names its parts with
 * sk-part-* classes and gives each movable part its pivot as transform-origin in canvas pixels; transform-box: view-box
 * makes those pixels count from the canvas corner. Paired parts (two ears, two wings...) move in mirror: the second of
 * each is flipped. Drawings shown through img tags carry a copy of the idle section, see SkanimalSvg.IdleCss.
 */

.sk-creature {
    position: relative;
    display: grid;
    place-items: center;
}

.sk-creature svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sk-creature g[class^="sk-part-"] {
    transform-box: view-box;
}

.sk-creature .sk-part-body {
    transform-origin: 128px 232px;
}

/* Idle: breathing, blinking, a wagging tail, twitching ears, flapping wings */

.sk-creature.is-alive .sk-part-body { animation: skc-breathe 2.6s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-head { animation: skc-tilt 5s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-eye { animation: skc-blink 4.2s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-eye ~ .sk-part-eye { animation-delay: 0.04s; }
.sk-creature.is-alive .sk-part-tail { animation: skc-wag 1.3s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-ear { animation: skc-twitch 3.4s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-ear ~ .sk-part-ear { animation-name: skc-twitch-flip; animation-delay: 0.3s; }
.sk-creature.is-alive .sk-part-antenna { animation: skc-wobble 1.6s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-wing { animation: skc-flap 0.9s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-wing ~ .sk-part-wing { animation-name: skc-flap-flip; }
.sk-creature.is-alive .sk-part-fin { animation: skc-wobble 1.1s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-arm { animation: skc-swing 2.2s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-arm ~ .sk-part-arm { animation-name: skc-swing-flip; }
.sk-creature.is-alive .sk-part-glow { animation: skc-glow 1.8s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-horn { animation: skc-horn 3s ease-in-out infinite; }

/* Reactions, triggered from code by a class on the wrapper */

.sk-creature.is-attack .sk-part-body { animation: skc-lunge 0.6s var(--sc-ease-out) both; }
.sk-creature.is-attack .sk-part-mouth { animation: skc-roar 0.6s ease-out both; }
.sk-creature.is-attack .sk-part-arm,
.sk-creature.is-attack .sk-part-wing { animation: skc-strike 0.6s ease-out both; }
.sk-creature.is-attack .sk-part-arm ~ .sk-part-arm,
.sk-creature.is-attack .sk-part-wing ~ .sk-part-wing { animation-name: skc-strike-flip; }

.sk-creature.is-happy svg { animation: skc-hop 0.5s ease-in-out 2 both; }
.sk-creature.is-happy .sk-part-ear,
.sk-creature.is-happy .sk-part-tail { animation: skc-wag 0.25s ease-in-out 4; }
.sk-creature.is-happy .sk-part-eye { animation: skc-squint 1s ease-in-out both; }

.sk-creature.is-hurt svg { animation: skc-shake 0.5s ease-in-out both; filter: drop-shadow(0 0 0 #ff4d6d); }
.sk-creature.is-hurt .sk-part-eye { animation: skc-squint 0.6s ease-in-out both; }
.sk-creature.is-hurt .sk-part-body { animation: skc-squash 0.5s ease-out both; }

@keyframes skc-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.035); } }
@keyframes skc-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes skc-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
@keyframes skc-wag { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes skc-twitch { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-14deg); } 82% { transform: rotate(4deg); } }
@keyframes skc-twitch-flip { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-4deg); } }
@keyframes skc-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes skc-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes skc-flap-flip { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(22deg); } }
@keyframes skc-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes skc-swing-flip { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes skc-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes skc-horn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }

@keyframes skc-lunge {
    0% { transform: translate(0, 0); }
    35% { transform: translate(-10px, 6px) scale(1.04, 0.94); }
    60% { transform: translate(22px, -10px) scale(0.96, 1.06); }
    100% { transform: translate(0, 0); }
}

@keyframes skc-roar { 0%, 100% { transform: scale(1); } 45%, 70% { transform: scale(1.3, 2.2); } }
@keyframes skc-strike { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-40deg); } }
@keyframes skc-strike-flip { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(40deg); } }
@keyframes skc-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes skc-squint { 0%, 100% { transform: scaleY(1); } 20%, 80% { transform: scaleY(0.35); } }
@keyframes skc-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes skc-squash { 0% { transform: scale(1); } 30% { transform: scale(1.08, 0.88); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .sk-creature *, .sk-creature svg { animation: none !important; }
}

/*
 * Per-creature styles. The drawing declares data-idle and data-attack on its root svg (see SkanimalPromptLibrary);
 * the whole creature moves, plus an accent on the parts that suit the move. --dir is 1 when the opponent is to the
 * right and -1 when it's to the left (the opponent's side in battle).
 */

.sk-creature { --dir: 1; }
.bf-fighter-opp .sk-creature { --dir: -1; }
.sk-creature svg[data-idle],
.sk-creature svg[data-attack] { transform-origin: 50% 92%; }

/* New parts at idle */
.sk-creature.is-alive .sk-part-tentacle { animation: skc-wobble 1.8s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-tentacle ~ .sk-part-tentacle { animation-delay: -0.6s; }
.sk-creature.is-alive .sk-part-crest { animation: skc-wobble 2.6s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-claw { animation: skc-swing 2.4s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-claw ~ .sk-part-claw { animation-name: skc-swing-flip; }
.sk-creature.is-alive .sk-part-jaw { animation: skc-chew 3.2s ease-in-out infinite; }
.sk-creature.is-alive .sk-part-stinger { animation: skc-wobble 1.4s ease-in-out infinite; }

/* Idle styles */
.sk-creature.is-alive svg[data-idle="bob"] { animation: skc-i-bob 2.4s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="hover"] { animation: skc-i-hover 3.2s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="sway"] { animation: skc-i-sway 3s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="slither"] { animation: skc-i-slither 2.2s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="bounce"] { animation: skc-i-bounce 1.1s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="pulse"] { animation: skc-i-pulse 2s ease-in-out infinite; }
.sk-creature.is-alive svg[data-idle="prowl"] { animation: skc-i-prowl 4s ease-in-out infinite; }

/* Attack styles: these replace the generic lunge */
.sk-creature.is-attack svg[data-attack] .sk-part-body { animation: none; }
.sk-creature.is-attack svg[data-attack="charge"] { animation: skc-a-charge 0.6s var(--sc-ease-out) both; }
.sk-creature.is-attack svg[data-attack="pounce"] { animation: skc-a-pounce 0.65s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="spin"] { animation: skc-a-spin 0.6s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="tail-whip"] { animation: skc-a-whip 0.6s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="tail-whip"] .sk-part-tail { animation: skc-a-lash 0.6s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="slam"] { animation: skc-a-slam 0.65s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
.sk-creature.is-attack svg[data-attack="sting"] { animation: skc-a-lean 0.55s ease-out both; }
.sk-creature.is-attack svg[data-attack="sting"] :is(.sk-part-stinger, .sk-part-horn, .sk-part-claw) { animation: skc-a-jab 0.55s ease-out both; }
.sk-creature.is-attack svg[data-attack="chomp"] { animation: skc-a-charge 0.6s ease-out both; }
.sk-creature.is-attack svg[data-attack="chomp"] :is(.sk-part-jaw, .sk-part-mouth) { animation: skc-a-bite 0.6s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="beam"] { animation: skc-a-brace 0.6s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="beam"] :is(.sk-part-glow, .sk-part-eye) { animation: skc-a-charge-up 0.6s ease-in both; }
.sk-creature.is-attack svg[data-attack="burrow"] { animation: skc-a-burrow 0.65s ease-in-out both; }
.sk-creature.is-attack svg[data-attack="flurry"] { animation: skc-a-jitter 0.6s steps(6) both; }
.sk-creature.is-attack svg[data-attack="flurry"] :is(.sk-part-arm, .sk-part-claw, .sk-part-tentacle) { animation: skc-a-flurry 0.15s ease-in-out 4 alternate both; }

@keyframes skc-chew { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(8deg); } }

@keyframes skc-i-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes skc-i-hover { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes skc-i-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes skc-i-slither { 0%, 100% { transform: skewX(-5deg); } 50% { transform: skewX(5deg); } }
@keyframes skc-i-bounce { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 45% { transform: translateY(-12px) scale(0.97, 1.04); } }
@keyframes skc-i-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes skc-i-prowl { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px) translateY(1px); } }

@keyframes skc-a-charge {
    0% { transform: translateX(0); }
    30% { transform: translateX(calc(var(--dir) * -10px)) rotate(calc(var(--dir) * -4deg)); }
    65% { transform: translateX(calc(var(--dir) * 36px)) rotate(calc(var(--dir) * 6deg)); }
    100% { transform: translateX(0); }
}

@keyframes skc-a-pounce {
    0% { transform: none; }
    30% { transform: scale(1.08, 0.82); }
    60% { transform: translate(calc(var(--dir) * 28px), -36px) rotate(calc(var(--dir) * 10deg)); }
    80% { transform: translate(calc(var(--dir) * 18px), 0) scale(1.06, 0.92); }
    100% { transform: none; }
}

@keyframes skc-a-spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(calc(var(--dir) * 360deg)) translateX(0); }
}

@keyframes skc-a-whip {
    0%, 100% { transform: scaleX(1); }
    35%, 65% { transform: scaleX(-1); }
}

@keyframes skc-a-lash { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-55deg); } }

@keyframes skc-a-slam {
    0% { transform: none; }
    45% { transform: translateY(-34px) scale(0.95, 1.08); }
    75% { transform: translateY(4px) scale(1.14, 0.82); }
    100% { transform: none; }
}

@keyframes skc-a-lean { 0%, 100% { transform: none; } 50% { transform: translateX(calc(var(--dir) * 12px)) rotate(calc(var(--dir) * 5deg)); } }
@keyframes skc-a-jab { 0%, 100% { transform: none; } 45% { transform: translate(calc(var(--dir) * 14px), -4px) scale(1.2); } }
@keyframes skc-a-bite { 0%, 100% { transform: rotate(0) scaleY(1); } 40% { transform: rotate(22deg) scaleY(1.6); } 60% { transform: rotate(-4deg) scaleY(0.8); } }
@keyframes skc-a-brace { 0%, 100% { transform: none; } 30%, 70% { transform: scale(0.94, 1.04) translateX(calc(var(--dir) * -6px)); } }
@keyframes skc-a-charge-up { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }

@keyframes skc-a-burrow {
    0% { transform: none; opacity: 1; }
    35% { transform: translateY(40px) scaleY(0.5); opacity: 0; }
    55% { transform: translate(calc(var(--dir) * 30px), 40px); opacity: 0; }
    75% { transform: translate(calc(var(--dir) * 18px), -26px); opacity: 1; }
    100% { transform: none; }
}

@keyframes skc-a-jitter { 0%, 100% { transform: none; } 50% { transform: translateX(calc(var(--dir) * 10px)); } }
@keyframes skc-a-flurry { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }