/* ============================================
   Youayou Web - 公共样式
   复刻小程序配色和样式
   ============================================ */

/* CSS 变量 - 复刻小程序配色 */
:root {
  /* 主色调 */
  --color-primary: #33342F;
  --color-primary-light: #4a4b45;
  --color-background: #FFFAE6;
  --color-background-dark: #BFB6A7;
  
  /* 文字颜色 */
  --color-text-primary: #33342F;
  --color-text-secondary: rgba(51, 52, 47, 0.7);
  --color-text-tertiary: rgba(51, 52, 47, 0.5);
  --color-text-white: #FFFAE6;
  
  /* 边框和分割线 */
  --color-border: rgba(51, 52, 47, 0.1);
  --color-divider: rgba(51, 52, 47, 0.08);
  
  /* 功能色 */
  --color-gold: #FFD700;
  --color-silver: #C0C0C0;
  --color-bronze: #CD7F32;
  --color-burgundy: #800020;
  
  /* 阴影 */
  --shadow-card: 0 2rpx 8rpx rgba(51, 52, 47, 0.08);
  --shadow-float: 0 8rpx 24rpx rgba(51, 52, 47, 0.3);
  
  /* 尺寸 - 1rpx = 0.5px (小程序 750rpx = 屏幕宽度) */
  --nav-height: 44px;
  --tabbar-height: 50px;
  --safe-area-bottom: env(safe-area-inset-bottom);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #BFB6A7 0%, #CFCEB6 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
  padding-bottom: calc(var(--tabbar-height) + var(--safe-area-bottom));
}

/* 隐藏滚动条但保留滚动功能 */
::-webkit-scrollbar {
  display: none;
}

/* 通用容器 */
.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 12px 16px;
}

/* 卡片样式 - 复刻小程序卡片 */
.card {
  background: var(--color-background);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.card-dark {
  background: var(--color-primary);
  color: var(--color-text-white);
}

/* 文字工具类 */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-white {
  color: var(--color-text-white);
}

/* 字体大小 */
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }

/* 字体粗细 */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Flex 布局 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

/* 间距 */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* 固定定位元素 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* 加载动画 */
@keyframes skeleton-loading {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite;
  background: rgba(255, 250, 230, 0.5);
}

/* 点击效果 - 只对特定元素生效，避免全局闪动 */
.btn-feedback:active,
button:active {
  opacity: 0.8;
}

/* 禁用选择 */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================
   页面过渡动画 - 解决白屏闪烁问题
   ============================================ */

/* 页面内容包装器 */
.page-content-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content-wrapper.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* 骨架屏淡出效果 */
.skeleton-container {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.skeleton-container.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* 页面切换遮罩 */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #BFB6A7 0%, #CFCEB6 100%);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.page-transition-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* 页面加载进度条 */
.page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  z-index: 10000;
  width: 0;
  transition: width 0.3s ease;
}

.page-loading-bar.active {
  width: 70%;
  transition: width 0.5s ease;
}

.page-loading-bar.complete {
  width: 100%;
  transition: width 0.2s ease;
}

.page-loading-bar.hidden {
  opacity: 0;
  transition: opacity 0.3s ease, width 0.2s ease;
}

/* 页面进入动画 */
@keyframes pageSlideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageSlideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.page-animate-in {
  animation: pageSlideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-animate-in-right {
  animation: pageSlideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-animate-fade {
  animation: pageFadeIn 0.4s ease forwards;
}

/* 卡片交错动画 */
@keyframes cardStaggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-animate {
  opacity: 0;
  animation: cardStaggerIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.card-animate:nth-child(1) { animation-delay: 0.05s; }
.card-animate:nth-child(2) { animation-delay: 0.1s; }
.card-animate:nth-child(3) { animation-delay: 0.15s; }
.card-animate:nth-child(4) { animation-delay: 0.2s; }
.card-animate:nth-child(5) { animation-delay: 0.25s; }
.card-animate:nth-child(6) { animation-delay: 0.3s; }

/* 按钮点击反馈 */
.btn-feedback {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-feedback:active {
  transform: scale(0.96);
  opacity: 0.8;
}

/* 链接悬停效果 */
a, .link {
  transition: opacity 0.2s ease;
}

a:hover, .link:hover {
  opacity: 0.8;
}

/* 图片懒加载占位 */
.img-lazy {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.img-lazy.loaded {
  animation: none;
  background: none;
}