/* ふしぎ鉢 — 植物の生長とコマンド演出 */

.plant-scene {
  /* 画面の高さを子SVGのサイズに左右されないようにする */
  aspect-ratio: 1.17 / 1;
  min-height: 0;
  background:
    radial-gradient(ellipse at 50% 74%, rgba(138, 173, 120, .18), transparent 49%),
    radial-gradient(ellipse at 50% 37%, #3d5c4e 0%, #2d4540 53%, #202d35 100%);
}
.plant-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 14%;
  width: 230px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(9, 20, 20, .18);
  filter: blur(18px);
  pointer-events: none;
}
.plant-scene[data-effect="sun"] {
  background:
    radial-gradient(ellipse at 70% 24%, rgba(250, 220, 144, .32), transparent 57%),
    radial-gradient(ellipse at 50% 74%, rgba(138, 173, 120, .18), transparent 49%),
    radial-gradient(ellipse at 50% 37%, #45674d 0%, #30463d 53%, #202d35 100%);
}
.plant-scene > svg:first-of-type {
  /* 植物本体とエフェクトを同じviewBox・同じ寸法で描画する */
  width: min(90%, 500px);
  height: auto;
}

.plant-scene > svg.plant-effect-stage {
  /* 元の .plant-scene svg (position:relative) より高い詳細度が必要 */
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(90%, 500px);
  height: auto;
  aspect-ratio: 360 / 340;
  pointer-events: none;
  overflow: visible;
}
.plant-artwork {
  animation: none;
}
.plant-stem {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: plant-stem-draw .76s ease-out both;
}
.plant-branch {
  animation-delay: .1s;
}
.plant-leaf {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: plant-leaf-unfurl .55s cubic-bezier(.18, .8, .3, 1.2) both;
}
.plant-flower {
  transform-box: fill-box;
  transform-origin: center;
  animation: flower-bloom .85s cubic-bezier(.16, 1.2, .32, 1) both;
}
.plant-tendril {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: plant-stem-draw .8s ease-out both;
}
.fx-drop {
  animation: plant-water-fall .78s cubic-bezier(.38, .14, .8, .75) var(--delay) both;
}
.fx-beam {
  filter: blur(2.5px);
  animation: plant-sun-beam .92s ease-in-out var(--delay) both;
}
.fx-sunspot {
  transform-box: fill-box;
  transform-origin: center;
  animation: plant-sun-spot .98s ease-in-out var(--delay) both;
}
.fx-note {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  animation: plant-note-float .9s cubic-bezier(.22, .65, .42, 1) var(--delay) both;
}
.fx-finish {
  animation: plant-finish-sparkle 1.28s cubic-bezier(.18, .7, .35, 1) var(--delay) both;
}
@keyframes plant-stem-draw {
  from { stroke-dashoffset: 100; opacity: .55; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes plant-leaf-unfurl {
  0% { opacity: 0; transform: scale(.2) rotate(-12deg); }
  70% { opacity: 1; transform: scale(1.07) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes plant-water-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(-22deg) scale(.55); }
  15% { opacity: 1; }
  78% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(18deg) scale(.8); }
}
@keyframes plant-sun-beam {
  0% { opacity: 0; }
  30% { opacity: .35; }
  62% { opacity: .75; }
  100% { opacity: 0; }
}
@keyframes plant-sun-spot {
  0% { opacity: 0; transform: scale(.6); }
  45% { opacity: .85; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes plant-note-float {
  0% { opacity: 0; transform: translate(0, 14px) rotate(-15deg) scale(.55); }
  16% { opacity: 1; }
  75% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(22deg) scale(1.18); }
}
@keyframes plant-finish-sparkle {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  .plant-stem, .plant-branch, .plant-leaf, .plant-flower, .plant-tendril,
  .fx-drop, .fx-beam, .fx-sunspot, .fx-note, .fx-finish {
    animation: none !important;
  }
  .fx-drop, .fx-note, .fx-finish { opacity: 0; }
  .fx-beam, .fx-sunspot { opacity: .22; }
}

@media (max-width: 520px) {
  .plant-scene {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}