/* ============================================
   ANIMATIONS
   Keyframes and transition definitions
   ============================================ */

/* Fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide down */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Spin (loading spinners) */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Combo slide down */
@keyframes comboSlideDown {
    from {
        transform: translate(-50%, -20px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Combo spin */
@keyframes comboSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Highlight flash for deck entries */
@keyframes highlight-flash {
    0% {
        box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.8), inset 0 0 15px rgba(139, 92, 246, 0.5);
        background: rgba(139, 92, 246, 0.3);
        z-index: 1000;
    }

    100% {
        box-shadow: 0 0 0 0 transparent, inset 0 0 0 transparent;
        background: transparent;
    }
}

/* Standardized flash-highlight class for any element */
.highlight-flash {
    animation: highlight-flash 1.5s ease-out forwards;
}

/* Salt shake animation */
@keyframes salt-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-8deg);
    }

    20% {
        transform: rotate(8deg);
    }

    30% {
        transform: rotate(-8deg);
    }

    40% {
        transform: rotate(8deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

.salt-icon {
    font-size: 1.1em;
    animation: salt-shake 2s ease-in-out infinite;
}

/* Salt update animation */
@keyframes salt-update {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.salt-value.updated {
    animation: salt-update 0.3s ease-out;
}

/* Float animation for emojis */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.stat-emoji {
    display: inline-block;
    margin-left: 6px;
    font-size: 1.2em;
    animation: float 3s ease-in-out infinite;
}

/* Spinner */
.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}