/* ==========================================================================
   ANIMAZIONI & LOADING STATES
   ========================================================================== */

/* Spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(10, 92, 168, 0.2);
    border-top: 2px solid #0a5ca8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* Spinner grande */
.loading-spinner-large {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(10, 92, 168, 0.1);
    border-top: 3px solid #0a5ca8;
    border-right: 3px solid #0a5ca8;
    margin: 20px auto;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 12px;
    margin: 8px 0;
    border-radius: 4px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
}

/* Bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.notification-bounce { animation: bounce 0.6s ease-in-out; }

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake { animation: shake 0.5s ease-in-out; }

/* Glow */
/* Glow */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(10, 92, 168, 0.3); }
    50% { box-shadow: 0 0 15px rgba(10, 92, 168, 0.6); }
}

.element-glow { animation: glow 2s ease-in-out infinite; }

/* Fade In/Out */
/* Fade In/Out */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

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

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

.scale-in { animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Expand */
/* Expand */
@keyframes expandDown {
    from { opacity: 0; max-height: 0; overflow: hidden; }
    to { opacity: 1; max-height: 500px; overflow: visible; }
}

.expand-down { animation: expandDown 0.4s ease-out; }

/* Checkmark */
/* Checkmark */
@keyframes checkmarkScale {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.checkmark-animate { animation: checkmarkScale 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* Rotate */
/* Rotate */
@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate-animate { animation: rotate360 2s linear infinite; }

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

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

/* Float */
/* Float */
@keyframes floatUp {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animate { animation: floatUp 3s ease-in-out infinite; }

/* Stagger delay */
/* Stagger delay */
.stagger-1 { animation-delay: 0s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.2s; }
.stagger-4 { animation-delay: 0.3s; }
.stagger-5 { animation-delay: 0.4s; }

/* Card reveal */
/* Card reveal */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-reveal { animation: cardReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Underline */
/* Underline */
@keyframes underlineSlide {
    from { width: 0; left: 0; }
    to { width: 100%; left: 0; }
}

.underline-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #0a5ca8;
    animation: underlineSlide 0.3s ease-out;
}

/* Modal backdrop */
/* Modal backdrop */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

/* Button loading */
/* Button loading */
.btn-loading {
    pointer-events: none;
    opacity: 0.6;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

/* Toast notification */
/* Toast notification */
@keyframes slideInRight {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

.toast-notification { animation: slideInRight 0.4s ease-out; }

.toast-notification.exit { animation: slideOutRight 0.4s ease-in; }

/* Gradient */
/* Gradient */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-animate {
    background: linear-gradient(-45deg, #0a5ca8, #1f9d6b, #0a5ca8);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Shiny */
@keyframes shine {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Shiny */
.shine-effect {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200px 100%;
    animation: shine 3s infinite;
}

/* Wobble */
/* Wobble */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(5deg); }
    45% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    75% { transform: rotate(-2deg); }
}

.wobble-animate { animation: wobble 0.8s ease-in-out; }

/* Flip */
/* Flip */
@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

.flip-animate { animation: flip 0.6s ease-out; }

/* Jello */
/* Jello */
@keyframes jello {
    0%, 11.1%, 100% { transform: skewX(0deg) skewY(0deg); }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

.jello-animate { animation: jello 0.9s; }

/* Attention */
/* Attention */
@keyframes attentionSeeker {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.attention-seek { animation: attentionSeeker 0.8s; }

/* Transition timing */
.smooth-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-transition-fast {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-transition-slow {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}