:root {
	--primary: #8b5cf6;
	--primary-light: #a78bfa;
	--secondary: #ec4899;
	--accent: #0ea5e9;
	--dark: #0f172a;
	--darker: #0a0f22;
	--light: #f8fafc;
	--gray: #94a3b8;
	--success: #10b981;
	--warning: #f59e0b;
	--danger: #ef4444;
	--glass-bg: rgba(15, 23, 42, 0.7);
	--glass-border: rgba(255, 255, 255, 0.1);
	--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	--shadow-xl: 0 35px 60px -15px rgba(139, 92, 246, 0.3);
}

.light-mode {
	--dark: #f8fafc;
	--darker: #e2e8f0;
	--light: #0f172a;
	--gray: #64748b;
	--glass-bg: rgba(248, 250, 252, 0.8);
	--glass-border: rgba(0, 0, 0, 0.1);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	background: var(--darker);
	color: var(--light);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

.background-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.nebula-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	position: relative;
	z-index: 10;
}

.nebula-header {
	text-align: center;
	padding: 40px 20px 30px;
	position: relative;
}

.avatar-container {
	position: relative;
	display: inline-block;
	margin-bottom: 25px;
}

.avatar-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
	filter: blur(20px);
	animation: pulse 3s ease-in-out infinite;
	z-index: 1;
}

.avatar {
	position: relative;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.05);
	z-index: 2;
	overflow: hidden;
	border: 3px solid transparent;
	background-clip: padding-box;
}

.avatar::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
	border-radius: 50%;
	z-index: -1;
	animation: rotate 6s linear infinite;
}

.avatar-inner {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--darker);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	color: white;
}

.user-info {
	margin-top: 20px;
}

.user-name {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 12px;
	text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
	letter-spacing: -0.5px;
}

.user-title {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--gray);
	margin-bottom: 15px;
	font-family: 'Space Grotesk', sans-serif;
}

.user-stats {
	display: flex;
	justify-content: center;
	gap: 25px;
	font-size: 0.95rem;
	color: var(--gray);
}

.stat i {
	margin-right: 6px;
	color: var(--primary-light);
}

.glitch {
	position: relative;
}

.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.glitch::before {
	color: var(--secondary);
	animation: glitch-anim-1 3s infinite;
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
	transform: translate(-2px, -2px);
}

.glitch::after {
	color: var(--accent);
	animation: glitch-anim-2 3s infinite;
	clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
	transform: translate(2px, 2px);
}

.bio-section {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	border-radius: 20px;
	padding: 30px;
	margin: 30px 0;
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-lg);
}

.bio-content {
	max-width: 700px;
	margin: 0 auto;
}

.bio-text {
	font-size: 1.15rem;
	line-height: 1.7;
	margin-bottom: 25px;
	font-weight: 300;
}

.bio-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.tag {
	background: rgba(139, 92, 246, 0.15);
	color: var(--primary-light);
	padding: 8px 16px;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid rgba(139, 92, 246, 0.3);
	transition: var(--transition);
}

.tag:hover {
	background: rgba(139, 92, 246, 0.3);
	transform: translateY(-2px);
}

.links-grid {
	display: grid;
	gap: 18px;
	margin: 25px 0;
}

.link-card {
	position: relative;
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	border-radius: 18px;
	padding: 24px;
	text-decoration: none;
	color: var(--light);
	display: flex;
	align-items: center;
	gap: 20px;
	transition: var(--transition);
	border: 1px solid var(--glass-border);
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.link-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(to bottom, var(--primary), var(--secondary));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.3s ease;
	z-index: 1;
}

.link-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(139, 92, 246, 0.3);
	background: rgba(139, 92, 246, 0.08);
}

.link-card:hover::before {
	transform: scaleY(1);
}

.link-icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
	transition: var(--transition);
	position: relative;
	overflow: hidden;
	z-index: 2;
}

.link-card:hover .link-icon {
	transform: scale(1.2) rotate(10deg);
}

.link-content {
	flex: 1;
	z-index: 2;
}

.link-title {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Space Grotesk', sans-serif;
}

.link-description {
	font-size: 1.05rem;
	color: var(--gray);
	line-height: 1.5;
	font-weight: 300;
}

