/* 主CSS文件 - 引入所有模块CSS */
@import url('global.css');
@import url('header.css');
@import url('button.css');
@import url('main-content.css');
@import url('card.css');
@import url('footer.css');
@import url('table.css');
@import url('form.css');
@import url('tab.css');
@import url('text.css');
@import url('chat.css');

/* 可以在这里添加其他全局样式或覆盖样式 */

/* 右上角头像圆形样式 */
.navbar-avatar .avatar img,
.navbar-avatar .thumb-small.avatar img {
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    width: 32px !important;
    height: 32px !important;
    object-fit: cover;
}

/* 确保原有img-circle类生效 */
.img-circle {
    border-radius: 50% !important;
}

/* 特别针对导航栏头像的圆形样式 */
.navbar-nav.navbar-avatar .avatar img,
.navbar-nav.navbar-avatar .thumb-small.avatar img,
.navbar-nav.navbar-avatar .img-circle {
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}


/* ==============================================
   首页现代化动效
   ============================================== */

/* 入场动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 英雄区域动效 */
.hero-section {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-text {
    animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.hero-illustration {
    animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

.hero-illustration svg {
    animation: float 4s ease-in-out infinite;
}

/* 特性卡片动效 */
.feature-item {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }
.feature-item:nth-child(4) { animation-delay: 0.4s; }

.feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    transition: all 0.4s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
}

/* 标题区域动效 */
.section-header {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮悬浮效果 */
.button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary:hover {
    box-shadow: 0 8px 25px var(--xyx-accent-color-alpha-10, rgba(0, 113, 227, 0.1), 0.35);
}

.button-secondary:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 导航栏链接动效 */
.nav-primary > li > a {
    position: relative;
    transition: all 0.3s ease;
}

.nav-primary > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--xyx-accent-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}


.nav-primary > li:hover > a::after {
    width: 80%;
}

/* 页脚链接动效 */
.xyx-footer a {
    transition: all 0.3s ease;
}

.xyx-footer a:hover {
    color: var(--xyx-accent-color);
    transform: translateX(3px);
}

/* 滚动触发动画（需要JS配合） */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}