/* === Flower base structure === */
.flower {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
  will-change: transform;
  animation: grow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.flower-head {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.flower-stem {
  width: 3px;
  background: linear-gradient(to top, #2d6b1e, #3d8a30);
  border-radius: 2px;
  position: relative;
}

.flower-leaf {
  position: absolute;
  width: 18px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, #3a8a2a, #5cb84a);
}

.flower-leaf.left {
  left: -14px;
  transform: rotate(-30deg);
}

.flower-leaf.right {
  right: -14px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(30deg);
}

/* === Grow animation === */
@keyframes grow {
  0% {
    transform: scaleY(0) scaleX(0.8);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  70% {
    transform: scaleY(1.05) scaleX(1);
  }
  85% {
    transform: scaleY(0.97) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
  }
}

/* === Sway animation === */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes swayWide {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

.flower.sway {
  animation: grow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             sway var(--sway-duration, 3s) ease-in-out var(--sway-delay, 0s) infinite;
}

.flower.sway-wide {
  animation: grow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             swayWide var(--sway-duration, 4s) ease-in-out var(--sway-delay, 0s) infinite;
}

/* ==========================================
   FLOWER TYPE 1: ROSE
   ========================================== */
.flower-head-rose {
  width: 32px;
  height: 30px;
}

.flower-head-rose svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 2: TULIP
   ========================================== */
.flower-head-tulip {
  width: 26px;
  height: 30px;
}

.flower-head-tulip svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 3: DAISY
   ========================================== */
.flower-head-daisy {
  width: 34px;
  height: 34px;
}

.flower-head-daisy svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 4: SUNFLOWER
   ========================================== */
.flower-head-sunflower {
  width: 40px;
  height: 40px;
}

.flower-head-sunflower svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 5: LILY
   ========================================== */
.flower-head-lily {
  width: 36px;
  height: 32px;
}

.flower-head-lily svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 6: LAVENDER
   ========================================== */
.flower-head-lavender {
  width: 14px;
  height: 40px;
}

.flower-head-lavender svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 7: POPPY
   ========================================== */
.flower-head-poppy {
  width: 36px;
  height: 34px;
}

.flower-head-poppy svg {
  width: 100%;
  height: 100%;
}

/* ==========================================
   FLOWER TYPE 8: CHERRY BLOSSOM
   ========================================== */
.flower-head-cherry {
  width: 30px;
  height: 30px;
}

.flower-head-cherry svg {
  width: 100%;
  height: 100%;
}