/* Streamlined Animations - Removed unused keyframes and duplicates */

/* ===== ACTIVE KEYFRAMES ===== */
@keyframes multiplierPulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

@keyframes points-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes modalEntrance {
    from { opacity: 0; transform: scale(0.9) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes notificationSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== CSS-BASED TILE ANIMATIONS ===== */
.tile.removing {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tile.adding {
    opacity: 0;
    transform: scale(0.8);
    animation: tileAdd 0.4s ease-out forwards;
}

@keyframes tileAdd {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* ===== ACTIVE ANIMATION CLASSES ===== */
.points.bump {
    animation: points-bump 220ms ease-out;
}

.multiplier-change.positive,
.multiplier-change.negative {
    animation: multiplierPulse 1s ease-out;
}

.tile.success-highlight {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text) !important;
    transition: all var(--transition-base);
}

.modal.active .modal-content {
    animation: modalEntrance 0.3s ease-out;
}

.notification.show {
    animation: notificationSlide 0.3s ease-out;
}

/* ===== INTERACTION ANIMATIONS ===== */
.btn:hover {
    transform: translateY(-1px);
    transition: transform var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
}

.social-icon:hover {
    transform: scale(1.1);
    transition: transform var(--transition-fast);
}

/* ===== ANIMATION STATES ===== */
.board.animating {
    pointer-events: none;
}

.board.animating .tile:not(.removing):not(.adding) {
    opacity: 0.6;
    transition: opacity 0.6s ease;
}