/* 共享CSS文件 - styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .gradient-bg {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    }
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .fade-in {
        animation: fadeIn 0.6s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .slide-in-left {
        animation: slideInLeft 0.8s ease-out;
    }
    @keyframes slideInLeft {
        from { opacity: 0; transform: translateX(-50px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .slide-in-right {
        animation: slideInRight 0.8s ease-out;
    }
    @keyframes slideInRight {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .nav-active {
        color: #1e40af;
        font-weight: 600;
        position: relative;
    }
    .nav-active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #1e40af;
        border-radius: 1px;
    }
    .footer-link, .footer-link:visited, .footer-link:hover, .footer-link:active {
        color: #d1d5db !important;
        text-decoration: none !important;
    }
    .footer-link:hover {
        color: #ffffff !important;
    }
    .modal-backdrop {
        backdrop-filter: blur(8px);
    }
}

/* 全局样式优化 */
body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    scroll-behavior: smooth;
}

/* 图片懒加载 */
.lazy-img {
    transition: opacity 0.3s ease;
    opacity: 0;
}
.lazy-img.loaded {
    opacity: 1;
}

/* 缓存优化 */
.cache-control {
    cache-control: public, max-age=31536000;
}

/* 响应式图片 */
.responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 加载动画 */
.loading-spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #1e40af;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 性能优化：减少重排 */
.optimized-box {
    will-change: transform;
    backface-visibility: hidden;
}

/* 模态框优化 */
.modal-content {
    animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}