/* ============ Base ============ */
:root {
	--bg: #0a0a12;
	--surface: rgba(255, 255, 255, 0.04);
	--surface-hover: rgba(255, 255, 255, 0.07);
	--border: rgba(255, 255, 255, 0.09);
	--text: #e8e8f0;
	--text-dim: #8a8a9e;
	--accent: #8b5cf6;
	--accent-2: #06b6d4;
	--glow: rgba(139, 92, 246, 0.35);
	--radius: 18px;
}

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

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.accent { color: var(--accent); }
.dim { color: var(--text-dim); }

::selection { background: var(--accent); color: #fff; }

/* ============ Custom cursor ============ */
.cursor-dot, .cursor-ring {
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	border-radius: 50%;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring { opacity: 1; }

.cursor-dot {
	width: 8px; height: 8px;
	background: var(--accent);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 12px var(--glow);
}

.cursor-ring {
	width: 36px; height: 36px;
	border: 1.5px solid rgba(139, 92, 246, 0.55);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cursor-ring.is-hovering {
	width: 52px; height: 52px;
	border-color: var(--accent-2);
	background: rgba(6, 182, 212, 0.08);
}

@media (hover: hover) and (pointer: fine) {
	body, a, button, input, textarea, select, label { cursor: none; }
}

@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none; }
}

/* ============ Background ============ */
.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.bg-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.35;
	animation: drift 22s ease-in-out infinite alternate;
}

.blob-1 {
	width: 520px; height: 520px;
	background: #6d28d9;
	top: -10%; left: -8%;
}

.blob-2 {
	width: 460px; height: 460px;
	background: #0e7490;
	bottom: -12%; right: -6%;
	animation-delay: -7s;
	animation-duration: 28s;
}

.blob-3 {
	width: 380px; height: 380px;
	background: #4c1d95;
	top: 45%; left: 55%;
	animation-delay: -14s;
	animation-duration: 25s;
}

@keyframes drift {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(60px, -50px) scale(1.12); }
	100% { transform: translate(-50px, 50px) scale(0.95); }
}

.bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
}

#particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ============ Nav ============ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 32px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: rgba(10, 10, 18, 0.55);
	border-bottom: 1px solid transparent;
	transition: border-color 0.4s ease;
}

.nav.scrolled { border-bottom-color: var(--border); }

.nav-logo {
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	letter-spacing: -0.5px;
}

.nav-links { display: flex; gap: 28px; }

