/* =========================================================================
 * M10 · 心情花园 私有样式（.m10- 前缀，仅用设计令牌，禁止硬编码色值）
 * ========================================================================= */

.m10-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--page-pad) var(--sp-6);
  background: color-mix(in srgb, var(--c-grape) 16%, var(--surface-2));
  border-radius: var(--radius-lg);
}

.m10-stage[data-module] { min-height: 100%; }

/* ---------- 每日问候 ---------- */
.m10-greet {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--fs-15);
  color: var(--c-ink-700);
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.m10-greet.is-in { opacity: 1; transform: translateY(0); }

/* ---------- HUD ---------- */
.m10-hud {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-13);
  color: var(--c-ink-500);
}

.m10-hud-item { display: inline-flex; align-items: center; gap: 4px; }

.m10-water-num,
.m10-bloomed-num {
  font-family: var(--font-num);
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--c-grape);
}

/* ---------- 场景与植物 ---------- */
.m10-scene {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--sp-2) 0;
}

.m10-plant {
  width: 180px;
  height: 200px;
  overflow: visible;
}

.m10-soil path { fill: var(--c-cream-200); }

.m10-seed ellipse {
  fill: var(--c-cream-200);
  stroke: var(--c-ink-300);
  stroke-width: 1;
}

.m10-stem { fill: none; stroke: var(--c-mint); stroke-width: 4; stroke-linecap: round; }

.m10-sproutleaf,
.m10-leafshape { fill: var(--c-mint); }

.m10-bud circle { fill: var(--c-lilac); }

.m10-petal { fill: var(--c-grape); }

.m10-core { fill: var(--c-butter); }

/* 形态可见性：按 data-stage 逐级展开 */
.m10-plant .m10-seed,
.m10-plant .m10-sprout,
.m10-plant .m10-leaf,
.m10-plant .m10-bud,
.m10-plant .m10-flower {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}

.m10-plant .m10-sprout,
.m10-plant .m10-leaf,
.m10-plant .m10-bud,
.m10-plant .m10-flower {
  opacity: 0;
  transform: scale(.2);
}

.m10-plant .m10-seed { opacity: 1; transform: scale(1); }

.m10-plant[data-stage="1"] .m10-seed,
.m10-plant[data-stage="2"] .m10-seed,
.m10-plant[data-stage="3"] .m10-seed,
.m10-plant[data-stage="4"] .m10-seed { opacity: 0; transform: scale(.4); }

.m10-plant[data-stage="1"] .m10-sprout,
.m10-plant[data-stage="2"] .m10-sprout,
.m10-plant[data-stage="3"] .m10-sprout,
.m10-plant[data-stage="4"] .m10-sprout { opacity: 1; transform: scale(1); }

.m10-plant[data-stage="2"] .m10-leaf,
.m10-plant[data-stage="3"] .m10-leaf,
.m10-plant[data-stage="4"] .m10-leaf { opacity: 1; transform: scale(1); }

.m10-plant[data-stage="3"] .m10-bud { opacity: 1; transform: scale(1); }

.m10-plant[data-stage="4"] .m10-flower { opacity: 1; transform: scale(1); }

.m10-plant.is-bloom .m10-flower { animation: m10-bloom var(--dur-slower) var(--ease-spring); }

/* ---------- 文案 ---------- */
.m10-stage-label {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--c-ink-900);
}

.m10-note {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--fs-14);
  color: var(--c-grape);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.m10-note.is-in { opacity: 1; transform: translateY(0); }

/* ---------- 按钮 ---------- */
.m10-btn-water { width: 100%; }

.m10-btn-water.is-nudge { animation: m10-nudge var(--dur-fast) var(--ease-in-out); }

.m10-btn-plant { width: 100%; }

/* ---------- 水滴特效 ---------- */
.m10-water-drop {
  position: absolute;
  top: 6px;
  font-size: 24px;
  font-family: var(--font-emoji);
  line-height: 1;
  pointer-events: none;
  animation: m10-drop var(--dur-slower) var(--ease-out) both;
}

/* ---------- 关键帧 ---------- */
@keyframes m10-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(.8); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(96px) scale(1); }
}

@keyframes m10-bloom {
  0% { transform: scale(.9); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes m10-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- 减弱动效 ---------- */
[data-reduce-motion="1"] .m10-plant .m10-seed,
[data-reduce-motion="1"] .m10-plant .m10-sprout,
[data-reduce-motion="1"] .m10-plant .m10-leaf,
[data-reduce-motion="1"] .m10-plant .m10-bud,
[data-reduce-motion="1"] .m10-plant .m10-flower,
[data-reduce-motion="1"] .m10-greet,
[data-reduce-motion="1"] .m10-note {
  transition-duration: var(--dur-fast) !important;
}

[data-reduce-motion="1"] .m10-plant.is-bloom .m10-flower { animation: none !important; }
[data-reduce-motion="1"] .m10-water-drop { animation-duration: var(--dur-fast) !important; }
[data-reduce-motion="1"] .m10-btn-water.is-nudge { animation: none !important; }