/* Subtle "desert rose" motif: a few ambient petals plus a brief conversion bloom. */
.sacred-dust b:nth-child(4n) {
  width: calc(var(--dust-size) * 1.75);
  height: calc(var(--dust-size) * 1.05);
  background: #9a5d6c;
  border-radius: 85% 15% 78% 22%;
  box-shadow: 0 0 7px 1px rgba(154, 93, 108, 0.48);
  filter: saturate(0.78);
}

.site-footer {
  background-image:
    linear-gradient(rgba(7, 22, 37, 0.65), rgba(7, 22, 37, 0.65)),
    url("/diffwhale-footer-rose-v7.webp");
  background-position: center, center 47.5%;
}

@media (min-width: 951px) {
  .sacred-dust b:nth-child(4n) {
    width: calc(var(--dust-size) * 3);
    height: calc(var(--dust-size) * 1.75);
    box-shadow: 0 0 10px 2px rgba(154, 93, 108, 0.42);
  }
}

.transform-button {
  isolation: isolate;
  overflow: visible;
  position: relative;
}

.transform-button > span,
.transform-button > b {
  position: relative;
  z-index: 2;
}

.transform-button::before,
.transform-button::after,
.transform-button > span::before,
.transform-button > span::after,
.transform-button > b::before,
.transform-button > b::after {
  content: "";
  width: 6px;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(145deg, #b98792, #70404d);
  border-radius: 85% 15% 78% 22%;
  box-shadow: 0 0 8px rgba(185, 135, 146, 0.24);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
}

.transform-button.rose-bloom::before {
  --rose-x: -54px;
  --rose-y: -38px;
  --rose-r: -78deg;
  animation: rose-bloom-out 820ms cubic-bezier(.18,.7,.25,1) both;
}

.transform-button.rose-bloom::after {
  --rose-x: 58px;
  --rose-y: -32px;
  --rose-r: 92deg;
  animation: rose-bloom-out 860ms 35ms cubic-bezier(.18,.7,.25,1) both;
}

.transform-button.rose-bloom > span::before {
  --rose-x: -28px;
  --rose-y: -52px;
  --rose-r: -42deg;
  animation: rose-bloom-out 900ms 70ms cubic-bezier(.18,.7,.25,1) both;
}

.transform-button.rose-bloom > span::after {
  --rose-x: 24px;
  --rose-y: -58px;
  --rose-r: 58deg;
  animation: rose-bloom-out 880ms 10ms cubic-bezier(.18,.7,.25,1) both;
}

.transform-button.rose-bloom > b::before {
  --rose-x: -68px;
  --rose-y: -16px;
  --rose-r: -112deg;
  animation: rose-bloom-out 780ms 90ms cubic-bezier(.18,.7,.25,1) both;
}

.transform-button.rose-bloom > b::after {
  --rose-x: 68px;
  --rose-y: -10px;
  --rose-r: 124deg;
  animation: rose-bloom-out 840ms 55ms cubic-bezier(.18,.7,.25,1) both;
}

@keyframes rose-bloom-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) rotate(0deg) scale(.5);
  }
  18% {
    opacity: .78;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--rose-x)), calc(-50% + var(--rose-y))) rotate(var(--rose-r)) scale(.9);
  }
}

@media (max-width: 620px) {
  .site-footer {
    background-position: center, center;
    background-size: cover, auto 200%;
  }

  .transform-button::before,
  .transform-button::after,
  .transform-button > span::before,
  .transform-button > span::after,
  .transform-button > b::before,
  .transform-button > b::after {
    width: 5px;
    height: 8px;
  }
}