/* fashion-women-style-280415/frontend/public/styles.css */

/* 引入高端衬线与无衬线字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

/* 全局变量 */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Noto Serif SC', 'Times New Roman', serif;
    --color-bg: #FAFAFA; /* 极简米白 */
    --color-text-main: #1A1A1A; /* 深灰黑 */
    --color-text-muted: #666666; /* 优雅灰 */
    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 基础重置与排版 */
body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

h1, h2, h3, h4, .font-serif {
    font-family: var(--font-serif);
    font-weight: 400;
}

/* 导航栏玻璃态效果 */
.glass-nav {
    background: rgba(250, 250, 250, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
}

/* 隐藏滚动条但保留滚动功能 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 图片悬停微动效 - 极度平滑 */
.img-hover-scale {
    overflow: hidden;
    display: block;
}
.img-hover-scale img {
    transition: transform 1.2s var(--transition-smooth), opacity 0.5s ease;
    will-change: transform;
}
.img-hover-scale:hover img {
    transform: scale(1.03); /* 克制的放大，保持高级感 */
}

/* 链接下划线动画 */
.link-hover {
    position: relative;
    text-decoration: none;
    color: inherit;
}
.link-hover::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.link-hover:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* 页面淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-enter {
    animation: fadeIn 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* 文本选择颜色 */
::selection {
    background: #E5E5E5;
    color: #000;
}

/* 瀑布流布局辅助 */
.masonry-grid {
    column-count: 1;
    column-gap: 2rem;
}
@media (min-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}
@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 2rem;
}

/* 视差容器 */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}