/* Vote reward micro / meso animations */

@media (prefers-reduced-motion: no-preference) {
    @keyframes nom-row-ripple {
        0% {
            box-shadow: inset 0 0 0 0 rgb(45 212 191 / 0.45);
        }
        100% {
            box-shadow: inset 0 0 0 12px rgb(45 212 191 / 0);
        }
    }

    @keyframes nom-row-shake {
        0%,
        100% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-3px);
        }
        75% {
            transform: translateX(3px);
        }
    }

    @keyframes nom-btn-pop {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.12);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes vote-emoji-particle {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        50% {
            opacity: 1;
            transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1.15);
        }
        100% {
            opacity: 0;
            transform: translate(var(--dx), var(--dy)) scale(0.85);
        }
    }

    @keyframes brick-emoji-bounce {
        0%,
        100% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.15);
        }
    }

    @keyframes board-progress-pulse {
        0%,
        100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.06);
        }
    }

    @keyframes save-confetti-fall {
        0% {
            opacity: 1;
            transform: translateY(0) rotate(0deg);
        }
        100% {
            opacity: 0;
            transform: translateY(100vh) rotate(720deg);
        }
    }

    @keyframes star-burst-fly {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(0.5) rotate(0deg);
        }
        35% {
            opacity: 1;
            transform: translate(var(--bx-dx), var(--bx-dy)) scale(1.2) rotate(180deg);
        }
        100% {
            opacity: 0;
            transform: translate(var(--bx-fx), var(--bx-fy)) scale(0.6) rotate(360deg);
        }
    }

    @keyframes star-badge-pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
    }

    @keyframes badge-toast-in {
        0% {
            opacity: 1;
            transform: scaleX(0) scaleY(0);
        }
        40% {
            opacity: 1;
            transform: scaleX(1) scaleY(0);
        }
        100% {
            opacity: 1;
            transform: scaleX(1) scaleY(1);
        }
    }

    @keyframes badge-toast-out {
        0% {
            opacity: 1;
            transform: scaleX(1) scaleY(1);
        }
        100% {
            opacity: 0;
            transform: scaleX(1) scaleY(0);
        }
    }

    @keyframes badge-toast-content-fade-in {
        0%, 40% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

.badge-toast-content {
    opacity: 0;
    animation: badge-toast-content-fade-in 0.4s ease-out forwards;
}

.nom-row-vote-ripple {
    animation: nom-row-ripple 350ms ease-out;
}

.nom-row-vote-shake {
    animation: nom-row-shake 150ms ease-in-out;
}

.nom-vote-btn-pop {
    animation: nom-btn-pop 200ms ease-out;
}

.vote-emoji-particle {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    font-size: 1.5rem;
    line-height: 1;
    animation: vote-emoji-particle 650ms ease-out forwards;
}

.board-brick-locked-in {
    outline: 2px solid rgb(45 212 191 / 0.35);
    outline-offset: 2px;
}

.brick-emoji-bounce {
    animation: brick-emoji-bounce 500ms ease-out;
}

.board-progress-pulse {
    animation: board-progress-pulse 400ms ease-out;
}

.board-brick-filter-hidden {
    display: none !important;
}

.save-confetti-piece {
    position: fixed;
    top: -10px;
    z-index: 70;
    pointer-events: none;
    font-size: 0.875rem;
    animation: save-confetti-fall var(--fall-duration, 2.5s) ease-in forwards;
}

.star-burst-particle {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-warning, #facc15);
    animation: star-burst-fly 1.5s ease-out forwards;
}

.star-badge-pulse {
    animation: star-badge-pulse 0.5s ease-out;
}

.badge-toast-animate-in {
    animation: badge-toast-in 0.4s ease-out;
}

.badge-toast-animate-out {
    animation: badge-toast-out 0.3s ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
    .nom-row-vote-ripple,
    .nom-row-vote-shake,
    .nom-vote-btn-pop,
    .vote-emoji-particle,
    .brick-emoji-bounce,
    .board-progress-pulse,
    .save-confetti-piece,
    .star-burst-particle,
    .star-badge-pulse,
    .vote-feedback-popup,
    .badge-toast-animate-in,
    .badge-toast-animate-out,
    .badge-toast-content {
        animation: none !important;
    }
}

.vote-feedback-popup {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
    animation: vote-feedback-fade 1.5s ease forwards;
}

@keyframes vote-feedback-fade {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    85% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
}