.nav-links a {
	color: var(--text-dim);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	transition: color 0.25s ease;
	position: relative;
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -4px;
	width: 0; height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	border-radius: 2px;
	transition: width 0.3s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

/* ============ Hero ============ */
.hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100px 20px 60px;
	position: relative;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.profile-card {
	width: min(420px, 100%);
	padding: 44px 36px 36px;
	text-align: center;
	box-shadow: 0 0 80px -20px var(--glow);
	animation: float 7s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

.avatar-ring {
	position: relative;
	display: inline-block;
	padding: 4px;
	border-radius: 50%;
	background: conic-gradient(from var(--ring-angle, 0deg), var(--accent), var(--accent-2), var(--accent));
	animation: spin-ring 5s linear infinite;
}

@property --ring-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes spin-ring {
	to { --ring-angle: 360deg; }
}

.avatar {
	width: 96px; height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e1b31, #11101c);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 800;
	color: var(--accent);
	border: 3px solid var(--bg);
	overflow: hidden;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.status-dot {
	position: absolute;
	bottom: 8px; right: 8px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #22c55e;
	border: 3px solid var(--bg);
	animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.profile-name {
	margin-top: 18px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -1px;
	background: linear-gradient(90deg, #fff, #b8b8d8);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.profile-tag {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--text-dim);
	min-height: 3.4em;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.caret {
	color: var(--accent);
	animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.profile-socials {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 22px;
}

.social-btn {
	width: 46px; height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-dim);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-btn svg { width: 21px; height: 21px; }

.social-btn:hover {
	color: #fff;
	border-color: var(--accent);
	background: rgba(139, 92, 246, 0.15);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px -8px var(--glow);
}

.profile-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.badge {
	font-size: 11.5px;
	padding: 5px 12px;
	border-radius: 99px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-dim);
	transition: all 0.25s ease;
}

.badge:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.scroll-hint {
	position: absolute;
	bottom: 28px;
	color: var(--text-dim);
	animation: bob 2s ease-in-out infinite;
	transition: color 0.25s ease;
}

.scroll-hint svg { width: 26px; height: 26px; }
.scroll-hint:hover { color: var(--accent); }

@keyframes bob {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50%      { transform: translateY(8px); opacity: 1; }
}

/* ============ Sections ============ */
.section {
	max-width: 980px;
	margin: 0 auto;
	padding: 90px 24px;
}

.section-title {
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: -1px;
}

.section-title .mono { font-size: 0.7em; margin-right: 8px; }

.section-sub {
	color: var(--text-dim);
	margin-top: 6px;
	margin-bottom: 36px;
}

/* ============ Tool cards ============ */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.tool-card {
	display: block;
	padding: 28px 26px;
	text-decoration: none;
	color: var(--text);
	position: relative;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.tool-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.12), transparent 65%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tool-card:hover {
	transform: translateY(-6px);
	border-color: rgba(139, 92, 246, 0.45);
	background: var(--surface-hover);
	box-shadow: 0 18px 40px -18px var(--glow);
}

.tool-card:hover::before { opacity: 1; }

.tool-card.is-soon { opacity: 0.55; cursor: default; }
.tool-card.is-soon:hover { transform: none; border-color: var(--border); box-shadow: none; }

.tool-icon {
	width: 50px; height: 50px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(6, 182, 212, 0.12));
	border: 1px solid var(--border);
	color: var(--accent);
	margin-bottom: 18px;
}

.tool-icon svg { width: 24px; height: 24px; }

.tool-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: -0.3px;
}

.tool-card p {
	font-size: 14px;
	color: var(--text-dim);
	margin-bottom: 16px;
}

.tool-link {
	font-size: 12.5px;
	color: var(--accent);
}

/* ============ Skills ============ */
.marquee {
	position: relative;
	overflow: hidden;
	margin-bottom: 32px;
	padding: 14px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
	display: flex;
	gap: 0;
	width: max-content;
	animation: marquee 28s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
	font-size: 13px;
	color: var(--text-dim);
	white-space: nowrap;
	padding: 0 18px;
	position: relative;
	transition: color 0.25s ease;
}

.marquee-track span:hover { color: var(--accent); }

.marquee-track span::after {
	content: "✦";
	position: absolute;
	right: -7px;
	color: var(--accent);
	opacity: 0.5;
	font-size: 10px;
	top: 50%;
	transform: translateY(-50%);
}

@keyframes marquee {
	to { transform: translateX(-50%); }
}

.skills-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.skill-card { padding: 26px 24px; }

.skill-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.skill-icon {
	width: 42px; height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(6, 182, 212, 0.12));
	border: 1px solid var(--border);
	color: var(--accent);
}

.skill-icon svg { width: 20px; height: 20px; }

.skill-head h3 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.skill-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

.skill-row:last-child { margin-bottom: 0; }

.skill-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-dim);
}

.skill-bar {
	height: 7px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border);
	overflow: hidden;
}

.skill-fill {
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 10px var(--glow);
	transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible .skill-fill { width: var(--w, 0%); }

.skill-row:nth-child(2) .skill-fill { transition-delay: 0.1s; }
.skill-row:nth-child(3) .skill-fill { transition-delay: 0.25s; }
.skill-row:nth-child(4) .skill-fill { transition-delay: 0.4s; }
.skill-row:nth-child(5) .skill-fill { transition-delay: 0.55s; }

/* ============ Downloads ============ */
.dl-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dl-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--text);
	transition: all 0.3s ease;
}

a.dl-item:hover {
	border-color: rgba(139, 92, 246, 0.5);
	background: var(--surface-hover);
	transform: translateX(6px);
	box-shadow: -8px 0 24px -14px var(--glow);
}

.dl-item.is-soon { opacity: 0.45; }

.dl-name { font-weight: 600; font-size: 15px; }
.dl-name .mono { font-size: 12px; margin-left: 8px; }

.dl-action {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	white-space: nowrap;
}

.dl-action svg { width: 17px; height: 17px; }

/* ============ About ============ */
.about-card {
	padding: 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.about-card p { color: #c5c5d6; font-size: 15.5px; }
.about-card strong { color: var(--text); }

/* ============ Footer ============ */
.footer {
	text-align: center;
	padding: 40px 20px 48px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--text-dim);
}

/* ============ Reveal animation ============ */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============ Responsive ============ */
@media (max-width: 600px) {
	.nav { padding: 14px 20px; }
	.nav-links { gap: 18px; }
	.nav-links a { font-size: 13px; }
	.section { padding: 64px 18px; }
	.profile-card { padding: 36px 24px 30px; }
	.about-card { padding: 26px 22px; }
	.dl-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}