/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Noto+Serif+SC:wght@400;600&family=Noto+Sans+SC:wght@300;400&display=swap');

/* Tailwind Configuration Override & Custom Base Styles */
@layer base {
    :root {
        --color-primary: #FFFFFF;
        --color-secondary: #F8F8F8;
        --color-accent: #333333;
        --color-gold: #D4AF37;
    }

    body {
        @apply text-[#333333] bg-white antialiased;
        font-family: 'Noto Sans SC', sans-serif;
        line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', 'Noto Serif SC', serif;
    }

    /* Custom Selection Color */
    ::selection {
        background-color: #F0F0F0;
        color: #333333;
    }
}

@layer components {
    /* 导航栏样式 */
    .nav-link {
        @apply relative text-sm tracking-widest uppercase text-gray-800 transition-colors duration-300 hover:text-black;
    }

    .nav-link::after {
        content: '';
        @apply absolute left-0 -bottom-1 w-0 h-[1px] bg-black transition-all duration-300 ease-out;
    }

    .nav-link:hover::after {
        @apply w-full;
    }

    .nav-link.active::after {
        @apply w-full;
    }

    /* 按钮样式 */
    .btn-outline {
        @apply px-8 py-3 border border-[#333333] text-[#333333] text-sm tracking-[0.2em] uppercase transition-all duration-300 hover:bg-[#333333] hover:text-white;
    }

    /* 图片容器样式 */
    .img-zoom-container {
        @apply relative overflow-hidden block;
    }

    .img-zoom-container img {
        @apply transition-transform duration-700 ease-out w-full h-full object-cover;
    }

    .img-zoom-container:hover img {
        transform: scale(1.05);
    }

    .img-overlay {
        @apply absolute inset-0 bg-black/20 opacity-0 transition-opacity duration-500 flex items-center justify-center;
    }

    .img-zoom-container:hover .img-overlay {
        @apply opacity-100;
    }
}

@layer utilities {
    /* 自定义工具类 */
    .text-gold {
        color: #D4AF37;
    }
    
    .bg-gold {
        background-color: #D4AF37;
    }

    .font-serif-sc {
        font-family: 'Noto Serif SC', serif;
    }

    .font-playfair {
        font-family: 'Playfair Display', serif;
    }

    /* 隐藏滚动条但允许滚动 */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 页面淡入动画 */
    .fade-in {
        animation: fadeIn 0.8s ease-out forwards;
        opacity: 0;
    }
    
    .fade-in-delay-1 {
        animation-delay: 0.2s;
    }
    
    .fade-in-delay-2 {
        animation-delay: 0.4s;
    }
    
    .fade-in-delay-3 {
        animation-delay: 0.6s;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 轮播图指示器样式 */
.carousel-dot {
    @apply w-2 h-2 rounded-full bg-white/50 cursor-pointer transition-all duration-300;
}

.carousel-dot.active {
    @apply bg-white w-8;
}