/* Decorative paper stays inside registration and never catches clicks. */
.join { position: relative; }
.join-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; contain: strict; }
.join-confetti-piece { position: absolute; top: -24px; left: var(--x); width: var(--size); height: calc(var(--size) * 1.5); opacity: 0; animation: join-confetti-fall var(--duration) var(--delay) cubic-bezier(.18,.56,.49,1) both; }
.join-confetti-paper { display: block; width: 100%; height: 100%; background: var(--colour); border-radius: 1px; animation: join-confetti-tumble var(--spin-duration) var(--delay) linear infinite; }
.join-confetti-piece:nth-child(4n) .join-confetti-paper { border-radius: 50%; height: var(--size); }
@keyframes join-confetti-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--tilt)); }
  8% { opacity: .95; }
  72% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--drift),var(--fall),0) rotate(calc(var(--tilt) + 160deg)); }
}
@keyframes join-confetti-tumble {
  0% { transform: rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateY(360deg) rotateZ(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .join-confetti { display: none; }
  .join-confetti-piece, .join-confetti-paper { animation: none; }
}