/* Micro-interactions and Visual Polish */

/* Button hover effects */
button:not(:disabled),
.btn:not(:disabled),
a.btn:not(:disabled) {
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover,
a.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
a.btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Card hover effects */
.card-hover,
[class*="hover:shadow"] {
    transition: all 0.3s ease-in-out;
}

.card-hover:hover,
[class*="hover:shadow"]:hover {
    transform: translateY(-2px);
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Success celebration animation */
@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #10b981;
    animation: confetti 2s ease-out forwards;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth transitions for theme changes */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Consistent spacing scale (4px base unit) */
.spacing-1 { margin: 0.25rem; } /* 4px */
.spacing-2 { margin: 0.5rem; }  /* 8px */
.spacing-3 { margin: 0.75rem; } /* 12px */
.spacing-4 { margin: 1rem; }    /* 16px */
.spacing-5 { margin: 1.25rem; } /* 20px */
.spacing-6 { margin: 1.5rem; }  /* 24px */
.spacing-8 { margin: 2rem; }    /* 32px */
.spacing-10 { margin: 2.5rem; } /* 40px */
.spacing-12 { margin: 3rem; }   /* 48px */

/* Ripple effect for buttons */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}

/* Shimmer loading effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
}

.dark .shimmer {
    background: linear-gradient(to right, #374151 0%, #4b5563 20%, #374151 40%, #374151 100%);
    background-size: 1000px 100%;
}

/* Error illustration styles */
.error-illustration {
    max-width: 300px;
    margin: 0 auto;
    opacity: 0.8;
}

/* Success illustration styles */
.success-illustration {
    max-width: 200px;
    margin: 0 auto;
}