/*
 * PureCSS.com
 * https://purecss.com/examples/confetti/
 * CSS confetti animation using transform, @keyframes, and nth-child for staggered timing.
 */

.demo-confetti .confetti-stage {
		position: relative;
		height: 220px;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--surface);
		display: flex;
		align-items: center;
		justify-content: center;
	}

.demo-confetti .confetti-text {
		font-size: 1.25rem;
		font-weight: 700;
		z-index: 1;
		position: relative;
	}

.demo-confetti .piece {
		position: absolute;
		top: -10px;
		width: 10px;
		height: 10px;
		border-radius: 2px;
		animation: confetti-fall 3s ease-in infinite;
	}

:is(.demo-confetti .piece):nth-child(1)  { left: 5%;  background: var(--coral);   width: 8px;  height: 12px; animation-delay: 0s;    animation-duration: 2.8s; }

:is(.demo-confetti .piece):nth-child(2)  { left: 12%; background: var(--accent);  width: 12px; height: 8px;  animation-delay: .3s;   animation-duration: 3.1s; border-radius: 50%; }

:is(.demo-confetti .piece):nth-child(3)  { left: 20%; background: var(--sky);     width: 6px;  height: 14px; animation-delay: .6s;   animation-duration: 2.6s; }

:is(.demo-confetti .piece):nth-child(4)  { left: 28%; background: var(--violet);  width: 10px; height: 10px; animation-delay: .1s;   animation-duration: 3.4s; border-radius: 50%; }

:is(.demo-confetti .piece):nth-child(5)  { left: 36%; background: var(--yellow);  width: 14px; height: 6px;  animation-delay: .8s;   animation-duration: 2.9s; }

:is(.demo-confetti .piece):nth-child(6)  { left: 44%; background: var(--rose);    width: 8px;  height: 8px;  animation-delay: .4s;   animation-duration: 3.2s; border-radius: 50%; }

:is(.demo-confetti .piece):nth-child(7)  { left: 52%; background: var(--teal);    width: 12px; height: 6px;  animation-delay: 1s;    animation-duration: 2.7s; }

:is(.demo-confetti .piece):nth-child(8)  { left: 60%; background: var(--orange);  width: 6px;  height: 10px; animation-delay: .2s;   animation-duration: 3.0s; }

:is(.demo-confetti .piece):nth-child(9)  { left: 68%; background: var(--accent);  width: 10px; height: 14px; animation-delay: .7s;   animation-duration: 2.5s; border-radius: 50%; }

:is(.demo-confetti .piece):nth-child(10) { left: 76%; background: var(--sky);     width: 8px;  height: 8px;  animation-delay: .5s;   animation-duration: 3.3s; }

:is(.demo-confetti .piece):nth-child(11) { left: 84%; background: var(--coral);   width: 14px; height: 6px;  animation-delay: .9s;   animation-duration: 2.8s; }

:is(.demo-confetti .piece):nth-child(12) { left: 92%; background: var(--violet);  width: 6px;  height: 12px; animation-delay: .15s;  animation-duration: 3.1s; }

@keyframes confetti-fall {
	0% {
		transform: translateY(0) rotate(0deg) scaleX(1);
		opacity: 1;
	}
	50% {
		transform: translateY(110px) rotate(180deg) scaleX(-1);
	}
	100% {
		transform: translateY(230px) rotate(360deg) scaleX(1);
		opacity: 0;
	}
}