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

/* 
 * 现代极简主义设计风格指南
 * 色调：象牙白、羊绒灰、米杏色 | 字体：无衬线人文体 + 思源黑体
 */

:root {
    --color-ivory: #FDFBF7;       /* 主背景：象牙白 */
    --color-cashmere: #E8E6E1;    /* 辅助背景：羊绒灰 */
    --color-beige: #F2E8DC;       /* 装饰色：米杏色 */
    --color-sand: #C2B280;        /* 强调色：砂岩褐 */
    --color-fog-blue: #B0C4DE;    /* 辅助色：雾霾蓝 */
    --color-charcoal: #2C2C2C;    /* 文字主色：墨黑 */
    --font-heading: 'Optima', 'Futura PT', 'Segoe UI', sans-serif; /* 英文标题 */
    --font-body: 'Source Han Sans CN', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 中文正文 */
}

@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 16px;
    }
    
    body {
        background-color: var(--color-ivory);
        color: var(--color-charcoal);
        font-family: var(--font-body);
        line-height: 1.75;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 300;
        letter-spacing: 0.05em;
        line-height: 1.3;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

@layer components {
    /* 极简导航链接交互 */
    .nav-link {
        position: relative;
        text-decoration: none;
        color: var(--color-charcoal);
        padding-bottom: 4px;
        transition: color 0.3s ease, font-weight 0.3s ease;
        letter-spacing: 0.1em;
        font-size: 0.95rem;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: var(--color-charcoal);
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        opacity: 0.7;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }
    
    /* 激活状态微调 */
    .nav-link.active {
        color: #000;
    }

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

    /* 模态框/侧边栏动画 */
    .slide-in-right {
        animation: slideInRight 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }
    
    .slide-out-right {
        animation: slideOutRight 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }

    /* 页面元素淡入 */
    .fade-in {
        animation: fadeIn 1.2s ease-out forwards;
    }
    
    .fade-in-up {
        animation: fadeInUp 1s ease-out forwards;
        opacity: 0;
    }
    
    /* 图片悬停微动效 (Breathing Effect) */
    .img-hover-scale {
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
        will-change: transform;
    }
    
    .img-hover-scale:hover {
        transform: scale(0.98);
        filter: brightness(0.95);
    }

    /* 视差容器 */
    .parallax-wrapper {
        perspective: 10px;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@layer utilities {
    .bg-ivory { background-color: var(--color-ivory); }
    .bg-cashmere { background-color: var(--color-cashmere); }
    .text-charcoal { color: var(--color-charcoal); }
    .text-sand { color: var(--color-sand); }
    
    .font-optima { font-family: var(--font-heading); }
    
    /* 绝对居中 */
    .center-absolute {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* 文本两端对齐 */
    .text-justify-custom {
        text-align: justify;
        text-justify: inter-ideograph;
    }
}

/* 关键帧动画定义 */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* 响应式调整 */
@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }
    
    .nav-link {
        font-size: 0.85rem;
    }
}