/* ==========================================================================
   框架 31 森林晨雾 (Forest Morning Mist) & 3D 视觉升级专有样式
   晨雾轻轻飘动 · 纯净白+青(White + Cyan) · 立体高明度空间美学
   ========================================================================== */

/* 森林晨雾粒子与水汽飘动图层 */
.mist-ambient-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mist-wave {
  position: absolute;
  width: 200%;
  height: 280px;
  background: radial-gradient(ellipse at 50% 50%, rgba(204, 251, 241, 0.6), transparent 70%);
  opacity: 0.7;
  filter: blur(45px);
  will-change: transform;
}

.mist-wave-1 {
  top: 15%;
  left: -40%;
  animation: mistFlow 28s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.mist-wave-2 {
  top: 45%;
  right: -30%;
  animation: mistFlowReverse 36s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.mist-wave-3 {
  bottom: 10%;
  left: -20%;
  animation: mistFlow 42s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

@keyframes mistFlow {
  0% { transform: translateX(0) translateY(0) scaleY(1); }
  50% { transform: translateX(8%) translateY(-15px) scaleY(1.15); }
  100% { transform: translateX(18%) translateY(10px) scaleY(0.95); }
}

@keyframes mistFlowReverse {
  0% { transform: translateX(0) translateY(0) scaleY(1); }
  50% { transform: translateX(-12%) translateY(20px) scaleY(1.1); }
  100% { transform: translateX(-24%) translateY(-12px) scaleY(1); }
}

/* 3D 悬浮微粒（清晨晶莹露珠与光子） */
.dew-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(45, 212, 191, 0.8) 50%, rgba(13, 148, 136, 0) 100%);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
  pointer-events: none;
  opacity: 0.65;
}

/* 3D 卡片高光追光层 (白+青 轻透光影) */
.pricing-card-3d, .feature-card-3d, .article-card {
  position: relative;
}

.glow-overlay-3d {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(45, 212, 191, 0.12), transparent 80%);
  opacity: 0;
  transition: opacity 0.3s;
}

.pricing-card-3d:hover .glow-overlay-3d,
.feature-card-3d:hover .glow-overlay-3d,
.article-card:hover .glow-overlay-3d {
  opacity: 1;
}

/* 森林远景微影 (白+青极简淡彩) */
.forest-tree-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;
  background-image: 
    radial-gradient(ellipse 200px 140px at 15% 100%, rgba(13, 148, 136, 0.06) 0%, transparent 75%),
    radial-gradient(ellipse 260px 180px at 85% 100%, rgba(13, 148, 136, 0.05) 0%, transparent 75%),
    radial-gradient(ellipse 350px 160px at 50% 100%, rgba(20, 184, 166, 0.04) 0%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* 3D 浮动叶片微交互 */
.floating-leaf {
  position: absolute;
  pointer-events: none;
  opacity: 0.35;
  filter: drop-shadow(0 4px 8px rgba(13, 148, 136, 0.15));
  animation: leafFloatDrift 20s ease-in-out infinite alternate;
}

@keyframes leafFloatDrift {
  0% { transform: translateY(0) rotate(0deg) scale(0.9); }
  50% { transform: translateY(-25px) rotate(18deg) scale(1.05); }
  100% { transform: translateY(15px) rotate(-12deg) scale(0.95); }
}

/* 极简青白科技网格：与价格截图风格呼应，提升精致感 */
.forest-tech-grid {
  position: absolute;
  inset: 0;
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(13, 148, 136, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 148, 136, 0.035) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 40%, transparent 90%);
  pointer-events: none;
}