/**
 * Background Animations - Portable CSS
 * Drop this file + bg-anims.js into any project.
 */

/* ── Particle Grid (floating dots) ──────────────────────────────────────── */

@keyframes pg-drift {
	0% {
		transform: translate(0, 0) scale(0);
		opacity: 0;
	}
	15% {
		transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(var(--s));
		opacity: var(--o);
	}
	85% {
		transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(var(--s));
		opacity: var(--o);
	}
	100% {
		transform: translate(var(--dx), var(--dy)) scale(0);
		opacity: 0;
	}
}

.pg-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.pg-dot {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--pg-color, #818cf8), transparent);
	box-shadow: 0 0 10px var(--pg-color, #818cf8);
	animation: pg-drift ease-in-out infinite;
	pointer-events: none;
}

/* ── Shooting Stars (auto-spawn) ────────────────────────────────────────── */

@keyframes ss-fly {
	0% {
		transform: rotate(315deg) translateX(0);
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: rotate(315deg) translateX(-700px);
		opacity: 0;
	}
}

.ss-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.ss-dot {
	position: absolute;
	width: 3px;
	height: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 0 0 6px rgba(255, 255, 255, 0.05), 0 0 14px
		rgba(255, 255, 255, 0.15);
	animation: ss-fly linear forwards;
	pointer-events: none;
}

.ss-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 180px;
	height: 1px;
	background: linear-gradient(90deg, #fff, transparent);
}

/* ── Click-to-Shoot Stars ───────────────────────────────────────────────── */

.ss-dot.ss-click {
	position: fixed;
}