:root{
	--bg-1: #060812;
	--bg-2: #081226;
	--accent-1: #00ffd1;
	--accent-2: #ff4da6;
	--accent-3: #ffd166;
	--accent-4: #7c4dff;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: radial-gradient(800px 480px at 10% 10%, rgba(124,77,255,0.06), transparent 12%),
							radial-gradient(900px 520px at 90% 90%, rgba(255,77,166,0.05), transparent 12%),
							linear-gradient(180deg,var(--bg-1),var(--bg-2));
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	color: #fff;
}

.stage{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:4vmin;
	position:relative;
	z-index:1;
}

.name{
	font-weight:900;
	letter-spacing:0.02em;
	text-transform:none;
	font-size:clamp(48px, 8vw, 120px);
	line-height:0.9;
	background: linear-gradient(90deg, var(--accent-1), var(--accent-4), var(--accent-2));
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow:
		0 6px 24px rgba(2,6,18,0.6),
		0 0 18px rgba(0,255,209,0.06),
		0 0 34px rgba(255,77,166,0.06);
	transform-origin:center;
	transition: transform 240ms cubic-bezier(.2,.9,.2,1), filter 180ms;
	will-change: transform, filter;
	animation: hueShift 8s linear infinite;
}

@keyframes hueShift{
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* subtle float */
@keyframes floaty {
	0%{transform:translateY(0)}
	50%{transform:translateY(-6px)}
	100%{transform:translateY(0)}
}
.name{
	animation: floaty 6s ease-in-out infinite;
}

/* glowing underline using pseudo-element */
.name::after{
	content:"";
	display:block;
	height:8px;
	width:56%;
	margin-top:0.6em;
	border-radius:999px;
	background: linear-gradient(90deg, rgba(0,255,209,0.22), rgba(124,77,255,0.22), rgba(255,77,166,0.18));
	filter: blur(10px) saturate(140%);
	margin-left:auto;
	margin-right:auto;
	transform: translateZ(0);
}

/* background canvas sits under content */
#bg{
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	z-index:0;
	display:block;
	pointer-events:none;
}

/* subtle overlay to add depth */
.stage::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:0;
	background: linear-gradient(180deg, rgba(10,12,25,0.08), rgba(10,12,25,0.2));
	mix-blend-mode: overlay;
	pointer-events:none;
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
	.name{animation:none;transition:none}
}

/* small screens spacing */
@media (max-width:420px){
	.name{font-size:40px}
}