.icon-website { background: linear-gradient(45deg, var(--primary), var(--secondary)); }
.icon-youtube { background: linear-gradient(45deg, #ff0000, #cc0000); }
.icon-spotify { background: linear-gradient(45deg, #1db954, #191414); }
.icon-instagram { background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.icon-twitter { background: linear-gradient(45deg, #1da1f2, #1a91da); }
.icon-tiktok { background: linear-gradient(45deg, #69c9d0, #fe2c55); }
.icon-github { background: linear-gradient(45deg, #333, #666); }
.icon-linkedin { background: linear-gradient(45deg, #0077b5, #005582); }
.icon-email { background: linear-gradient(45deg, var(--secondary), #be185d); }
.icon-phone { background: linear-gradient(45deg, var(--success), #059669); }
.icon-location { background: linear-gradient(45deg, var(--warning), #d97706); }
.icon-portfolio { background: linear-gradient(45deg, var(--accent), #0284c7); }

.social-bar {
	margin: 40px 0 25px;
}

.social-container {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.social-item {
	width: 70px;
	height: 70px;
	border-radius: 20px;
	background: var(--glass-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--light);
	transition: var(--transition);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.social-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.social-item:hover::before {
	opacity: 0.2;
}

.social-item:hover {
	transform: translateY(-10px) scale(1.1);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.social-item i {
	font-size: 28px;
	margin-bottom: 8px;
	z-index: 2;
	transition: var(--transition);
}

.social-item:hover i {
	transform: scale(1.2);
}

.platform-name {
	font-size: 0.75rem;
	font-weight: 600;
	z-index: 2;
	text-align: center;
}

.nebula-footer {
	text-align: center;
	padding: 30px 20px 20px;
	color: var(--gray);
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.footer-text a {
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
	text-decoration: none;
	transition: color 0.5s ease;
}

.footer-text a:hover {
	color: var(--secondary);
	text-decoration: none;
}

.footer-text a:active {
	color: var(--primary-light);
	text-decoration: none;
}

.footer-links {
	display: flex;
	gap: 20px;
}

.footer-link {
	color: var(--gray);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: var(--transition);
}

.footer-link:hover {
	color: var(--primary-light);
	text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.theme-toggle {
	position: absolute;
	top: 25px;
	right: 25px;
	width: 50px;
	height: 50px;
	border-radius: 16px;
	background: var(--glass-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--light);
	cursor: pointer;
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: var(--transition);
	z-index: 100;
}

.theme-toggle:hover {
	transform: rotate(30deg) scale(1.1);
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4);
}

.theme-toggle i {
	font-size: 20px;
	transition: opacity 0.3s ease;
}

.theme-toggle .fa-sun {
	opacity: 0;
}

.light-mode .theme-toggle .fa-moon {
	opacity: 0;
}

.light-mode .theme-toggle .fa-sun {
	opacity: 1;
}

.audio-visualizer {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	z-index: 1000;
	display: none;
}

.visualizer-bars {
	height: 100%;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	padding: 0 5px;
}

.visualizer-bar {
	flex: 1;
	background: linear-gradient(to top, var(--primary), var(--secondary));
	border-radius: 2px 2px 0 0;
	transition: height 0.1s ease;
}

@keyframes pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes glitch-anim-1 {
	0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(-2px, -2px); }
	20% { clip-path: polygon(0 10%, 100% 10%, 100% 55%, 0 55%); transform: translate(-3px, -3px); }
	40% { clip-path: polygon(0 5%, 100% 5%, 100% 50%, 0 50%); transform: translate(-1px, -1px); }
	60% { clip-path: polygon(0 15%, 100% 15%, 100% 60%, 0 60%); transform: translate(-2px, 0px); }
	80% { clip-path: polygon(0 0%, 100% 0%, 100% 45%, 0 45%); transform: translate(0px, -2px); }
}

@keyframes glitch-anim-2 {
	0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(2px, 2px); }
	20% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); transform: translate(3px, 3px); }
	40% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(1px, 1px); }
	60% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); transform: translate(2px, 0px); }
	80% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0px, 2px); }
}

@media (max-width: 768px) {
	.nebula-header { padding: 30px 15px 20px; }
	.avatar { width: 120px; height: 120px; }
	.avatar-inner { width: 100px; height: 100px; font-size: 36px; }
	.avatar-glow { width: 140px; height: 140px; }
	.user-name { font-size: 2.2rem; }
	.user-title { font-size: 1.1rem; }
	.bio-section { padding: 25px 20px; }
	.bio-text { font-size: 1.05rem; }
	.links-grid { gap: 15px; }
	.link-card { padding: 20px; }
	.link-icon { width: 50px; height: 50px; font-size: 20px; }
	.link-title { font-size: 1.2rem; }
	.link-description { font-size: 1rem; }
	.social-item { width: 60px; height: 60px; }
	.social-item i { font-size: 24px; }
	.platform-name { font-size: 0.7rem; }
}

@media (max-width: 480px) {
	.nebula-header { padding: 25px 10px 15px; }
	.avatar { width: 100px; height: 100px; }
	.avatar-inner { width: 80px; height: 80px; font-size: 30px; }
	.avatar-glow { width: 120px; height: 120px; }
	.user-name { font-size: 1.8rem; }
	.user-title { font-size: 1rem; }
	.user-stats { gap: 15px; font-size: 0.9rem; }
	.bio-section { padding: 20px 15px; }
	.bio-text { font-size: 1rem; }
	.links-grid { gap: 12px; }
	.link-card { padding: 16px; flex-direction: column; text-align: center; }
	.link-icon { width: 45px; height: 45px; font-size: 18px; }
	.link-title { font-size: 1.15rem; }
	.link-description { font-size: 0.95rem; }
	.social-container { gap: 10px; }
	.social-item { width: 55px; height: 55px; }
	.social-item i { font-size: 20px; margin-bottom: 5px; }
	.platform-name { font-size: 0.65rem; }
	.nebula-footer { padding: 25px 15px 15px; }
	.footer-text { font-size: 0.95rem; }
	.footer-links { gap: 15px; }
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(15, 23, 42, 0.5);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, var(--primary), var(--secondary));
	border-radius: 5px;
	border: 2px solid rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, var(--primary-light), var(--secondary));
}