/* ============================================
   水润天地 · 骨架屏/Loading 统一规范 v1.0
   用法：在页面根元素或内容区添加 .skeleton-xxx 类
   加载完成后移除 .skeleton 相关类即可
   ============================================ */

/* ========= 基础动画 ========= */
@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

/* ========= 骨架块基础类 ========= */
.skel {
  background: linear-gradient(
    90deg,
    rgba(26,23,20,0.04) 25%,
    rgba(26,23,20,0.08) 50%,
    rgba(26,23,20,0.04) 75%
  );
  background-size: 400% 100%;
  animation: skeleton-shine 1.8s ease-in-out infinite;
  border-radius: 4px;
}

/* ========= 文字骨架 ========= */
.skel-text {
  height: 0.9em;
  margin-bottom: 0.6em;
  border-radius: 3px;
}
.skel-text.short { width: 40%; }
.skel-text.medium { width: 65%; }
.skel-text.long { width: 100%; }
.skel-text.title {
  height: 1.4em;
  width: 50%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(10,46,31,0.08) 25%, rgba(10,46,31,0.14) 50%, rgba(10,46,31,0.08) 75%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.8s ease-in-out infinite;
}

/* ========= 圆形骨架（头像/图标） ========= */
.skel-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

/* ========= 矩形骨架（图片/卡片封面） ========= */
.skel-rect {
  border-radius: 8px;
}

/* ========= 按钮骨架 ========= */
.skel-btn {
  height: 44px;
  border-radius: 8px;
  width: 120px;
}

/* ========= 卡片骨架 ========= */
.skel-card {
  background: #FFFFFF;
  border: 1px solid rgba(26,23,20,0.04);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skel-card .skel-circle { width: 44px; height: 44px; }
.skel-card .skel-text.title { width: 60%; }
.skel-card .skel-text { width: 100%; }
.skel-card .skel-text.short { width: 30%; }

/* ========= 列表骨架 ========= */
.skel-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skel-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(26,23,20,0.04);
  border-radius: 10px;
}
.skel-list-item .skel-circle { width: 40px; height: 40px; }
.skel-list-item .skel-text-block { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel-list-item .skel-text { margin-bottom: 0; }

/* ========= 商品卡片骨架 ========= */
.skel-product {
  background: #FFFFFF;
  border: 1px solid rgba(26,23,20,0.04);
  border-radius: 12px;
  overflow: hidden;
}
.skel-product .skel-img {
  width: 100%;
  height: 180px;
  border-radius: 0;
}
.skel-product .skel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skel-product .skel-text.title { width: 80%; }
.skel-product .skel-text { width: 100%; }
.skel-product .skel-text.short { width: 40%; }

/* ========= 全页骨架屏容器 ========= */
.skeleton-page {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.skeleton-hero {
  height: 200px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(10,46,31,0.06) 25%, rgba(10,46,31,0.12) 50%, rgba(10,46,31,0.06) 75%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.8s ease-in-out infinite;
}

/* ========= 小程序端专用：页面级骨架 ========= */
.skeleton-shell {
  background: #FAF8F5;
  min-height: 100vh;
  padding: 0;
}
.skeleton-topbar {
  height: 88px;
  background: #0A2E1F;
  display: flex;
  align-items: flex-end;
  padding: 0 20px 14px;
  gap: 14px;
}
.skeleton-topbar .skel-circle { width: 28px; height: 28px; background: rgba(250,248,245,0.15); }
.skeleton-topbar .skel-text { width: 120px; height: 16px; background: rgba(250,248,245,0.15); }

.skeleton-content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========= Loading 动画（品牌定制） ========= */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250,248,245,0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 品牌 Loading：森林绿 + 古铜金双圆脉动 */
.loading-brand {
  position: relative;
  width: 60px;
  height: 60px;
}
.loading-brand::before,
.loading-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.loading-brand::before {
  border-top-color: #0A2E1F;
  border-right-color: #0A2E1F;
  animation: loading-spin 1.0s ease-in-out infinite;
}
.loading-brand::after {
  inset: 8px;
  border-top-color: #D4A843;
  border-left-color: #D4A843;
  animation: loading-spin 1.4s ease-in-out infinite reverse;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: #7A7670;
  letter-spacing: 0.08em;
  font-family: 'PingFang SC', sans-serif;
}

/* ========= 内联 Loading（按钮/卡片内） ========= */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #7A7670;
  letter-spacing: 0.04em;
}
.loading-dot {
  width: 5px;
  height: 5px;
  background: #D4A843;
  border-radius: 50%;
  animation: loading-dot 1.2s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.15s; }
.loading-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes loading-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%             { opacity: 1; transform: scale(1.1); }
}

/* ========= 页面过渡（淡入） ========= */
.page-fade-in {
  animation: pageFadeIn 0.6s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========= 使用示例注释（不渲染） ========= */
/*
  HTML 使用示例：

  1. 卡片骨架：
  <div class="skel-card">
    <div class="skel-circle"></div>
    <div class="skel-text title"></div>
    <div class="skel-text long"></div>
    <div class="skel-text medium"></div>
  </div>

  2. 列表骨架：
  <div class="skel-list">
    <div class="skel-list-item">
      <div class="skel-circle"></div>
      <div class="skel-text-block">
        <div class="skel-text title"></div>
        <div class="skel-text short"></div>
      </div>
    </div>
    ...重复...
  </div>

  3. 商品骨架：
  <div class="skel-product">
    <div class="skel-img skel"></div>
    <div class="skel-body">
      <div class="skel-text title"></div>
      <div class="skel-text"></div>
      <div class="skel-text short"></div>
    </div>
  </div>

  4. 全页骨架：
  <div class="skeleton-shell">
    <div class="skeleton-topbar">
      <div class="skel-circle skel"></div>
      <div class="skel-text skel"></div>
    </div>
    <div class="skeleton-content">
      <div class="skeleton-hero skel"></div>
      <div class="skel-list">
        <div class="skel-list-item">
          <div class="skel-circle skel"></div>
          <div class="skel-text-block">
            <div class="skel-text skel"></div>
            <div class="skel-text short skel"></div>
          </div>
        </div>
        ...重复3次...
      </div>
    </div>
  </div>

  5. Loading 覆盖层：
  <div class="loading-overlay" id="loading">
    <div class="loading-brand"></div>
    <div class="loading-text">加载中...</div>
  </div>
  <script>
    // 加载完成后
    setTimeout(() => {
      document.getElementById('loading').classList.add('hidden');
    }, 1200);
  </script>

  6. 内联 Loading（按钮）：
  <button class="form-btn form-btn-primary">
    <span class="loading-inline">
      <span class="loading-dot"></span>
      <span class="loading-dot"></span>
      <span class="loading-dot"></span>
    </span>
    处理中
  </button>
*/