@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-balance {
        text-wrap: balance;
    }
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .safe-bottom-margin {
        margin-bottom: env(safe-area-inset-bottom);
    }
    .cert-gold-border {
        border-image: linear-gradient(135deg, #a855f7, #7c3aed, #1e3a8a) 1;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .backdrop-blur-nav {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .tap-highlight-none {
        -webkit-tap-highlight-color: transparent;
    }
    .scroll-smooth {
        scroll-behavior: smooth;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
/* 证书装饰边框 */
.cert-frame {
    position: relative;
}
.cert-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    pointer-events: none;
    opacity: 0.6;
}
/* 滚动入场动画 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 导航链接下划线动画 */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #1e3a8a, #7c3aed, #a855f7);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}
/* FAQ箭头旋转 */
.faq-arrow {
    transition: transform 0.3s ease;
}
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.4s ease;
}
.faq-item.active .faq-answer {
    max-height: 300px;
}
/* 移动端菜单动画 */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}
/* 汉堡菜单动画 */
.hamburger span {
    transition: all 0.3s ease;
    transform-origin: center;
}
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* 产品卡片筛选动画 */
.product-card {
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.product-card.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    position: absolute;
}
/* 按钮点击反馈 */
.btn-press:active {
    transform: scale(0.97);
}
/* 弹窗动画 */
.modal-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}
.modal-box {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-backdrop.show .modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}
/* 数字跳动动画 */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.stat-animate {
    animation: countUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* 悬浮按钮动画 */
.fab-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* 隐藏滚动条但保持滚动 */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
/* 表单输入聚焦优化 - 防止iOS自动缩放 */
input, select, textarea, button {
    font-size: 16px !important;
}
/* 流程步骤连接线 - 桌面端 */
@media (min-width: 768px) {
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 25px;
        right: -20px;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, #7c3aed, transparent);
        z-index: 0;
    }
}

/* ========== 移动端额外优化 ========== */
@media (max-width: 767px) {
    /* 优化移动端行高 */
    body {
        line-height: 1.6;
    }
    /* 移动端卡片间距优化 */
    .grid {
        gap: 0.875rem !important;
    }
    /* 移动端文字大小优化 */
    h1 {
        letter-spacing: -0.02em;
    }
    /* 移动端按钮padding优化 */
    button, a.btn-press {
        min-height: 44px;
    }
    /* 移动端输入框优化 */
    input, select, textarea {
        min-height: 48px;
    }
    /* 移动端弹窗优化 */
    .modal-box {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    /* 移动端菜单滚动优化 */
    .mobile-menu {
        -webkit-overflow-scrolling: touch;
    }
    /* 移动端筛选标签padding优化 */
    .filter-btn {
        padding: 0.625rem 1rem;
    }
}

/* 修复移动端100vh问题 */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* 图片懒加载占位优化 */
img {
    content-visibility: auto;
}

/* 选择文本颜色优化 - 蓝紫色 */
::selection {
    background: #7c3aed;
    color: #fff;
}

/* ========== 蓝紫科技风自定义Tailwind色值（通过CSS变量注入） ========== */
/* main.js 中会通过 tailwind.config 扩展颜色；这里补充一些需要直接覆盖的细节色 */