/*
 * PureCSS.com
 * https://purecss.com/examples/css-rain/
 * Animated rain streaks using absolutely-positioned elements and staggered @keyframes.
 */

.demo-css-rain .rain-stage {
		position: relative;
		height: 220px;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: linear-gradient(180deg, #0a0e14 0%, #111c2e 100%);
	}

.demo-css-rain .rain-text {
		position: absolute;
		bottom: 1.5rem;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: rgba(255,255,255,.7);
		font-size: 1.1rem;
		font-weight: 600;
		z-index: 1;
		white-space: nowrap;
	}

.demo-css-rain .drop {
		position: absolute;
		top: -20px;
		width: 1px;
		background: linear-gradient(180deg, transparent, rgba(147, 197, 253, .8));
		animation: rain-fall linear infinite;
		border-radius: 0 0 1px 1px;
	}

:is(.demo-css-rain .drop):nth-child(1)  { left: 5%;  height: 18px; animation-duration: 1.1s; animation-delay: 0s; }

:is(.demo-css-rain .drop):nth-child(2)  { left: 9%;  height: 14px; animation-duration: 0.9s; animation-delay: 0.3s; }

:is(.demo-css-rain .drop):nth-child(3)  { left: 14%; height: 22px; animation-duration: 1.3s; animation-delay: 0.7s; }

:is(.demo-css-rain .drop):nth-child(4)  { left: 19%; height: 16px; animation-duration: 1.0s; animation-delay: 0.1s; }

:is(.demo-css-rain .drop):nth-child(5)  { left: 24%; height: 20px; animation-duration: 1.2s; animation-delay: 0.5s; }

:is(.demo-css-rain .drop):nth-child(6)  { left: 29%; height: 14px; animation-duration: 0.8s; animation-delay: 0.9s; }

:is(.demo-css-rain .drop):nth-child(7)  { left: 34%; height: 24px; animation-duration: 1.4s; animation-delay: 0.2s; }

:is(.demo-css-rain .drop):nth-child(8)  { left: 38%; height: 16px; animation-duration: 1.0s; animation-delay: 0.6s; }

:is(.demo-css-rain .drop):nth-child(9)  { left: 43%; height: 18px; animation-duration: 1.1s; animation-delay: 0.4s; }

:is(.demo-css-rain .drop):nth-child(10) { left: 48%; height: 12px; animation-duration: 0.9s; animation-delay: 0.8s; }

:is(.demo-css-rain .drop):nth-child(11) { left: 53%; height: 20px; animation-duration: 1.2s; animation-delay: 0.15s; }

:is(.demo-css-rain .drop):nth-child(12) { left: 58%; height: 16px; animation-duration: 1.0s; animation-delay: 0.55s; }

:is(.demo-css-rain .drop):nth-child(13) { left: 63%; height: 22px; animation-duration: 1.3s; animation-delay: 0.35s; }

:is(.demo-css-rain .drop):nth-child(14) { left: 68%; height: 14px; animation-duration: 0.8s; animation-delay: 0.75s; }

:is(.demo-css-rain .drop):nth-child(15) { left: 73%; height: 18px; animation-duration: 1.1s; animation-delay: 0.45s; }

:is(.demo-css-rain .drop):nth-child(16) { left: 78%; height: 20px; animation-duration: 1.2s; animation-delay: 0.05s; }

:is(.demo-css-rain .drop):nth-child(17) { left: 83%; height: 12px; animation-duration: 0.9s; animation-delay: 0.65s; }

:is(.demo-css-rain .drop):nth-child(18) { left: 88%; height: 24px; animation-duration: 1.4s; animation-delay: 0.25s; }

:is(.demo-css-rain .drop):nth-child(19) { left: 93%; height: 16px; animation-duration: 1.0s; animation-delay: 0.85s; }

:is(.demo-css-rain .drop):nth-child(20) { left: 97%; height: 18px; animation-duration: 1.15s; animation-delay: 0.5s; }

@keyframes rain-fall {
	0% {
		transform: translateY(0) scaleX(1);
		opacity: 0;
	}
	5% { opacity: 1; }
	95% { opacity: .8; }
	100% {
		transform: translateY(240px) scaleX(0.5);
		opacity: 0;
	}
}