/* Fade animations */ @keyframes fadeIn   {

    from  {
        opacity: 0;

    }
    to  {
        opacity: 1;

    }

}
@keyframes fadeOut   {

    from  {
        opacity: 1;

    }
    to  {
        opacity: 0;

    }

}
/* Slide animations */ @keyframes slideInFromLeft   {

    from  {
        transform: translateX(-100%);
        opacity: 0;

    }
    to  {
        transform: translateX(0);
        opacity: 1;

    }

}
@keyframes slideInFromRight   {

    from  {
        transform: translateX(100%);
        opacity: 0;

    }
    to  {
        transform: translateX(0);
        opacity: 1;

    }

}
@keyframes slideInFromTop   {

    from  {
        transform: translateY(-100%);
        opacity: 0;

    }
    to  {
        transform: translateY(0);
        opacity: 1;

    }

}
@keyframes slideInFromBottom   {

    from  {
        transform: translateY(100%);
        opacity: 0;

    }
    to  {
        transform: translateY(0);
        opacity: 1;

    }

}
/* Scale animations */ @keyframes scaleIn   {

    from  {
        transform: scale(0);
        opacity: 0;

    }
    to  {
        transform: scale(1);
        opacity: 1;

    }

}
@keyframes scaleOut   {

    from  {
        transform: scale(1);
        opacity: 1;

    }
    to  {
        transform: scale(0);
        opacity: 0;

    }

}
/* Rotate animations */ @keyframes rotate360   {

    from  {
        transform: rotate(0deg);

    }
    to  {
        transform: rotate(360deg);

    }

}
/* Loading spinner animation */ @keyframes spin   {

    0%  {
        transform: rotate(0deg);

    }
    100%  {
        transform: rotate(360deg);

    }

}
/* Loading logo animation */ @keyframes loadingLogoFadeIn   {

    0%  {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);

    }
    100%  {
        opacity: 1;
        transform: translateY(0) scale(1);

    }

}
@keyframes loadingLogoFadeOut   {

    0%  {
        opacity: 1;
        transform: translateY(0) scale(1);

    }
    100%  {
        opacity: 0;
        transform: translateY(20px) scale(0.95);

    }

}
/* Loading progress animation */ @keyframes progressBarGlow   {

    0%  {
        box-shadow: 0 0 5px var(--primary-color);

    }
    50%  {
        box-shadow: 0 0 15px var(--primary-color);

    }
    100%  {
        box-shadow: 0 0 5px var(--primary-color);

    }

}
/* Loading background animation */ @keyframes backgroundPulse   {

    0%  {
        filter: blur(var(--loading-blur-radius));
        transform: scale(1.1);

    }
    50%  {
        filter: blur(calc(var(--loading-blur-radius) * 1.2));
        transform: scale(1.15);

    }
    100%  {
        filter: blur(var(--loading-blur-radius));
        transform: scale(1.1);

    }

}
/* Loading text animation */ @keyframes loadingTextPulse   {

    0%  {
        opacity: 0.6;

    }
    50%  {
        opacity: 1;

    }
    100%  {
        opacity: 0.6;

    }

}
/* Loading page transition */ @keyframes loadingPageTransition   {

    0%  {
        opacity: 1;
        visibility: visible;

    }
    100%  {
        opacity: 0;
        visibility: hidden;

    }

}
/* Utility classes */ .fade-in  {
    animation: fadeIn var(--transition-normal) forwards;

}
.fade-out  {
    animation: fadeOut var(--transition-normal) forwards;

}
.slide-in-left  {
    animation: slideInFromLeft var(--transition-normal) forwards;

}
.slide-in-right  {
    animation: slideInFromRight var(--transition-normal) forwards;

}
.slide-in-top  {
    animation: slideInFromTop var(--transition-normal) forwards;

}
.slide-in-bottom  {
    animation: slideInFromBottom var(--transition-normal) forwards;

}
.scale-in  {
    animation: scaleIn var(--transition-normal) forwards;

}
.scale-out  {
    animation: scaleOut var(--transition-normal) forwards;

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

}
/* Loading spinner */ .loading-spinner  {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;

}
/* Loading logo */ .loading-logo  {
    animation: loadingLogoFadeIn var(--loading-transition-duration) ease forwards;

}
.loading-logo.hide  {
    animation: loadingLogoFadeOut var(--loading-transition-duration) ease forwards;

}
/* Loading progress bar */ .loading-progress .progress-bar  {
    animation: progressBarGlow 2s ease-in-out infinite;

}
/* Loading background */ .loading-bg img  {
    animation: backgroundPulse 10s ease-in-out infinite;

}
/* Loading text */ .loading-progress .progress-text  {
    animation: loadingTextPulse 2s ease-in-out infinite;

}
/* Loading page */ .loading-page.loaded  {
    animation: loadingPageTransition var(--loading-transition-duration) ease forwards;

}
/* 页面加载动画 */ .page-loading  {
    position: relative;
    overflow: hidden;

}
.page-loading::after  {
    display: none;
    /* 直接隐藏蒙层 */
}
/* 页面加载时内容的淡出淡入效果 */ main  {
    transition: opacity 0.3s ease;

}
.page-loading main  {
    opacity: 1;

}
/* 内容淡入动画 */ @keyframes fadeContentIn   {

    from  {
        opacity: 0;

    }
    to  {
        opacity: 1;

    }

}
.fade-in  {
    animation: fadeContentIn 0.4s ease forwards;

}
/* 平滑滚动 */ html  {
    scroll-behavior: smooth;

}
/* 过渡效果 */ .transition-all  {
    transition: all var(--transition-normal);

}
.transition-transform  {
    transition: transform var(--transition-normal);

}
.transition-opacity  {
    transition: opacity var(--transition-normal);

}
/* 悬停效果 */ .hover-scale  {
    transition: transform var(--transition-fast);

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

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

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

}