/* MLB Diff System Visual Feedback Animations */

/* Pulse animation keyframes */
@keyframes diffPulseGreen {
    0% {
        background-color: transparent;
        transform: scale(1);
    }
    25% {
        background-color: rgba(0, 255, 0, 0.3);
        transform: scale(1.05);
    }
    50% {
        background-color: rgba(0, 255, 0, 0.5);
        transform: scale(1.1);
    }
    75% {
        background-color: rgba(0, 255, 0, 0.3);
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

@keyframes diffPulseRed {
    0% {
        background-color: transparent;
        transform: scale(1);
    }
    25% {
        background-color: rgba(255, 0, 0, 0.3);
        transform: scale(1.05);
    }
    50% {
        background-color: rgba(255, 0, 0, 0.5);
        transform: scale(1.1);
    }
    75% {
        background-color: rgba(255, 0, 0, 0.3);
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

@keyframes diffPulseBlue {
    0% {
        background-color: transparent;
        transform: scale(1);
    }
    25% {
        background-color: rgba(0, 100, 255, 0.3);
        transform: scale(1.05);
    }
    50% {
        background-color: rgba(0, 100, 255, 0.5);
        transform: scale(1.1);
    }
    75% {
        background-color: rgba(0, 100, 255, 0.3);
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Animation classes */
.diff-highlight-green {
    animation: diffPulseGreen 2s ease-in-out;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.diff-highlight-red {
    animation: diffPulseRed 2s ease-in-out;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.diff-highlight-blue {
    animation: diffPulseBlue 2s ease-in-out;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Specific element highlights for different contexts */

/* Score highlights */
.score-highlight-green {
    animation: diffPulseGreen 2s ease-in-out;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.score-highlight-red {
    animation: diffPulseRed 2s ease-in-out;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* Game tile highlights (for main page) */
.game-tile-highlight-green {
    animation: diffPulseGreen 2s ease-in-out;
    border-radius: 8px;
}

.game-tile-highlight-red {
    animation: diffPulseRed 2s ease-in-out;
    border-radius: 8px;
}

.game-tile-highlight-blue {
    animation: diffPulseBlue 2s ease-in-out;
    border-radius: 8px;
}

/* Inning/status highlights */
.inning-highlight {
    animation: diffPulseBlue 2s ease-in-out;
    border-radius: 3px;
    padding: 1px 3px;
    margin: -1px -3px;
}

/* At-bat highlights */
.atbat-highlight {
    animation: diffPulseBlue 1.5s ease-in-out;
    border-radius: 3px;
}

/* Boxscore specific highlights */
.boxscore-highlight-green {
    animation: diffPulseGreen 2s ease-in-out;
    border-radius: 4px;
    display: inline-block;
    min-width: 100%;
}

.boxscore-highlight-red {
    animation: diffPulseRed 2s ease-in-out;
    border-radius: 4px;
    display: inline-block;
    min-width: 100%;
}

/* Table cell highlights for boxscores */
.table-cell-highlight-green {
    animation: diffPulseGreen 2s ease-in-out;
}

.table-cell-highlight-red {
    animation: diffPulseRed 2s ease-in-out;
}

/* Utility classes */
.diff-updating {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.diff-updated {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Remove animation classes after completion */
.diff-highlight-green.animation-complete,
.diff-highlight-red.animation-complete,
.diff-highlight-blue.animation-complete,
.score-highlight-green.animation-complete,
.score-highlight-red.animation-complete,
.game-tile-highlight-green.animation-complete,
.game-tile-highlight-red.animation-complete,
.game-tile-highlight-blue.animation-complete,
.inning-highlight.animation-complete,
.atbat-highlight.animation-complete,
.boxscore-highlight-green.animation-complete,
.boxscore-highlight-red.animation-complete,
.table-cell-highlight-green.animation-complete,
.table-cell-highlight-red.animation-complete {
    animation: none;
    background-color: transparent;
    transform: scale(1);
}