/* Cosmetics that react (SkanimalSprite's Reaction): the aura flares on an attack, flickers and dims on a hit, pulses
   brighter on a heal and keeps a bright pulse on the victory screen; worn hats and neckwear shake on a hit and hop on a
   heal with the creature. Each reaction has an -a and a -b copy (is-rp-a / is-rp-b) so the same reaction twice in a row
   replays. The aura's own spin and twinkle (store.css .cos-*) keep running inside, untouched. */

.sk-sprite-aura {
    transform-origin: 50% 55%;
}

/* ---------- Attack: the aura flares out and brightens ---------- */
.sk-sprite.is-react-attack.is-rp-a > .sk-sprite-aura { animation: cos-aura-flare-a 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sk-sprite.is-react-attack.is-rp-b > .sk-sprite-aura { animation: cos-aura-flare-b 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

@keyframes cos-aura-flare-a {
    0% { transform: scale(1.12); filter: none; }
    35% { transform: scale(1.42); filter: brightness(1.9) saturate(1.4) drop-shadow(0 0 10px currentColor); opacity: 1; }
    100% { transform: scale(1.12); filter: none; }
}

@keyframes cos-aura-flare-b {
    0% { transform: scale(1.12); filter: none; }
    35% { transform: scale(1.42); filter: brightness(1.9) saturate(1.4) drop-shadow(0 0 10px currentColor); opacity: 1; }
    100% { transform: scale(1.12); filter: none; }
}

/* ---------- Hurt: the aura flickers out and dims, tinged red; worn items shake with the creature ---------- */
.sk-sprite.is-react-hurt.is-rp-a > .sk-sprite-aura { animation: cos-aura-hurt-a 0.6s steps(1, end) both; }
.sk-sprite.is-react-hurt.is-rp-b > .sk-sprite-aura { animation: cos-aura-hurt-b 0.6s steps(1, end) both; }
.sk-sprite.is-react-hurt.is-rp-a > .sk-sprite-wear { animation: cos-wear-shake-a 0.5s ease-in-out both; }
.sk-sprite.is-react-hurt.is-rp-b > .sk-sprite-wear { animation: cos-wear-shake-b 0.5s ease-in-out both; }

@keyframes cos-aura-hurt-a {
    0% { opacity: 1; filter: none; }
    10% { opacity: 0.25; filter: grayscale(0.6) sepia(1) hue-rotate(-40deg) saturate(3); }
    22% { opacity: 0.85; }
    34% { opacity: 0.15; }
    48% { opacity: 0.7; }
    62% { opacity: 0.3; }
    80% { opacity: 0.6; filter: grayscale(0.4); }
    100% { opacity: 1; filter: none; }
}

@keyframes cos-aura-hurt-b {
    0% { opacity: 1; filter: none; }
    10% { opacity: 0.25; filter: grayscale(0.6) sepia(1) hue-rotate(-40deg) saturate(3); }
    22% { opacity: 0.85; }
    34% { opacity: 0.15; }
    48% { opacity: 0.7; }
    62% { opacity: 0.3; }
    80% { opacity: 0.6; filter: grayscale(0.4); }
    100% { opacity: 1; filter: none; }
}

@keyframes cos-wear-shake-a {
    0%, 100% { transform: none; }
    20% { transform: translateX(-4%) rotate(-6deg); }
    40% { transform: translateX(4%) rotate(5deg); }
    60% { transform: translateX(-3%) rotate(-3deg); }
    80% { transform: translateX(2%) rotate(2deg); }
}

@keyframes cos-wear-shake-b {
    0%, 100% { transform: none; }
    20% { transform: translateX(-4%) rotate(-6deg); }
    40% { transform: translateX(4%) rotate(5deg); }
    60% { transform: translateX(-3%) rotate(-3deg); }
    80% { transform: translateX(2%) rotate(2deg); }
}

/* ---------- Happy: the aura pulses brighter twice; worn items hop ---------- */
.sk-sprite.is-react-happy.is-rp-a > .sk-sprite-aura { animation: cos-aura-happy-a 0.5s ease-in-out 2 both; }
.sk-sprite.is-react-happy.is-rp-b > .sk-sprite-aura { animation: cos-aura-happy-b 0.5s ease-in-out 2 both; }
.sk-sprite.is-react-happy.is-rp-a > .sk-sprite-wear { animation: cos-wear-hop-a 0.5s ease-in-out 2 both; }
.sk-sprite.is-react-happy.is-rp-b > .sk-sprite-wear { animation: cos-wear-hop-b 0.5s ease-in-out 2 both; }

@keyframes cos-aura-happy-a {
    0%, 100% { transform: scale(1.12); filter: none; }
    50% { transform: scale(1.3); filter: brightness(1.7) saturate(1.3); }
}

@keyframes cos-aura-happy-b {
    0%, 100% { transform: scale(1.12); filter: none; }
    50% { transform: scale(1.3); filter: brightness(1.7) saturate(1.3); }
}

@keyframes cos-wear-hop-a {
    0%, 100% { transform: none; }
    45% { transform: translateY(-7%); }
}

@keyframes cos-wear-hop-b {
    0%, 100% { transform: none; }
    45% { transform: translateY(-7%); }
}

/* ---------- Victory: a steady, brighter pulse on the results screen ---------- */
.sk-sprite.is-react-victory > .sk-sprite-aura {
    animation: cos-aura-victory 1.6s ease-in-out infinite;
}

@keyframes cos-aura-victory {
    0%, 100% { transform: scale(1.18); filter: brightness(1.2); }
    50% { transform: scale(1.34); filter: brightness(1.8) saturate(1.3); }
}

/* ---------- Small previews: the lineup pads and mail / trade previews ---------- */
.sk-sprite.is-capsule {
    position: absolute;
    z-index: 1;
    left: 6%;
    bottom: 9%;
    width: 88%;
    height: 88%;
    max-width: none;
    transform-origin: bottom center;
    animation: tc-bob 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.5s);
}

.sk-sprite.is-capsule > .tc-sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: none;
}

.tc-capsule.is-filled:active .sk-sprite.is-capsule,
.tc-capsule.is-filled.has-tip .sk-sprite.is-capsule { animation: tc-hop 0.45s var(--sc-ease-spring); }

.sk-sprite.is-mail {
    width: 100%;
    height: 100%;
}

.sk-sprite.is-mail > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .sk-sprite.is-capsule { animation: none !important; }

    .sk-sprite[class*="is-react-"] > .sk-sprite-aura,
    .sk-sprite[class*="is-react-"] > .sk-sprite-wear {
        animation: none !important;
    }
}