/* 
 * Fashion Showcase - Custom Styles
 * 遵循极简主义，主要样式依赖 Tailwind CSS
 */

/* 引入字体：思源黑体 & Inter */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');

/* 全局基础设置 */
:root {
  --color-accent: #8b7355;
  --color-text: #2c2c2c;
  --color-bg: #f9f7f5;
}

body {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 文本选重颜色 */
::selection {
  background-color: var(--color-accent);
  color: #fff;
}

/* 实用工具：隐藏滚动条但保留功能 (用于横向滚动区域) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 动效：淡入上浮 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0; /* 初始隐藏 */
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 轮播图淡入淡出效果 */
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 0;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 10;
}

/* 细节页放大镜 */
.magnifier-lens {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(139, 115, 85, 0.3); /* 强调色边框 */
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  cursor: none;
  display: none; /* 默认隐藏 */
  z-index: 50;
  pointer-events: none; /* 让鼠标事件穿透 */
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 图片悬停发光遮罩 */
.hover-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.group:hover .hover-overlay {
    opacity: 1;
}

/* 导航链接激活态下划线动画 */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

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