/* ============================================================
   雾森景观园林主题氛围样式（v3）
   雾气流动动效 + 高端细节
   ============================================================ */

/* ---------- 首页轮播：流动雾气层 ---------- */
.mist-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.mist-layer span {
  position: absolute;
  width: 55%;
  height: 130px;
  border-radius: 50%;
  filter: blur(70px);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .30), transparent 70%);
  opacity: .8;
}
.mist-layer .m1 { bottom: 8%; left: -25%; animation: mistDrift 24s ease-in-out infinite alternate; }
.mist-layer .m2 { bottom: 20%; right: -30%; animation: mistDrift 30s ease-in-out infinite alternate-reverse; }
.mist-layer .m3 { bottom: 34%; left: 12%; width: 38%; height: 100px; animation: mistDrift 18s ease-in-out infinite alternate; }
.mist-layer .m4 { bottom: 44%; right: 8%; width: 30%; height: 90px; opacity: .55; animation: mistDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes mistDrift {
  from { transform: translateX(0) translateY(0); }
  to { transform: translateX(140px) translateY(-18px); }
}

/* ---------- 首页标题高级感 ---------- */
.slide-content h1, .slide-content h2.slide-title {
  letter-spacing: .04em;
  font-weight: 800;
}
.slide-content .hero-badge {
  letter-spacing: .14em;
}
.slide-sub {
  letter-spacing: .02em;
  opacity: .95;
}

/* ---------- 区块标题：雾线装饰 ---------- */
.section-head .eyebrow {
  letter-spacing: .3em;
}
.section-head h2 {
  position: relative;
  padding-bottom: 16px;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;
  height: 10px;
  background:
    radial-gradient(ellipse at center, rgba(20, 184, 166, .28), transparent 70%) no-repeat center,
    linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 100% 100%, 100% 2px;
  background-position: center bottom, center 8px;
  opacity: .8;
}
.section--deep .section-head h2::after {
  background:
    radial-gradient(ellipse at center, rgba(126, 224, 207, .25), transparent 70%) no-repeat center,
    linear-gradient(90deg, transparent, #7ee0cf, transparent);
  background-size: 100% 100%, 100% 2px;
  background-position: center bottom, center 8px;
}

/* ---------- 按钮微光 ---------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: btnSheen 3.6s ease-in-out infinite;
}
@keyframes btnSheen {
  0%, 60% { left: -40%; }
  100% { left: 130%; }
}

/* ---------- 产品卡片：雾角装饰 ---------- */
.product-card .body {
  position: relative;
}
.product-card .body::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(20, 184, 166, .08), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---------- 区块间雾化过渡 ---------- */
.fog-divider {
  height: 90px;
  margin-top: -90px;
  position: relative;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-soft) 85%);
}
.fog-divider--white {
  background: linear-gradient(180deg, transparent, #fff 85%);
}

/* ---------- 案例卡片：hover 雾升效果 ---------- */
.scene:hover .case-badge {
  background: rgba(7, 44, 34, .9);
}

/* ---------- 页脚雾光 ---------- */
.footer {
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -15%;
  width: 60%;
  height: 160px;
  background: radial-gradient(ellipse at center, rgba(20, 184, 166, .14), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 560px) {
  .mist-layer span { height: 90px; }
  .section-head h2::after { width: 90px; }
}