/* ============================================================
   李磨来咖啡 · 动态组件增强层 (NOWWA 风格)
   GSAP + ScrollTrigger + Lenis + Swiper
   该层叠加在 style.css 之上，仅引入动态行为，不改动既有布局令牌。
   ============================================================ */

/* ---------- 0. 平滑滚动 (Lenis) ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 1. Hero 视差背景层 ---------- */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute;
  left: 0; right: 0;
  top: -20%; height: 140%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; }

/* ---------- 2. 品牌故事图片视差 ---------- */
.split-media { overflow: hidden; }
.split-media img { will-change: transform; transform: scale(1.15); }

/* ---------- 3. 数字滚动计数 ---------- */
.stats-band {
  background: var(--color-bg-dark);
  color: #fff;
  padding: var(--space-2xl) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.stat-number {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat-number .count-num { display: inline-block; }
.stat-label {
  font-size: .95rem;
  color: rgba(255, 255, 255, .68);
  letter-spacing: .04em;
}
.stats-band .section-head { color: #fff; margin-bottom: var(--space-lg); }
.stats-band .section-kicker { color: var(--color-accent); }

/* ---------- 4. 横向滚动展示 (吸顶 pinned) ---------- */
.horizontal-scroll {
  background: var(--color-bg-dark);
  color: #fff;
}
.h-pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) 0;
  overflow: hidden;
}
.h-head { margin-bottom: var(--space-lg); }
.horizontal-scroll .section-kicker { color: var(--color-accent); }
.horizontal-scroll .section-title { color: #fff; }
.horizontal-scroll .section-lead { color: rgba(255, 255, 255, .68); }

.h-track {
  display: flex;
  gap: var(--space-lg);
  padding: 0 max(var(--space-lg), calc((100vw - var(--maxw)) / 2));
  will-change: transform;
  overflow-x: auto;
  scrollbar-width: none;
}
.h-track::-webkit-scrollbar { display: none; }
.h-panel {
  flex: 0 0 clamp(280px, 82vw, 440px);
  background: var(--color-bg-card);
  color: var(--color-text-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.h-panel .card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.h-panel .card-media img { width: 100%; height: 100%; object-fit: cover; }
.h-panel .card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: .5rem; }
.h-panel h3 { font-size: 1.15rem; }
.h-panel .card-desc { color: var(--color-text-muted); font-size: .92rem; }
.h-panel .case-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.h-panel .case-customer { color: var(--color-text-muted); font-size: .85rem; }

/* 桌面端：JS 接管为吸顶横滚 */
.horizontal-scroll.h-pinned .h-track { overflow: visible; }

/* 移动端 / 无 JS 回退：原生横向滑动 */
@media (max-width: 899px) {
  .h-pin { min-height: 0; padding: var(--space-xl) 0; }
  .h-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .h-track::-webkit-scrollbar { display: none; }
  .h-panel { scroll-snap-align: center; flex-basis: 82vw; }
}

/* ---------- 5. 文字逐字渐显 ---------- */
.js-split { overflow: hidden; padding-bottom: .08em; }
.js-split .char { display: inline-block; will-change: transform; }

/* ---------- 6. Swiper 轮播 ---------- */
.courses-swiper {
  padding-bottom: 3rem;
  overflow: hidden;
}
.courses-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.courses-swiper .swiper-slide > .card {
  width: 100%;
  margin: 0;
}
.swiper-pagination { position: static; margin-top: 1.5rem; }
.swiper-pagination-bullet { background: var(--color-primary); opacity: .3; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary); }
.swiper-button-next,
.swiper-button-prev { color: var(--color-primary); }
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 1.4rem; font-weight: 700; }

/* ---------- 7. 减少动态偏好降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { top: 0; height: 100%; transform: none !important; }
  .split-media img { transform: none; }
  .js-split .char { transform: none !important; opacity: 1 !important; }
  .stat-number { opacity: 1 !important; }
}