/* Animation keyframes and transitions */

/* Fade animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

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

/* Slide animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Pulse animations */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes searchPulse {
    0% { box-shadow: 0 0 0 0 rgba(78, 115, 223, 0.4); }
    70% { box-shadow: 0 0 0 5px rgba(78, 115, 223, 0); }
    100% { box-shadow: 0 0 0 0 rgba(78, 115, 223, 0); }
}

/* Flash message animations */
@keyframes flash-slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Highlight animations */
@keyframes highlightNew {
    from { background-color: rgba(0, 123, 255, 0.2); }
    to { background-color: transparent; }
}

/* Checkmark animation */
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #f8fbff;
    }
}

/* Progress bar animations */
@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

/* Placeholder animations */
@keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

@keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0%;
        mask-position: -200% 0%;
    }
}

/* Common animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
    animation: fadeOut 0.3s ease-in-out;
}

.fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}

.fade-out-up {
    animation: fadeOutUp 0.5s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-out-right {
    animation: slideOutRight 0.3s ease-in;
}

.pulse {
    animation: pulse 2s infinite;
}

/* For elements being removed */
.removing {
    animation: flash-fade-out 0.3s ease forwards;
}

/* For newly added items */
.new-item {
    animation: highlightNew 2s ease-out;
}

/* Common transition properties */
.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

.transition-colors {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect utilities using transitions */
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}