/* 
 * 极简时尚展示网站全局样式
 * 遵循现代极简设计原则，核心字体栈优化及高性能动画实现
 */

/* 字体优化：优先使用系统级无衬线字体，确保在中西文环境下的渲染一致性 */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* macOS 字体平滑 */
    -moz-osx-font-smoothing: grayscale;
    background-color: #FAFAFA; /* 柔和的米白/浅灰基调，避免纯白刺眼 */
    color: #171717; /* 接近黑色的深灰，提升阅读体验 */
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* 
 * 页面过渡动画系统
 * 使用 cubic-bezier 曲线实现优雅自然的淡入上浮效果
 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 
 * 图片交互系统 
 * 统一处理图片的容器裁剪与悬停缩放逻辑
 */
.aspect-ratio-box {
    overflow: hidden;
    position: relative;
    background-color: #E5E5E5; /* 图片加载占位色，减少视觉跳动 */
}

.img-zoom {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 慢速平滑过渡 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform; /* 性能优化：提示浏览器提前栅格化 */
}

/* 仅在非触摸设备上启用 hover 效果，避免移动端误触 */
@media (hover: hover) {
    .aspect-ratio-box:hover .img-zoom {
        transform: scale(1.04); /* 微妙的缩放，不突兀 */
    }
}

/* 
 * 极简滚动条设计
 * 隐藏默认粗笨滚动条，适配整体高级感
 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D4D4D4;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A3A3A3;
}

/* 
 * 文字排版辅助类
 * 增强可读性与艺术感
 */
.text-balance {
    text-wrap: balance; /* 标题每行长度均衡 */
}

/* 链接交互状态 */
a {
    transition: opacity 0.3s ease;
}
a:hover {
    opacity: 0.6;
}

/* 
 * 核心布局辅助
 * 确保内容始终居中且有最大宽度限制
 */
.container-custom {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .container-custom {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}