.stat-tile {
  position: relative;
  overflow: hidden;
}

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

.momentum-leaves i {
  position: absolute;
  width: 10px;
  height: 16px;
  border-radius: 100% 0 100% 0;
  background: var(--moss);
  opacity: .12;
  transform: rotate(28deg);
}

.momentum-leaves i:nth-child(1) { right: 20px; bottom: 17px; }
.momentum-leaves i:nth-child(2) { right: 38px; bottom: 39px; transform: rotate(116deg); }
.momentum-leaves i:nth-child(3) { right: 17px; bottom: 66px; transform: rotate(194deg); }
.momentum-leaves i:nth-child(4) { right: 57px; bottom: 18px; transform: rotate(286deg); }

.momentum-growing .momentum-leaves i { opacity: .28; }
.momentum-high .momentum-leaves i { opacity: .48; background: var(--citrus); }
.momentum-high .momentum-leaves i:nth-child(2),
.momentum-high .momentum-leaves i:nth-child(4) { background: var(--moss); }

.toast-item-achieved {
  position: relative;
  overflow: hidden;
}

.toast-item-achieved::before,
.toast-item-achieved::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 100% 0 100% 0;
  pointer-events: none;
  opacity: .72;
}

.toast-item-achieved::before {
  right: 18px;
  top: 16px;
  background: var(--citrus);
  box-shadow: -19px 25px 0 -1px var(--moss), -40px 7px 0 -1px var(--citrus), -9px 50px 0 -1px var(--moss);
  transform: rotate(28deg);
}

.toast-item-achieved::after {
  right: 48px;
  bottom: 12px;
  width: 6px;
  height: 9px;
  background: var(--moss);
  box-shadow: 24px -19px 0 -1px var(--citrus), 42px 8px 0 -1px var(--moss), 5px -43px 0 -1px var(--citrus);
  transform: rotate(206deg);
}

@media (prefers-reduced-motion: no-preference) {
  .momentum-growing .momentum-leaves i { animation: leaf-sway 4.4s ease-in-out infinite; }
  .momentum-high .momentum-leaves i { animation: leaf-rise 3.4s cubic-bezier(.22, .8, .36, 1) infinite; }
  .momentum-growing .momentum-leaves i:nth-child(2),
  .momentum-high .momentum-leaves i:nth-child(2) { animation-delay: -.9s; }
  .momentum-growing .momentum-leaves i:nth-child(3),
  .momentum-high .momentum-leaves i:nth-child(3) { animation-delay: -1.7s; }
  .momentum-growing .momentum-leaves i:nth-child(4),
  .momentum-high .momentum-leaves i:nth-child(4) { animation-delay: -2.5s; }
  .toast-item-achieved::before { animation: toast-scatter-one 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  .toast-item-achieved::after { animation: toast-scatter-two 1.6s cubic-bezier(.16, 1, .3, 1) both; }
}

@keyframes leaf-sway {
  0%, 100% { transform: rotate(28deg) translateY(0); }
  50% { transform: rotate(46deg) translateY(-4px); }
}

@keyframes leaf-rise {
  0%, 100% { transform: rotate(28deg) translate(0, 0) scale(.9); }
  48% { transform: rotate(62deg) translate(-7px, -18px) scale(1.14); }
}

@keyframes toast-scatter-one {
  from { opacity: 0; transform: rotate(-28deg) scale(.4); }
  55% { opacity: .8; transform: rotate(38deg) scale(1); }
  to { opacity: .42; transform: rotate(28deg) scale(.92); }
}

@keyframes toast-scatter-two {
  from { opacity: 0; transform: rotate(160deg) scale(.4); }
  62% { opacity: .76; transform: rotate(224deg) scale(1); }
  to { opacity: .38; transform: rotate(206deg) scale(.92); }
}
