/* 自定义样式 - 补充Tailwind CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 毛玻璃效果 */
.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 200, 200, 0.18);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* 文字阴影 */
.text-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 悬停上升效果 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.08);
}

/* 隐藏滚动条 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 导航栏阴影 */
.nav-shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 内容自动可见性 */
.content-auto {
  content-visibility: auto;
}

/* 自定义颜色变量 */
:root {
  --primary: #FF3B80;
  --secondary: #FFD1DC;
  --light: #FFFFFF;
  --dark: #333333;
}

/* 确保页面在小屏幕上不会水平滚动 */
body {
  overflow-x: hidden;
}

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

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover {
    transform: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  }
}

/* 安全区域适配 - iOS刘海屏支持 */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  
  .safe-area-left {
    padding-left: max(16px, env(safe-area-inset-left));
  }
  
  .safe-area-right {
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

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

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

/* 移动端播放器样式增强 */
.player-btn-active {
  background-color: var(--primary);
  transform: scale(1.05);
}

/* 响应式字体大小 */
.responsive-text {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.responsive-title {
  font-size: clamp(1.125rem, 4vw, 1.5rem);
}

.responsive-heading {
  font-size: clamp(1.5rem, 6vw, 2rem);
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .glass {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.3);
  }
  
  .text-shadow {
    text-shadow: none;
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .fade-in,
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 暗色模式准备（虽然当前使用白色主题） */
@media (prefers-color-scheme: dark) {
  /* 如果需要暗色模式，可以在这里添加样式 */
}

/* 打印样式 */
@media print {
  .glass {
    background: white;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .hover-lift {
    transform: none;
    box-shadow: none;
  }
  
  .fixed {
    position: static;
  }
}

/* 确保图片加载优化 */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* WebKit滚动条样式（如果需要显示） */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #e6356f;
}