/* =========================================================
   ToolZen Hub Design System
   Animations
========================================================= */

/* ========================================
   Keyframes
======================================== */

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ========================================
   Animation Utility Classes
======================================== */

.fade-in {
    animation: fadeIn .5s ease forwards;
}

.slide-up {
    animation: slideUp .5s ease forwards;
}

.slide-down {
    animation: slideDown .5s ease forwards;
}

.slide-left {
    animation: slideLeft .5s ease forwards;
}

.slide-right {
    animation: slideRight .5s ease forwards;
}

.scale-in {
    animation: scaleIn .4s ease forwards;
}

.pulse {
    animation: pulse 1.5s infinite;
}

/* ========================================
   Loading Spinner
======================================== */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* ========================================
   Hover Effects
======================================== */

.hover-lift {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

.hover-scale:hover {
    transform: scale(1.03);
}

.hover-opacity {
    transition: opacity var(--transition-fast);
}

.hover-opacity:hover {
    opacity: .85;
}

/* ========================================
   Page Transition
======================================== */

.page-enter {
    animation: fadeIn .4s ease;
}