/* 公共样式文件 - 技术接单汇平台 */

/* Tailwind 配置 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .hover-scale {
        transition: transform 0.3s ease;
    }
    
    .hover-scale:hover {
        transform: scale(1.03);
    }
    
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .nav-shadow {
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    
    .backdrop-blur-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* 全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
    scroll-behavior: smooth;
}

/* 导航栏样式 */
.navbar {
    @apply fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-nav nav-shadow;
}

.navbar-scrolled {
    @apply py-2 shadow-md;
}

.navbar-default {
    @apply py-3 shadow-sm;
}

/* 移动端菜单样式 */
.mobile-menu {
    @apply hidden md:hidden bg-white border-t;
}

.mobile-menu.show {
    @apply block;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-xl overflow-hidden shadow-lg hover-scale group;
}

.card-hover {
    @apply bg-white rounded-xl overflow-hidden shadow-lg hover-lift;
}

/* 标签样式 */
.tag {
    @apply bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium;
}

/* 图标容器样式 */
.icon-container {
    @apply bg-primary/10 p-3 rounded-lg;
}

/* 渐变背景 */
.gradient-bg {
    @apply bg-gradient-to-br from-primary/5 to-white;
}

.gradient-bg-alt {
    @apply bg-gradient-to-br from-primary/10 to-secondary/10;
}

/* 响应式文本 */
.responsive-text-xl {
    @apply text-[clamp(1.8rem,4vw,2.5rem)];
}

.responsive-text-2xl {
    @apply text-[clamp(2rem,5vw,3.5rem)];
}

.responsive-text-3xl {
    @apply text-[clamp(1.5rem,3vw,2.5rem)];
}

/* 动画类 */
.fade-in {
    @apply opacity-0 translate-y-10 transition-all duration-500;
}

.fade-in.show {
    @apply opacity-100 translate-y-0;
}

/* 页脚样式 */
.footer {
    @apply bg-gray-900 text-white py-8;
}

.footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
}

/* 联系信息样式 */
.contact-item {
    @apply flex items-start;
}

.contact-icon {
    @apply bg-primary/10 p-3 rounded-lg mr-4;
}

/* 项目卡片样式 */
.project-card {
    @apply bg-neutral rounded-2xl shadow-xl overflow-hidden hover-lift;
}

.project-meta {
    @apply flex items-center mb-6;
}

.project-date {
    @apply bg-primary/10 text-primary px-3 py-1 rounded-md text-sm font-medium;
}

.project-tags {
    @apply text-gray-600 text-sm;
}

/* 功能模块样式 */
.feature-module {
    @apply bg-white p-4 rounded-lg shadow-md;
}

.feature-title {
    @apply font-medium text-gray-800 mb-2 flex items-center;
}

.feature-icon {
    @apply text-primary mr-2;
}

/* 响应式容器 */
.container-responsive {
    @apply container mx-auto px-4;
}

/* 图片样式 */
.img-responsive {
    @apply w-full h-auto rounded-xl shadow-2xl hover-scale;
}

.img-preview {
    @apply w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110;
}

/* 头像样式 */
.avatar {
    @apply relative rounded-full overflow-hidden border-4 border-white shadow-lg hover-lift flex items-center justify-center;
}

/* 分隔线 */
.divider {
    @apply mx-2 text-gray-300;
}

/* 加载动画 */
.loading {
    @apply animate-pulse bg-gray-200 rounded;
}

/* 工具提示 */
.tooltip {
    @apply absolute invisible group-hover:visible bg-gray-800 text-white text-sm rounded py-1 px-2 -mt-8 ml-2;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary/50 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary/70;
}