/*
 * Rare colourings for caught Skanimals (Helpers/SkanimalVariants.cs). Each is a filter over the species' sprite, so no
 * extra art is generated. The holographic shimmer runs alongside the sprite's idle animation via --sk-idle.
 */

.sk-variant-pastel {
    filter: saturate(0.55) brightness(1.18) contrast(0.9) drop-shadow(0 0 4px rgba(255, 214, 236, 0.55));
}

.sk-variant-greyscale {
    filter: grayscale(1) contrast(1.2) brightness(1.06) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}

.sk-variant-shiny {
    filter: hue-rotate(var(--sk-shiny-hue, 140deg)) saturate(1.5) brightness(1.08) drop-shadow(0 0 6px rgba(255, 214, 90, 0.85));
}

.sk-variant-metallic {
    filter: grayscale(1) sepia(0.35) hue-rotate(175deg) saturate(1.6) contrast(1.45) brightness(1.12)
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(160, 200, 255, 0.6));
}

.sk-variant-holographic {
    animation: var(--sk-idle, none), sk-holo 3.6s linear infinite;
}

/* Drifts through nearby colours and fades a little, like it's blending into the background */
.sk-variant-chameleon {
    animation: var(--sk-idle, none), sk-chameleon 7s ease-in-out infinite;
}

@keyframes sk-chameleon {
    0%, 100% { filter: hue-rotate(-50deg) saturate(1.3); opacity: 1; }
    35% { filter: hue-rotate(40deg) saturate(1.4); opacity: 0.72; }
    65% { filter: hue-rotate(110deg) saturate(1.3); opacity: 0.88; }
}

@keyframes sk-holo {
    0% { filter: hue-rotate(0deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 6px rgba(127, 248, 219, 0.9)); }
    33% { filter: hue-rotate(120deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 6px rgba(192, 139, 255, 0.9)); }
    66% { filter: hue-rotate(240deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 6px rgba(255, 158, 216, 0.9)); }
    100% { filter: hue-rotate(360deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 6px rgba(127, 248, 219, 0.9)); }
}

/* Rarity tag on cards */

.sk-rarity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--sc-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sk-rarity-pastel { background: rgba(255, 190, 225, 0.18); color: #ffc6e4; }
.sk-rarity-greyscale { background: rgba(255, 255, 255, 0.12); color: #e6ebf5; }

.sk-rarity-shiny {
    background: linear-gradient(135deg, rgba(255, 217, 107, 0.25), rgba(255, 159, 67, 0.25));
    color: var(--sc-gold);
    box-shadow: 0 0 12px rgba(255, 200, 61, 0.35);
}

.sk-rarity-metallic {
    background: linear-gradient(135deg, #f4f8ff, #8fa6c4 55%, #dfe8f5);
    color: var(--sc-navy);
}

.sk-rarity-chameleon {
    background: linear-gradient(90deg, rgba(94, 240, 160, 0.25), rgba(58, 168, 255, 0.25), rgba(94, 240, 160, 0.25));
    color: #7ff0b8;
}

.sk-rarity-holographic {
    background: linear-gradient(90deg, #7ff8db, #c08bff, #ff9ed8, #7ff8db);
    background-size: 300% 100%;
    color: var(--sc-navy);
    animation: sk-holo-tag 3s linear infinite;
}

@keyframes sk-holo-tag {
    to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-variant-holographic,
    .sk-variant-chameleon {
        animation: var(--sk-idle, none);
    }

    .sk-rarity-holographic {
        animation: none;
    }

    .sk-variant-holographic {
        filter: saturate(1.7) brightness(1.12) drop-shadow(0 0 6px rgba(192, 139, 255, 0.9));
    }
}