/* Animations, Transitions & Dynamic Glass Shadows */

/* Fade In */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide Up */
.slide-up {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In (For Modals & Highlight Elements) */
.zoom-in {
    animation: zoomIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse Animation */
.pulse-glow {
    animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(103, 80, 164, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(103, 80, 164, 0); }
    100% { box-shadow: 0 0 0 0 rgba(103, 80, 164, 0); }
}

/* Spin (For Loading Icons) */
.spin-on-hover:hover {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Skeleton Loading Effect */
.skeleton {
    background: linear-gradient(90deg, 
        var(--md-sys-color-surface-variant) 25%, 
        var(--glass-bg-hover) 50%, 
        var(--md-sys-color-surface-variant) 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 6px;
}
@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Smooth transition for theme toggle & layout elements */
.theme-transition {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}