.flower {
  width: min(100%, 460px);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(14px, 3vh, 26px);
  padding: 0 26px;
}

.motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flower__svg {
  width: min(75vw, 300px);
  height: auto;
  overflow: visible;
  touch-action: none;
}

.flower__say {
  max-width: 21ch;
  height: 5.4em;
  display: grid;
  place-items: start center;
  padding-top: 0.9em;
  overflow: hidden;
  color: #514946;
  font-family: var(--font-display);
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
}

.flower__path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flower__seed {
  fill: #8eaa9a;
}

.flower__stem {
  fill: none;
  stroke: #8ea995;
  stroke-width: 3.2;
}

.flower__leaf {
  stroke: #839d89;
  stroke-width: 2.2;
}

.flower__petal {
  stroke: #dca2a8;
  stroke-width: 1.4;
}

.flower__heart,
.flower__center {
  stroke: none;
}

.flower__vein {
  fill: none;
  stroke: rgba(178, 119, 128, 0.34);
  stroke-width: 1;
  stroke-linecap: round;
}

.is-swaying .flower__stem {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway-stem 10s ease-in-out infinite;
}

.is-swaying .flower__head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway-head 10s ease-in-out infinite;
}

@keyframes sway-stem {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-0.45deg); }
  75% { transform: rotate(0.45deg); }
}

@keyframes sway-head {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-0.55deg); }
  75% { transform: rotate(0.55deg); }
}

.mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d9aaa8;
  opacity: 0;
  pointer-events: none;
  animation: mote-drift 9s ease-in-out infinite;
}

@keyframes mote-drift {
  0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.6); }
  35% { opacity: 0.25; }
  70% { opacity: 0.16; transform: translate3d(8px, -10px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -18px, 0) scale(0.5); }
}