/* A slower, softer rose-petal bloom for the transform action. */
.transform-button.rose-bloom::before,
.transform-button.rose-bloom::after,
.transform-button.rose-bloom > span::before,
.transform-button.rose-bloom > span::after,
.transform-button.rose-bloom > b::before,
.transform-button.rose-bloom > b::after {
  animation: none;
}

.transform-button.rose-bloom-soft::before,
.transform-button.rose-bloom-soft::after,
.transform-button.rose-bloom-soft > span::before,
.transform-button.rose-bloom-soft > span::after,
.transform-button.rose-bloom-soft > b::before,
.transform-button.rose-bloom-soft > b::after {
  filter: blur(0.35px);
  box-shadow: 0 0 9px rgba(185, 135, 146, 0.18);
}

.transform-button.rose-bloom-soft::before {
  --rose-x: -44px;
  --rose-y: -35px;
  --rose-r: -48deg;
  animation: rose-bloom-soft-out 1550ms cubic-bezier(.22,.5,.28,1) both;
}

.transform-button.rose-bloom-soft::after {
  --rose-x: 46px;
  --rose-y: -31px;
  --rose-r: 54deg;
  animation: rose-bloom-soft-out 1650ms 70ms cubic-bezier(.22,.5,.28,1) both;
}

.transform-button.rose-bloom-soft > span::before {
  --rose-x: -24px;
  --rose-y: -46px;
  --rose-r: -32deg;
  animation: rose-bloom-soft-out 1720ms 140ms cubic-bezier(.22,.5,.28,1) both;
}

.transform-button.rose-bloom-soft > span::after {
  --rose-x: 22px;
  --rose-y: -49px;
  --rose-r: 36deg;
  animation: rose-bloom-soft-out 1680ms 35ms cubic-bezier(.22,.5,.28,1) both;
}

.transform-button.rose-bloom-soft > b::before {
  --rose-x: -53px;
  --rose-y: -20px;
  --rose-r: -62deg;
  animation: rose-bloom-soft-out 1500ms 180ms cubic-bezier(.22,.5,.28,1) both;
}

.transform-button.rose-bloom-soft > b::after {
  --rose-x: 54px;
  --rose-y: -17px;
  --rose-r: 68deg;
  animation: rose-bloom-soft-out 1600ms 105ms cubic-bezier(.22,.5,.28,1) both;
}

@keyframes rose-bloom-soft-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) rotate(0deg) scale(.5);
  }
  24% {
    opacity: .52;
  }
  68% {
    opacity: .34;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--rose-x)), calc(-50% + var(--rose-y))) rotate(var(--rose-r)) scale(.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transform-button.rose-bloom-soft::before,
  .transform-button.rose-bloom-soft::after,
  .transform-button.rose-bloom-soft > span::before,
  .transform-button.rose-bloom-soft > span::after,
  .transform-button.rose-bloom-soft > b::before,
  .transform-button.rose-bloom-soft > b::after {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}