/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes card-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
    }
    30% {
        box-shadow: 0 0 20px 4px rgba(56, 189, 248, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    }
}

.card-flash {
    animation: card-flash 0.6s ease-out;
}

@keyframes card-flash-and-remove {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
        opacity: 1;
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 20px 4px rgba(56, 189, 248, 0.4);
        opacity: 1;
        transform: scale(1);
    }
    55% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        opacity: 1;
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
        opacity: 0;
        transform: scale(0.98);
    }
}

.card-flash-and-remove {
    animation: card-flash-and-remove 0.6s ease-out forwards;
    overflow: hidden;
}