/* Core flash animation using CSS keyframes - most compatible approach */
@keyframes flash-color {
    0% { background-color: var(--original-color, #ffffff); }
    50% { background-color: var(--flash-color, #ff6b6b); }
    100% { background-color: var(--original-color, #ffffff); }
}

/* Alternative pulse animation for emphasis */
@keyframes flash-pulse {
    0% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    50% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

/* Subtle glow effect for modern devices */
@keyframes flash-glow {
    0% {
        background-color: var(--original-color, #ffffff);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
    50% {
        background-color: var(--flash-color, #ff6b6b);
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
    }
    100% {
        background-color: var(--original-color, #ffffff);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* Multi-flash keyframes for repeated animations */
@keyframes flash-color-2x {
    0%, 100% { background-color: var(--original-color, #ffffff); }
    25%, 75% { background-color: var(--flash-color, #ff6b6b); }
    50% { background-color: var(--original-color, #ffffff); }
}

@keyframes flash-color-3x {
    0%, 100% { background-color: var(--original-color, #ffffff); }
    16.66%, 50%, 83.33% { background-color: var(--flash-color, #ff6b6b); }
    33.33%, 66.66% { background-color: var(--original-color, #ffffff); }
}

@keyframes flash-pulse-2x {
    0%, 100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    25%, 75% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    50% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

@keyframes flash-pulse-3x {
    0%, 100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    16.66%, 50%, 83.33% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    33.33%, 66.66% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

/* Flash utility classes */
.flash-basic {
    animation: flash-color 0.6s ease-in-out;
}

.flash-pulse {
    animation: flash-pulse 0.8s ease-in-out;
}

.flash-glow {
    animation: flash-glow 1s ease-in-out;
}

.flash-success {
    --flash-color: #4CAF50;
}

.flash-warning {
    --flash-color: #FF9800;
}

.flash-error {
    --flash-color: #f44336;
}

.flash-info {
    --flash-color: #2196F3;
}