/* 首页 hero ·「森林跑道」3D 社区动画。所有样式都以 .hero--c3d / .c3d- 开头，避免影响站点其它部分 */

.hero.hero--c3d {
  --c3d-ink: #22302a;
  --c3d-muted: #6b7a72;
  --c3d-coral: #f0685a;
  --c3d-green: #35a862;
  --c3d-shadow: 0 10px 30px rgba(35, 60, 45, 0.16), 0 2px 6px rgba(35, 60, 45, 0.08);
  --c3d-glass: color-mix(in srgb, var(--surface) 80%, transparent);
  position: relative;
  isolation: isolate;
  padding: 0;
  background: #cfe0dc;
  overflow: hidden;
}

/* ---------- 舞台 ---------- */
.c3d-stage {
  position: relative;
  height: max(380px, 78vw);
  max-height: 560px;
  overflow: hidden;
  background: linear-gradient(180deg, #d7e6e1 0%, #cfe0dc 55%, #c3cec6 100%);
}

.c3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  transition: opacity 1.2s ease;
}

.c3d-canvas:active { cursor: grabbing; }

.c3d-stage.loading .c3d-canvas,
.c3d-stage.loading .c3d-hud,
.c3d-stage.c3d-failed .c3d-canvas,
.c3d-stage.c3d-failed .c3d-hud,
.c3d-stage.c3d-failed .c3d-loader { opacity: 0; }

/* 3D 无法加载时（不支持 WebGL / 省流量模式）退回静态插画背景 */
.c3d-stage.c3d-failed {
  background: url("../images/lifestyle/hero.jpg") center / cover no-repeat, var(--hero-bg);
}

.c3d-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 238, 205, 0.28), rgba(255, 238, 205, 0) 55%),
    radial-gradient(150% 130% at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(30, 50, 40, 0.2) 100%);
  mix-blend-mode: soft-light;
}

.c3d-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.c3d-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--c3d-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.c3d-stage:not(.loading) .c3d-loader { opacity: 0; }

.c3d-loader .ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(240, 104, 90, 0.18);
  border-top-color: var(--c3d-coral);
  animation: c3d-spin 0.9s linear infinite;
}

@keyframes c3d-spin { to { transform: rotate(360deg); } }

.c3d-perf {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(20, 30, 26, 0.72);
  color: #d8f5e3;
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  pointer-events: none;
  white-space: pre;
  z-index: 3;
}

/* ---------- 气泡（场景里的元素，不跟随站点主题） ---------- */
.c3d-bubbles .bubble {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.c3d-bubbles .bubble .inner {
  position: relative;
  transform: translate(calc(-50% + var(--shift, 0px)), -100%);
}

.c3d-bubbles .bubble .card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 7px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--c3d-ink);
  border-radius: 999px;
  box-shadow: var(--c3d-shadow);
  white-space: nowrap;
  transform-origin: 50% 120%;
  animation: c3d-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.c3d-bubbles .bubble.leaving .card { animation: c3d-pop-out 0.45s ease-in both; }

.c3d-bubbles .bubble .card::after {
  content: "";
  position: absolute;
  left: clamp(18px, calc(50% - var(--shift, 0px)), calc(100% - 18px));
  bottom: -5px;
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, 0.96);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.hero--c3d .av,
.hero--c3d .dot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
}

.hero--c3d .av img,
.hero--c3d .dot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c3d-bubbles .bubble .av {
  width: 30px;
  height: 30px;
  font-size: 14px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.c3d-bubbles .bubble .txt { line-height: 1.25; }
.c3d-bubbles .bubble .txt .l1 { font-size: 13px; }
.c3d-bubbles .bubble .txt .l1 b { font-weight: 700; }
.c3d-bubbles .bubble .txt .l1 em { font-style: normal; font-weight: 800; color: var(--c3d-coral); font-size: 15px; }
.c3d-bubbles .bubble .txt .l2 { font-size: 11.5px; color: var(--c3d-muted); font-variant-numeric: tabular-nums; }

.c3d-bubbles .bubble .badge {
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ffb347, #ff7a59);
}

.c3d-bubbles .bubble.mini .card {
  padding: 4px 10px;
  gap: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--c3d-green);
}

