.loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #323232;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	touch-action: none;
	transition: opacity 0.6s ease;
	will-change: opacity;
}

.loader-wrapper.hidden {
	opacity: 0;
	pointer-events: none;
}

/* Loader content */
.loader {
	display: flex;
	gap: 15px;
}

.note {
	font-size: 50px;
	display: inline-block;

	background: linear-gradient(45deg, #ffffff, #e0e0e0, #c0c0c0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	text-shadow:
		0 0 2px #fff,
		0 0 4px #eee,
		0 0 8px #ddd,
		0 0 16px rgba(255, 255, 255, 0.3),
		0 -6px 10px rgba(255, 255, 255, 0.2),
		0 6px 10px rgba(255, 255, 255, 0.2);

	animation: bounceGlow 1.5s infinite ease-in-out;
}

.note:nth-child(1) { animation-delay: 0s; }
.note:nth-child(2) { animation-delay: 0.3s; }
.note:nth-child(3) { animation-delay: 0.6s; }

@keyframes bounceGlow {
	0%, 100% {
		transform: translateY(0) scale(1);
		opacity: 0.7;
		text-shadow:
			0 0 2px #fff,
			0 0 4px #eee,
			0 0 8px #ddd,
			0 0 16px rgba(255, 255, 255, 0.3),
			0 -6px 10px rgba(255, 255, 255, 0.2),
			0 6px 10px rgba(255, 255, 255, 0.2);
	}
	50% {
		transform: translateY(-25px) scale(1.3);
		opacity: 1;
		text-shadow:
			0 0 3px #fff,
			0 0 6px #eee,
			0 0 12px #ddd,
			0 0 24px rgba(255, 255, 255, 0.4),
			0 -8px 12px rgba(255, 255, 255, 0.25),
			0 8px 12px rgba(255, 255, 255, 0.25);
	}
}