/* Flowers: bud state by default, opens when an ancestor (or the svg itself)
   has .is-bloomed. Uses tokens from base.css only. */

.flower {
  display: inline-block;
  overflow: visible;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.flower .petal,
.flower .leaf,
.flower .eye,
.flower .head {
  transform-box: view-box;
  transform-origin: 0 0;
}

.flower .petal,
.flower .leaf,
.flower .eye {
  transition:
    transform 2.6s var(--ease),
    opacity 2.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* Closed bud: still visible, never an empty space. */
.flower .petal {
  transform: scale(0.3) rotate(-30deg);
  opacity: 0.3;
}
.flower .leaf {
  transform: scale(0.45);
  opacity: 0;
}
.flower .eye {
  transform: scale(0.65);
  opacity: 0.7;
}

/* Open */
.is-bloomed .flower .petal,
.flower.is-bloomed .petal,
.is-bloomed .flower .leaf,
.flower.is-bloomed .leaf,
.is-bloomed .flower .eye,
.flower.is-bloomed .eye {
  transform: none;
  opacity: 1;
}

/* Always open, no animation (for static use). */
.flower-static .flower .petal,
.flower-static .flower .leaf,
.flower-static .flower .eye,
.flower.flower-static .petal,
.flower.flower-static .leaf,
.flower.flower-static .eye {
  transform: none;
  opacity: 1;
  transition: none;
}

/* Gentle sway after blooming, opt in with .flower-sway on a wrapper. */
.is-bloomed .flower-sway .head,
.flower-sway.is-bloomed .head {
  animation: flower-sway 12s ease-in-out 3s infinite alternate;
}

@keyframes flower-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flower .petal,
  .flower .leaf,
  .flower .eye {
    transform: none;
    transition: opacity 1.2s var(--ease);
    transition-delay: 0s;
  }
  .is-bloomed .flower-sway .head,
  .flower-sway.is-bloomed .head {
    animation: none;
  }
}