.ag-black-hole-layer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	overflow: hidden;
	background: radial-gradient(circle at center, rgba(0,0,0,0.25), rgba(0,0,0,0));
	animation: ag-black-hole-dim 5200ms ease-in-out forwards;
}

.ag-black-hole-core {
	position: fixed;
	left: var(--ag-black-hole-x);
	top: var(--ag-black-hole-y);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle, #000 0%, #000 35%, rgba(90, 0, 160, 0.85) 55%, rgba(255, 215, 0, 0.35) 72%, transparent 100%);
	box-shadow:
		0 0 35px rgba(0,0,0,0.95),
		0 0 70px rgba(120,0,255,0.8),
		0 0 110px rgba(255,215,0,0.35);
	transform: translate(-50%, -50%) scale(0.2);
	animation: ag-black-hole-core 5200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ag-black-hole-star {
	position: fixed;
	left: var(--ag-start-x);
	top: var(--ag-start-y);
	font-size: var(--ag-star-size);
	line-height: 1;
	color: var(--ag-star-color);
	text-shadow: 0 0 18px currentColor;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1) rotate(0deg);
	animation: ag-black-hole-collapse var(--ag-collapse-duration) cubic-bezier(0.55, 0, 0.1, 1) forwards;
	animation-delay: var(--ag-collapse-delay);
	will-change: transform, opacity;
}

@keyframes ag-black-hole-dim {
	0% { background: radial-gradient(circle at center, rgba(0,0,0,0), rgba(0,0,0,0)); }
	25% { background: radial-gradient(circle at center, rgba(0,0,0,0.35), rgba(0,0,0,0.05)); }
	80% { background: radial-gradient(circle at center, rgba(0,0,0,0.45), rgba(0,0,0,0.08)); }
	100% { background: radial-gradient(circle at center, rgba(0,0,0,0), rgba(0,0,0,0)); }
}

@keyframes ag-black-hole-core {
	0% {
		transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
		opacity: 0;
	}

	15% {
		transform: translate(-50%, -50%) scale(2.2) rotate(180deg);
		opacity: 1;
	}

	80% {
		transform: translate(-50%, -50%) scale(3.2) rotate(900deg);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(0) rotate(1440deg);
		opacity: 0;
	}
}

@keyframes ag-black-hole-collapse {
	0% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
		opacity: 1;
	}

	45% {
		transform:
			translate(
				calc(var(--ag-hole-dx) * 0.35 + var(--ag-orbit-x)),
				calc(var(--ag-hole-dy) * 0.35 + var(--ag-orbit-y))
			)
			scale(1.15)
			rotate(var(--ag-spin-half));
		opacity: 1;
	}

	80% {
		transform:
			translate(
				calc(var(--ag-hole-dx) * 0.82 + var(--ag-orbit-y)),
				calc(var(--ag-hole-dy) * 0.82 + var(--ag-orbit-x))
			)
			scale(0.45)
			rotate(var(--ag-spin-full));
		opacity: 0.85;
	}

	100% {
		transform:
			translate(var(--ag-hole-dx), var(--ag-hole-dy))
			scale(0.02)
			rotate(var(--ag-spin-final));
		opacity: 0;
	}
}