/* Wind-borne leaves settle into the QRIS canvas; no image handover. */

.donate-qris__stage {
  position: relative;
  isolation: isolate;
}

.donate-qris__stage canvas.donate-qris-bloom {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* No transition, no transform, no fade on the real QRIS: any effect here makes
   it read as a separate image popping in over the leaves. */
.donate-qris__stage img {
  transition: none;
}

/* Soft breeze wash behind the leaves while they travel. It is gone before the
   swap, so the final frame is the plain QRIS. */
.donate-qris__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(62, 207, 142, 0.14), transparent 62%),
    radial-gradient(110% 80% at 86% 82%, rgba(23, 109, 78, 0.10), transparent 60%);
  transition: opacity 380ms ease;
}

.donate-qris__stage.is-blooming::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .donate-qris__stage::after {
    display: none;
  }
}