/* Custom Styles for Fashion Contour - 极简风尚自定义样式 */

/* 定义CSS变量 - 色彩与过渡 */
:root {
  --color-dark: #333333;
  --color-sand: #F8F5F2;
  --color-clay: #A05941;
  --color-haze: #6B8FA2;
  --transition-smooth: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 基础设置 */
body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  background-color: var(--color-sand);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 排版微调 */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

.font-serif-custom {
    font-family: 'Times New Roman', serif; /* 用于强调的衬线体 */
}

/* 滚动触发动画实用类 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 动画延迟类 */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* 图片悬停缩放效果 */
.img-hover-zoom {
  overflow: hidden;
  position: relative;
}

.img-hover-zoom img {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-hover-zoom:hover img {
  transform: scale(1.05);
}

/* 遮罩层效果 */
.hover-overlay {
  background: rgba(51, 51, 51, 0.3);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

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

/* 极简滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-sand);
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-dark);
}

/* 页面加载遮罩 */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-sand);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 虚拟造型板拖拽区域 */
.drop-zone {
  border: 1px dashed #d1d5db;
  transition: all 0.3s ease;
}

.drop-zone.drag-over {
  border-color: var(--color-dark);
  background-color: rgba(51, 51, 51, 0.03);
  transform: scale(1.01);
}

.draggable-item {
    cursor: grab;
    transition: transform 0.2s;
}
.draggable-item:active {
    cursor: grabbing;
    transform: scale(0.95);
}

/* 细节页面网格修正 */
.details-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .details-grid .text-content {
        order: 1;
    }
    .details-grid .image-content {
        order: 2;
    }
    /* 棋盘格布局 */
    .details-grid:nth-child(even) .text-content {
        order: 2;
    }
    .details-grid:nth-child(even) .image-content {
        order: 1;
    }
}