/* Nebula Input Styles */
.nebula-input {
	position: relative;
	width: 100%;
	margin: 30px auto;
}

/* Light mode styles */
body:not(.dark-mode) .nebula-input .input {
	background: #f7f7ff;
	color: #181828;
	border: 2px solid #bdbde6;
}
body:not(.dark-mode) .nebula-input .user-label {
	color: #6a6a8a;
	background: #f7f7ff;
}
body:not(.dark-mode) .nebula-input .input:focus {
	border-color: #6a30d0;
	box-shadow: 0 5px 8px rgba(106, 48, 208, 0.13),
		0 10px 20px rgba(106, 48, 208, 0.09), 0 15px 40px rgba(106, 48, 208, 0.07),
		0 20px 60px rgba(106, 48, 208, 0.05);
}
body:not(.dark-mode) .nebula-input .input:focus ~ .user-label,
body:not(.dark-mode) .nebula-input input[type="text"]:focus ~ .user-label,
body:not(.dark-mode) .nebula-input input[type="email"]:focus ~ .user-label,
body:not(.dark-mode) .nebula-input input[type="tel"]:focus ~ .user-label,
body:not(.dark-mode) .nebula-input .input:valid ~ .user-label {
	color: #6a30d0;
}

/* Dark mode styles */
body.dark-mode .nebula-input .input {
	background: #00000f;
	color: #fff;
	border: 2px solid #2a2a3a;
}
body.dark-mode .nebula-input .user-label {
	color: #bdbde6;
	background: #00000f;
}
body.dark-mode .nebula-input .input:focus {
	border-color: #b56aff;
	box-shadow: 0 5px 8px rgba(181, 106, 255, 0.3),
		0 10px 20px rgba(181, 106, 255, 0.2), 0 15px 40px rgba(181, 106, 255, 0.15),
		0 20px 60px rgba(181, 106, 255, 0.1);
}
body.dark-mode .nebula-input .input:focus ~ .user-label,
body.dark-mode .nebula-input input[type="text"]:focus ~ .user-label,
body.dark-mode .nebula-input input[type="email"]:focus ~ .user-label,
body.dark-mode .nebula-input input[type="tel"]:focus ~ .user-label,
body.dark-mode .nebula-input .input:valid ~ .user-label {
	color: #d18cff;
}

.nebula-input .input {
	width: 100%;
	padding: 15px;
	border: 2px solid #2a2a3a;
	background: #00000f;
	color: white;
	font-size: 16px;
	outline: none;
	border-radius: 8px;
	transition: all 0.4s ease-out;
}

.nebula-input .user-label {
	position: absolute;
	left: 15px;
	top: 15px;
	pointer-events: none;
	color: #6a6a8a;
	transition: all 0.4s ease-out;
	background: #00000f;
	padding: 0 5px;
}

.nebula-input .input:focus {
	border-color: #b56aff;
	box-shadow: 0 5px 8px rgba(181, 106, 255, 0.3),
		0 10px 20px rgba(181, 106, 255, 0.2), 0 15px 40px rgba(181, 106, 255, 0.15),
		0 20px 60px rgba(181, 106, 255, 0.1);
}

.nebula-input .input:focus ~ .user-label,
.nebula-input input[type="text"]:focus ~ .user-label,
.nebula-input input[type="email"]:focus ~ .user-label,
.nebula-input input[type="tel"]:focus ~ .user-label,
.nebula-input .input:valid ~ .user-label {
	top: -22px;
	left: 0;
	font-size: 15px;
	color: #d18cff;
	background: transparent;
	padding: 0 4px;
	transform: none;
}

.nebula-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	top: 50%;
	left: 10px;
	filter: blur(0.8px);
	mix-blend-mode: screen;
	transition: opacity 0.3s ease;
}

.nebula-input .input:focus ~ .nebula-particle {
	animation: nebula-float 2s forwards ease-out;
}

@keyframes nebula-float {
	0% {
		transform: translate(0, -50%) scale(0.8);
		opacity: 0;
		background: #c774ff;
	}
	20% {
		opacity: 0.8;
	}
	100% {
		transform: translate(calc(var(--x) * 140px), calc(var(--y) * 35px))
			scale(1.1);
		opacity: 0;
		background: #6df2ff;
	}
}