/* 导入字体：Inter用于正文，Playfair Display用于标题，营造时尚高级感 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局基础样式 */
:root {
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: 'Inter', sans-serif;
  @apply bg-stone-50 text-stone-800 antialiased selection:bg-stone-200;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* 极简滚动条 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-stone-300 rounded-full hover:bg-stone-400 transition-colors;
}

/* 导航栏动态效果 */
.nav-transparent {
  background: transparent;
  box-shadow: none;
}
.nav-scrolled {
  @apply bg-white/95 backdrop-blur-md shadow-sm;
}

/* 轮播图核心样式 */
.carousel-slide {
  @apply absolute inset-0 w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out opacity-0;
  z-index: 0;
}
.carousel-slide.active {
  @apply opacity-100;
  z-index: 10;
}
/* 轮播指示器 */
.carousel-dot {
  @apply w-2 h-2 rounded-full bg-white/50 cursor-pointer transition-all duration-300;
}
.carousel-dot.active {
  @apply bg-white scale-125;
}

/* 滚动淡入动画 */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 视觉交互：图片悬停微放大 */
.img-hover-zoom {
  @apply overflow-hidden block;
}
.img-hover-zoom img {
  @apply transition-transform duration-700 ease-out;
}
.img-hover-zoom:hover img {
  transform: scale(1.05);
}

/* 模态框过渡 */
.modal-backdrop {
  @apply fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300;
}
.modal-backdrop.open {
  @apply opacity-100 pointer-events-auto;
}
.modal-content {
  @apply transform scale-95 transition-transform duration-300 opacity-0;
}
.modal-backdrop.open .modal-content {
  @apply scale-100 opacity-100;
}

/* 极简按钮悬停效果 */
.btn-minimal {
  @apply relative overflow-hidden;
}
.btn-minimal::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-[1px] bg-current transition-all duration-300;
}
.btn-minimal:hover::after {
  @apply w-full;
}

/* 文本选择优化 */
::selection {
  @apply bg-stone-200 text-stone-900;
}