/* 全局样式文件 - 时尚女装展示网站 */

/* 自定义Tailwind配置 */
@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-[#f8f9fa] text-[#2c3e50] font-sans antialiased;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  }
}

/* 字体定义 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

.font-playfair {
  font-family: 'Playfair Display', serif;
}

/* 页面过渡动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* 导航样式 */
.nav-link {
  @apply relative px-4 py-2 text-[#2c3e50] transition-all duration-300;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-[#d4af37] transition-all duration-300;
}

.nav-link:hover::after,
.nav-link.active::after {
  @apply w-full;
}

/* 轮播图样式 */
.carousel-container {
  @apply relative w-full h-screen overflow-hidden;
}

.carousel-slide {
  @apply absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out;
}

.carousel-slide.active {
  @apply opacity-100;
}

.carousel-slide img {
  @apply w-full h-full object-cover;
}

/* 图片悬停效果 */
.image-hover {
  @apply overflow-hidden transition-transform duration-500;
}

.image-hover img {
  @apply w-full h-full object-cover transition-transform duration-500;
}

.image-hover:hover img {
  @apply scale-105;
}

/* 瀑布流网格布局 */
.masonry-grid {
  @apply grid gap-6;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (min-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

/* 图片卡片样式 */
.image-card {
  @apply relative overflow-hidden rounded-lg shadow-lg bg-white;
}

.image-card-overlay {
  @apply absolute inset-0 bg-black bg-opacity-0 transition-all duration-300 flex items-end p-6;
}

.image-card:hover .image-card-overlay {
  @apply bg-opacity-40;
}

.image-card-text {
  @apply text-white transform translate-y-8 opacity-0 transition-all duration-300;
}

.image-card:hover .image-card-text {
  @apply translate-y-0 opacity-100;
}

/* Lightbox模态框样式 */
.lightbox {
  @apply fixed inset-0 bg-black bg-opacity-95 z-50 hidden items-center justify-center p-4;
}

.lightbox.active {
  @apply flex;
}

.lightbox-content {
  @apply relative max-w-6xl max-h-screen;
}

.lightbox-image {
  @apply max-w-full max-h-screen object-contain;
}

.lightbox-close {
  @apply absolute top-4 right-4 text-white text-4xl cursor-pointer hover:text-[#d4af37] transition-colors;
}

/* 系列预览卡片 */
.preview-card {
  @apply relative h-96 overflow-hidden rounded-lg shadow-xl cursor-pointer;
}

.preview-card-image {
  @apply w-full h-full object-cover transition-transform duration-700;
}

.preview-card:hover .preview-card-image {
  @apply scale-110;
}

.preview-card-title {
  @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-3xl font-playfair font-semibold;
}

/* 细节展示网格 */
.detail-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

.detail-card {
  @apply bg-white rounded-lg overflow-hidden shadow-lg;
}

.detail-card-image {
  @apply w-full h-80 object-cover;
}

.detail-card-content {
  @apply p-6;
}

/* 穿搭组合卡片 */
.styling-group {
  @apply mb-12 fade-in;
}

.styling-images {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6;
}

/* 页脚样式 */
.footer {
  @apply text-center py-8 text-[#2c3e50] text-sm border-t border-gray-200 mt-20;
}

/* 加载动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  @apply w-12 h-12 border-4 border-[#f8f9fa] border-t-[#d4af37] rounded-full;
  animation: spin 1s linear infinite;
}

/* 响应式断点优化 */
@media (max-width: 768px) {
  .carousel-slide img {
    @apply object-cover object-center;
  }
  
  .preview-card {
    @apply h-64;
  }
  
  .preview-card-title {
    @apply text-2xl;
  }
}

/* 图片懒加载占位 */
.lazy-loading {
  @apply bg-gray-200 animate-pulse;
}

/* 标题装饰线 */
.section-title {
  @apply relative text-center text-4xl font-playfair font-semibold mb-12 text-[#2c3e50];
}

.section-title::after {
  content: '';
  @apply absolute left-1/2 -translate-x-1/2 bottom-0 w-24 h-1 bg-[#d4af37];
}

/* 无障碍优化 */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-[#f8f9fa];
}

::-webkit-scrollbar-thumb {
  @apply bg-[#d4af37] rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-[#c49b2f];
}