@keyframes c3d-pop-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.55); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes c3d-pop-out {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.9); }
}

/* ---------- HUD（统计、最新同步），跟随站点主题 ---------- */
.c3d-hud {
  position: absolute;
  z-index: 3;
  color: var(--text);
  background: var(--c3d-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--c3d-shadow);
  transition: opacity 1.2s ease 0.4s;
}

.c3d-stats {
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-around;
  padding: 10px 4px;
}

.c3d-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
}

.c3d-stat + .c3d-stat { border-left: 1px solid var(--border); }
.c3d-stat b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.2; }
.c3d-stat:nth-child(2) b { color: var(--c3d-coral); }
.c3d-stat span { font-size: 12px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; }

.c3d-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.c3d-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c3d-green);
  animation: c3d-pulse 1.8s infinite;
}

@keyframes c3d-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 168, 98, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(53, 168, 98, 0); }
}

/* 接口没上线时明确标注为演示数据 */
.c3d-demo-tag { display: none; }
.c3d-stage.c3d-demo .c3d-demo-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(240, 104, 90, 0.14);
  color: var(--c3d-coral);
  font-size: 11px;
  font-weight: 700;
}

.c3d-feed,
.c3d-hint { display: none; }

.c3d-feed {
  right: 24px;
  bottom: 24px;
  width: 280px;
  padding: 12px 16px 8px;
}

.c3d-feed h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.c3d-feed-list { list-style: none; margin: 0; padding: 0; }

.c3d-feed-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  animation: c3d-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.c3d-feed-list li + li { border-top: 1px dashed var(--border); }
.c3d-feed-list .dot { width: 22px; height: 22px; font-size: 11px; }
.c3d-feed-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-feed-list .km { font-weight: 800; color: var(--c3d-coral); font-variant-numeric: tabular-nums; }
.c3d-feed-list .ago { width: 64px; text-align: right; font-size: 11.5px; color: var(--text-muted); }

@keyframes c3d-slide-in {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: none; }
}

.c3d-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--c3d-glass);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- 文案（窄屏在 3D 画面上方） ---------- */
@media (max-width: 899px) {
  .hero.hero--c3d { display: flex; flex-direction: column; }
  .hero--c3d .c3d-copy-wrap { order: -1; }
}

.hero--c3d .hero-copy {
  padding: 2.5rem 0 2rem;
}

.hero--c3d .c3d-copy-wrap {
  background: var(--hero-bg);
}

/* ---------- 宽屏：3D 铺满 hero，文案卡片浮在左侧 ---------- */
@media (min-width: 900px) {
  .hero.hero--c3d {
    min-height: clamp(640px, calc(100vh - 64px), 880px);
  }

  .hero--c3d .c3d-stage {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
    z-index: 0;
  }

  .hero--c3d .c3d-copy-wrap {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    align-items: center;
    background: none;
    pointer-events: none; /* 空白处让给 3D 场景拖动 */
  }

  /* 卡片贴左，左边距与右侧 HUD 的 24px 对齐 */
  .hero--c3d .c3d-copy-wrap > .container {
    max-width: none;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero--c3d .hero-copy {
    pointer-events: auto;
    max-width: 30rem;
    margin: 3rem 0;
    padding: 2.25rem 2.25rem 1.75rem;
    border-radius: 24px;
    background: var(--c3d-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--border);
    box-shadow: var(--c3d-shadow);
  }

  .c3d-stats {
    left: auto;
    right: 24px;
    top: 24px;
    bottom: auto;
    padding: 12px 6px;
  }

  .c3d-stat { min-width: 104px; padding: 0 14px; }
  .c3d-stat b { font-size: 26px; }

  .c3d-feed { display: block; }
  .c3d-hint { display: block; }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .c3d-hint { display: none; }
}