/* ===========================================================
   PULSE — CSS Flower v4
   =========================================================== */

.css-flower { position: relative; width: 100%; height: 100%; }

/* ---------------- VASE ---------------- */
.cf-vase {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  max-width: 92px;
  aspect-ratio: 5 / 7;
  z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0%' stop-color='%23fbf6ed'/><stop offset='25%' stop-color='%23f0e8d8'/><stop offset='55%' stop-color='%23ddd0b8'/><stop offset='100%' stop-color='%23b3a281'/></linearGradient></defs><path d='M42 0 C42 0, 40 14, 38 26 C35 40, 22 52, 15 72 C8 92, 12 118, 24 130 C34 139, 44 140, 50 140 C56 140, 66 139, 76 130 C88 118, 92 92, 85 72 C78 52, 65 40, 62 26 C60 14, 58 0, 58 0 Z' fill='url(%23g)' stroke='rgba(0,0,0,0.14)' stroke-width='0.6'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.cf-vase-neck {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #3d3222 0%, #665a3f 70%, #a1937a 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
  z-index: 5;
}

.cf-vase-highlight {
  position: absolute;
  top: 20%;
  bottom: 12%;
  left: 28%;
  width: 6%;
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.35) 60%,
    rgba(255,255,255,0) 100%);
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 4;
}

/* ---------------- PLANT ----------------
   bottom is 26% — that's the vase NECK height.
   The stem base enters the vase neck, everything
   above it is visible.
   --------------------------------------- */
.cf-plant {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 170px;
  height: 66%;
  transform-origin: bottom center;
  z-index: 2;
  pointer-events: none;
  animation: cfSway 6s ease-in-out infinite;
}

@keyframes cfSway {
  0%, 100% { transform: translateX(-50%) rotate(-0.6deg); }
  50%      { transform: translateX(-50%) rotate(0.6deg); }
}

/* ---------------- STEM ---------------- */
.cf-stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right,
    #3d6122 0%, #6ba33e 40%, #5a8f34 60%, #2f4a1a 100%);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.35);
  transform-origin: bottom center;
  transition: height 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------- LEAVES ---------------- */
