/* 
 * 极简时尚女装网站主样式表 
 * 遵循现代极简主义设计原则：大留白、网格对齐、柔和交互
 */

/* =========================================
   1. 基础变量与排版 (Typography & Colors)
   ========================================= */
:root {
    /* 核心色彩系统 */
    --color-ivory: #FDFBF7;       /* 象牙白 - 页面背景 */
    --color-sandstone: #E8E4DF;   /* 砂岩灰 - 次级背景 */
    --color-fog-gray: #D1D5DB;    /* 雾霾灰 - 边框与分割线 */
    --color-clay-pink: #E3C4B8;   /* 陶土粉 - 点缀 */
    --color-sage-green: #B8C9C1;  /* 灰绿色 - 点缀 */
    
    /* 文字颜色 */
    --text-primary: #1F1F1F;      /* 接近纯黑的深灰，柔和视觉 */
    --text-secondary: #6B7280;    /* 次级文字 */
    --text-muted: #9CA3AF;        /* 辅助文字 */

    /* 字体栈 - 优先使用系统非衬线字体 */
    --font-sans: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

/* 全局重置与基础样式 */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-ivory);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden; /* 防止水平溢出 */
    margin: 0;
}

/* 覆盖 Pico CSS 默认过于强烈的样式，回归极简 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* 标题中等字重 */
    color: var(--text-primary);
    margin-bottom: 0.75em;
    letter-spacing: -0.02em;
}

p {
    font-weight: 300; /* 正文纤细字重 */
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
    background-color: transparent;
}

a:hover {
    opacity: 0.7;
}

/* 禁止 Pico 的按钮默认样式干扰链接 */
a[role="button"], button {
    border: none;
    outline: none;
    box-shadow: none;
}

/* =========================================
   2. 交互组件 (Interactive Components)
   ========================================= */

/* 导航栏：透明背景 + 下划线动画 */
.nav-container {
    background-color: rgba(253, 251, 247, 0.9);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.nav-link {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
}

/* 悬停时菜单项下方出现细线（宽度从0%至100%平滑延伸） */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--text-primary);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active::after {
    width: 100%; /* 当前页面高亮 */
}

/* 极简按钮：仅文字 + 箭头 */
.link-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-primary);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.link-arrow:hover {
    border-bottom-color: var(--text-primary);
    opacity: 1;
    padding-right: 5px; /* 细微位移 */
}

/* =========================================
   3. 视觉模块 (Visual Modules)
   ========================================= */

/* 首页：全屏轮播图 */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* 柔和淡入淡出 */
    z-index: 1;
}

.slide-item.active {
    opacity: 1;
    z-index: 2;
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 图片容器通用样式：悬停柔和缩放 + 浅色叠加 */
.img-frame {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    display: block;
}

/* 浅色叠加层 */
.img-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.6s ease;
    pointer-events: none;
    z-index: 10;
}

.img-frame:hover img {
    transform: scale(1.05); /* 缓慢缩放 */
}

.img-frame:hover::after {
    background-color: rgba(255, 255, 255, 0.15); /* 浅色叠加 */
}

/* 瀑布流布局辅助 (Collections Page) */
.masonry-grid {
    column-count: 1;
    column-gap: 16px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}

/* =========================================
   4. 特殊页面：灵感深处 (Inspiration Page)
   ========================================= */

/* 视差滚动容器 */
.inspiration-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

/* 左侧固定文字区 */
.inspiration-text-panel {
    width: 100%;
    background-color: var(--color-ivory);
    padding: 60px 20px;
    z-index: 20;
    position: relative;
}

/* 右侧视差区 */
.inspiration-visual-panel {
    width: 100%;
    position: relative;
    min-height: 60vh;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .inspiration-text-panel {
        width: 40%;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 5%;
    }

    .inspiration-visual-panel {
        width: 60%;
        min-height: 250vh; /* 增加高度以支持滚动 */
    }

    /* 背景固定图 */
    .parallax-bg {
        position: fixed;
        top: 0;
        right: 0;
        width: 60%;
        height: 100vh;
        background-size: cover;
        background-position: center;
        z-index: 1;
        opacity: 0.15; /* 纸张纤维纹理淡化 */
        pointer-events: none;
    }
    
    .scroll-content {
        position: relative;
        z-index: 10;
        padding-top: 20vh;
        padding-bottom: 20vh;
    }
}

/* =========================================
   5. 实用工具 (Utilities)
   ========================================= */

.text-balance {
    text-wrap: balance;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 移动端抽屉菜单过渡 */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

#mobile-menu.hidden {
    pointer-events: none;
}