/*
Theme Name: 谷歌SEO独立站主题
Theme URI: https://example.com/
Description: 专业外贸独立站出海品牌网站主题，支持谷歌SEO优化，响应式设计
Author: 自定义主题
Author URI: https://example.com/
Version: 1.0
License: GNU General Public License v2 or later
License: URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: google-seo1-theme
Tags: 外贸, 独立站, 谷歌SEO, 响应式, 企业, 案例展示, 深色主题
*/

/* 基础样式重置与导入 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 自定义工具类 - 会被Tailwind识别 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    .hover-scale {
        transition: transform 0.3s ease;
    }
    .hover-scale:hover {
        transform: scale(1.03);
    }
    .case-scroll {
        transition: transform 2s ease-in-out;
    }
    .case-card:hover .case-scroll {
        transform: translateY(calc(-100% + 20rem));
    }
    .gradient-overlay {
        background: linear-gradient(to bottom, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.8) 100%);
    }
}

/* 全局样式扩展 */
body {
    @apply bg-primary text-textLight font-sans;
    scroll-behavior: smooth;
}

a {
    @apply transition-colors duration-300;
}

/* 导航栏样式 */
header {
    @apply transition-all duration-300;
}

.nav-link {
    @apply text-textMedium hover:text-accent transition-colors duration-300;
}

/* 案例展示区域样式 */
.case-filter {
    @apply px-6 py-2 rounded-full transition-all duration-300 cursor-pointer;
}

.case-filter.active {
    @apply bg-accent text-primary;
}

.case-card {
    @apply group rounded-xl overflow-hidden transition-all duration-500;
}

.case-card img {
    @apply w-full h-auto object-cover;
}

.case-card .absolute {
    @apply flex flex-col justify-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .case-grid {
        @apply grid-cols-1;
    }
    
    .nav-desktop {
        @apply hidden;
    }
    
    .nav-mobile {
        @apply block;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .case-grid {
        @apply grid-cols-2;
    }
}

@media (min-width: 1025px) {
    .case-grid {
        @apply grid-cols-3;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* 页脚样式 */
footer {
    @apply bg-primary py-12 border-t border-secondary/30;
}

.footer-text {
    @apply text-center text-textDark pt-8 border-t border-secondary/30;
}