.cf-leaf {
  position: absolute;
  width: 44%;
  max-width: 74px;
  height: 22px;
  border-radius: 55% 5% 55% 5%;
  background: linear-gradient(120deg, #7ab848 0%, #4a7a2a 55%, #2f4a1a 100%);
  box-shadow:
    inset 1px 1px 3px rgba(255,255,255,0.30),
    inset -1px -1px 3px rgba(0,0,0,0.30),
    0 1px 3px rgba(0,0,0,0.15);
  transform-origin: bottom right;
  transition: transform 800ms var(--ease), opacity 800ms var(--ease);
}
.cf-leaf.left {
  transform-origin: bottom left;
  border-radius: 5% 55% 5% 55%;
  background: linear-gradient(-120deg, #7ab848 0%, #4a7a2a 55%, #2f4a1a 100%);
}

.cf-leaf-1 { bottom: 8%;  right: 52%; transform: rotate(-32deg); }
.cf-leaf-2 { bottom: 26%; left:  52%; transform: rotate(32deg);  }
.cf-leaf-3 { bottom: 44%; right: 52%; transform: rotate(-25deg); }
.cf-leaf-4 { bottom: 62%; left:  52%; transform: rotate(25deg);  }

/* ---------------- BUD ---------------- */
.cf-bud {
  position: absolute;
  bottom: 92%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 18px;
  height: 30px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 35% 30%, #a8354a 0%, #7a1e34 50%, #4a0f20 100%);
  box-shadow:
    inset -2px -2px 5px rgba(0,0,0,0.35),
    inset 2px 2px 4px rgba(255,255,255,0.18);
  transform-origin: center bottom;
  transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

/* ---------------- FLOWER HEAD ---------------- */
.cf-flower-head {
  position: absolute;
  bottom: 86%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 96px;
  height: 96px;
  transform-origin: center bottom;
  transition: transform 1200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.cf-flower-petals { position: absolute; inset: 0; }

.cf-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  height: 52%;
  border-radius: 50% 50% 50% 50% / 65% 65% 45% 45%;
  background: radial-gradient(circle at 35% 30%, #d84b63 0%, #b82948 40%, #8a1730 75%, #5a0a1c 100%);
  box-shadow:
    inset -4px -6px 12px rgba(0,0,0,0.35),
    inset 4px 5px 10px rgba(255,255,255,0.18);
}
.cf-petal.inner { width: 34%; height: 34%; filter: brightness(1.15); }
.cf-petal.outer { width: 66%; height: 66%; filter: brightness(0.9); }

.cf-petal.p1 { transform: translate(-50%,-50%) rotate(0deg)   translateY(-42%); }
.cf-petal.p2 { transform: translate(-50%,-50%) rotate(60deg)  translateY(-42%); }
.cf-petal.p3 { transform: translate(-50%,-50%) rotate(120deg) translateY(-42%); }
.cf-petal.p4 { transform: translate(-50%,-50%) rotate(180deg) translateY(-42%); }
.cf-petal.p5 { transform: translate(-50%,-50%) rotate(240deg) translateY(-42%); }
.cf-petal.p6 { transform: translate(-50%,-50%) rotate(300deg) translateY(-42%); }
.cf-petal.p7 { transform: translate(-50%,-50%) rotate(30deg)  translateY(-48%); }
.cf-petal.p8 { transform: translate(-50%,-50%) rotate(150deg) translateY(-48%); }
.cf-petal.p9 { transform: translate(-50%,-50%) rotate(270deg) translateY(-48%); }

.cf-flower-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff6b82 0%, #d84b63 40%, #8a1730 100%);
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4);
}

/* ===========================================================
   STAGES
   =========================================================== */

/* SPROUT — short stem, tiny leaves, still emerging from the vase neck */
.css-flower[data-stage="sprout"] .cf-stem { height: 22%; }
.css-flower[data-stage="sprout"] .cf-leaf {
  width: 32%;
  max-width: 50px;
  height: 16px;
  transform: scale(0.7);
}
.css-flower[data-stage="sprout"] .cf-leaf-1 {
  bottom: 4%;
  right: 50%;
  transform: rotate(-42deg) scale(0.7);
}
.css-flower[data-stage="sprout"] .cf-leaf-2 {
  bottom: 14%;
  left: 50%;
  transform: rotate(42deg) scale(0.7);
}
.css-flower[data-stage="sprout"] .cf-leaf-3,
.css-flower[data-stage="sprout"] .cf-leaf-4 { opacity: 0; }

/* GROWING */
.css-flower[data-stage="growing"] .cf-stem { height: 58%; }
.css-flower[data-stage="growing"] .cf-leaf { transform: scale(0.9); }
.css-flower[data-stage="growing"] .cf-leaf-1 { bottom: 10%; transform: rotate(-28deg) scale(0.9); }
.css-flower[data-stage="growing"] .cf-leaf-2 { bottom: 28%; transform: rotate(28deg)  scale(0.9); }
.css-flower[data-stage="growing"] .cf-leaf-3 { bottom: 46%; transform: rotate(-22deg) scale(0.9); }
.css-flower[data-stage="growing"] .cf-leaf-4 { opacity: 0; }

/* BUDDING */
.css-flower[data-stage="budding"] .cf-stem { height: 88%; }
.css-flower[data-stage="budding"] .cf-leaf-4 { opacity: 0.9; }
.css-flower[data-stage="budding"] .cf-bud { transform: translateX(-50%) scale(1); }

/* BLOOMING */
.css-flower[data-stage="blooming"] .cf-stem { height: 100%; }
.css-flower[data-stage="blooming"] .cf-flower-head { transform: translateX(-50%) scale(1); }

/* ===========================================================
   HEALTH
   =========================================================== */

.css-flower[data-health="thirsty"] .cf-leaf,
.css-flower[data-health="thirsty"] .cf-stem { filter: brightness(0.92) saturate(0.85); }

.css-flower[data-health="wilting"] .cf-leaf,
.css-flower[data-health="wilting"] .cf-stem { filter: sepia(0.35) brightness(0.85) saturate(0.7); }
.css-flower[data-health="wilting"] .cf-leaf-1 { transform: rotate(-45deg) translateY(4px); }
.css-flower[data-health="wilting"] .cf-leaf-2 { transform: rotate(45deg)  translateY(4px); }
.css-flower[data-health="wilting"] .cf-leaf-3 { transform: rotate(-40deg) translateY(4px); }
.css-flower[data-health="wilting"] .cf-leaf-4 { transform: rotate(40deg)  translateY(4px); }
.css-flower[data-health="wilting"] .cf-flower-head { transform: translateX(-50%) scale(1) rotate(5deg); }

.css-flower[data-health="recovering"] .cf-leaf { filter: brightness(0.95) saturate(0.9); }