/* Tailwind CSS Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Noto Sans SC', 'Helvetica', 'Arial', sans-serif;
  }
}

@layer components {
  /* 图片悬停效果 */
  .image-hover-scale {
    @apply overflow-hidden transition-transform duration-300 ease-in-out;
  }

  .image-hover-scale img {
    @apply transform hover:scale-105 transition-transform duration-300 ease-in-out;
  }

  /* 页面切换动画 */
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* 轮播图指示器 */
  .carousel-indicator {
    @apply w-2 h-2 rounded-full bg-white opacity-50 mx-1 transition-opacity duration-300;
  }

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

  /* 导航栏样式 */
  .navbar-fixed {
    @apply fixed top-0 left-0 right-0 z-50 bg-white bg-opacity-95 backdrop-blur-sm border-b border-gray-200;
  }

  /* 系列卡片 */
  .collection-card {
    @apply bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer;
  }

  /* 筛选按钮 */
  .filter-btn {
    @apply px-6 py-2 text-sm font-light tracking-wider border border-gray-300 rounded-full transition-all duration-300;
  }

  .filter-btn:hover {
    @apply bg-black text-white border-transparent;
  }

  .filter-btn.active {
    @apply bg-black text-white border-transparent;
  }

  /* 型录网格 */
  .lookbook-grid {
    @apply grid gap-4;
  }

  .lookbook-item {
    @apply overflow-hidden rounded-lg;
  }

  .lookbook-item img {
    @apply w-full h-full object-cover transition-transform duration-300 hover:scale-105;
  }

  /* 关于页面样式 */
  .about-content {
    @apply flex items-center min-h-screen;
  }

  .about-image {
    @apply w-1/2 pr-12;
  }

  .about-text {
    @apply w-1/2 pl-12;
  }

  /* 页脚样式 */
  .footer {
    @apply py-8 text-center text-gray-500 text-sm border-t border-gray-200;
  }

  /* 响应式布局 */
  @media (max-width: 768px) {
    .about-content {
      @apply flex-col px-6;
    }

    .about-image,
    .about-text {
      @apply w-full px-0 py-6;
    }
  }

  /* 遮罩层效果 */
  .overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition-all duration-300 flex items-center justify-center;
  }

  /* 加载动画 */
  .loading {
    @apply animate-pulse;
  }
}