/* ============================================
   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 var(--border-color);
    border-radius: 50%;
    border-top-color: var(--text-color);
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* Error Shake Animation */
@keyframes shake-error {

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

    15% {
        transform: translateX(-6px) rotate(-5deg);
    }

    30% {
        transform: translateX(5px) rotate(4deg);
    }

    45% {
        transform: translateX(-4px) rotate(-3deg);
    }

    60% {
        transform: translateX(3px) rotate(2deg);
    }

    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
}

background-color: var(--danger-bg) !important;
border-color: var(--danger-color) !important;
color: var(--danger-color) !important;
}

/* PRO Badge Blink Animation */
@keyframes badge-blink {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        transform: scale(1.05);
    }
}

.badge-blink {
    animation: badge-blink 1s ease-in-out infinite;
}

.spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   STAGGERED REVEAL
   A tab that opens on a set of small widgets — the Library's decks, the
   Stats widgets, search results, a binder page — reveals them in order
   rather than all at once.

   The whole set is in place inside about a second however many there are:
   the first sixteen step 36 ms apart and everything after arrives with the
   sixteenth, so a long grid never crawls. A panel that is not showing is
   `display: none` (see tabs.css), and an animation restarts when its
   element is displayed again, so this plays whenever a tab or a view is
   opened, not only the first time.

   `backwards` rather than `both`: the item is hidden while it waits its
   turn, and once it has arrived the animation stops overriding it, so a
   widget's own hover transform still works.
   ============================================ */

@keyframes widget-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.stagger-reveal > * {
    animation: widget-reveal 320ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.stagger-reveal > :nth-child(2) { animation-delay: 36ms; }
.stagger-reveal > :nth-child(3) { animation-delay: 72ms; }
.stagger-reveal > :nth-child(4) { animation-delay: 108ms; }
.stagger-reveal > :nth-child(5) { animation-delay: 144ms; }
.stagger-reveal > :nth-child(6) { animation-delay: 180ms; }
.stagger-reveal > :nth-child(7) { animation-delay: 216ms; }
.stagger-reveal > :nth-child(8) { animation-delay: 252ms; }
.stagger-reveal > :nth-child(9) { animation-delay: 288ms; }
.stagger-reveal > :nth-child(10) { animation-delay: 324ms; }
.stagger-reveal > :nth-child(11) { animation-delay: 360ms; }
.stagger-reveal > :nth-child(12) { animation-delay: 396ms; }
.stagger-reveal > :nth-child(13) { animation-delay: 432ms; }
.stagger-reveal > :nth-child(14) { animation-delay: 468ms; }
.stagger-reveal > :nth-child(15) { animation-delay: 504ms; }
.stagger-reveal > :nth-child(n + 16) { animation-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
    .stagger-reveal > * {
        animation: none;
    }
}