/* 统一网站视觉和交互样式的CSS */

/* 导航栏样式 */
.nav-primary {
    transition: all 0.3s ease;
}

.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #165DFF;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* 按钮样式 */
.btn-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}

.btn-primary:hover::before {
    transform: translateX(0);
}

.btn-secondary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 93, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}

.btn-secondary:hover::before {
    transform: translateX(0);
}

/* 表单元素样式 */
.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1) !important;
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 动画类 */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

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

/* 延迟动画类 */
.animation-delay-100 {
    animation-delay: 100ms;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-500 {
    animation-delay: 500ms;
}

/* 滚动动画 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    animation: animateOnScroll 0.8s ease forwards;
}

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

/* 模态框样式 */
.modal {
    backdrop-filter: blur(5px);
}

.modal-content {
    animation: modalIn 0.3s ease forwards;
}

@keyframes modalIn {
    to {
        transform: scale(1);
    }
}

/* 渐变背景增强 */
.gradient-primary {
    background: linear-gradient(135deg, #165DFF 0%, #0A3CA0 100%);
}

/* 阴影效果增强 */
.shadow-enhanced {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .nav-scrolled {
        background-color: rgba(255, 255, 255, 1) !important;
    }
    
    .card-hover:hover {
        transform: translateY(-3px);
    }
}