/*
	Premium Dark Portfolio Theme v2 (Readable Format)
	Purpose: Single dark aesthetic with subtle glass surfaces, motion & accessibility.
	Notes: Animations respect prefers-reduced-motion. Variables centralized in :root.
*/

/* ==========================================================================
		CSS VARIABLES
		======================================================================= */
:root {
	--bg: radial-gradient(circle at 15% 20%, #182230 0%, #121a25 38%, rgba(15,22,32,0.85) 60%),
				radial-gradient(circle at 85% 75%, #173644 0%, #121a25 55%),
				linear-gradient(140deg, #0c141d, #172332);
	--surface: rgba(32,41,54,0.78);
	--surface-alt: #222d3a;
	--border: #334155;
	--text: #f1f5f9;
	--text-soft: #94a3b8;
	--brand: #3fb9ff;
	--brand-accent: #67d1ff;
	--brand-hot: #6d7bff;
	--radius-sm: 6px;
	--radius: 14px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 10px rgba(0,0,0,.4);
	--shadow: 0 20px 50px -8px rgba(0,0,0,.55);
	--focus: 0 0 0 3px rgba(63,185,255,.55);
	--transition: .25s cubic-bezier(.4,0,.2,1);
	--font-stack: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
	--header-height: 72px;
	--gradient-text: linear-gradient(115deg,#70d7ff 0%,#9ca6ff 40%,#6dd3ff 60%,#fff 90%);
	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
	--ease-out: cubic-bezier(.16,.84,.44,1);
}

/* ==========================================================================
		BASE / RESET
		======================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-stack);
	background: var(--bg);
	background-attachment: fixed;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.45;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: var(--noise);
	mix-blend-mode: overlay;
	opacity: .3;
	animation: noiseShift 13s steps(2,end) infinite;
}
@keyframes noiseShift { 50% { transform: translate3d(0,2px,0); } }

section { scroll-margin-top: calc(var(--header-height) + 20px); }
img { max-width: 100%; display: block; }

.hidden { display: none !important; }

/* Skip link */
.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	position: fixed;
	left: 12px;
	top: 12px;
	background: var(--brand);
	color: #fff;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	width: auto;
	height: auto;
	z-index: 999;
}

.shell {
	width: 100%;
	max-width: 1100px;
	padding: 0 32px;
	margin: 0 auto;
}

/* ==========================================================================
		HEADER & NAV
		======================================================================= */
.site-header {
	position: sticky;
	top: 0;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	border-bottom: 1px solid var(--border);
	z-index: 60;
}
.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.04) inset;
	mix-blend-mode: overlay;
}
.site-header .shell {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: var(--header-height);
	padding: 8px 32px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.avatar {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	object-fit: cover;
	border: 2px solid var(--border);
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	background: var(--surface-alt);
}
.site-header .site-title {
	font-size: 1.4rem;
	letter-spacing: -.5px;
	margin: 0 0 2px;
	line-height: 1.05;
}
.site-header .subtitle {
	margin: 0;
	font-size: .65rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-soft);
	font-weight: 600;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
}
.primary-nav a {
	text-decoration: none;
	color: var(--text-soft);
	font-weight: 500;
	font-size: .78rem;
	letter-spacing: 1.1px;
	position: relative;
	padding: 10px 0 8px;
	text-transform: uppercase;
}
.primary-nav a::after {
	content: "";
	position: absolute;
	inset: auto 0 -4px 0;
	height: 2px;
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: var(--transition);
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--text); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.actions {
	margin-left: auto;
	display: flex;
	gap: 10px;
	align-items: center;
}

/* ==========================================================================
		BUTTONS
		======================================================================= */
.btn {
	--btn-bg: var(--brand);
	--btn-color: #fff;
	--btn-border: var(--brand);
	--btn-bg-hover: var(--brand-accent);
	cursor: pointer;
	appearance: none;
	font: 600 .9rem/1 var(--font-stack);
	border-radius: 10px;
	padding: 12px 18px;
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-color);
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	transition: var(--transition);
	letter-spacing: .8px;
}
.btn:hover,
.btn:focus-visible { background: var(--btn-bg-hover); box-shadow: var(--focus); outline: none; }
.btn.outline { --btn-bg: transparent; --btn-color: var(--text); --btn-border: var(--border); --btn-bg-hover: var(--surface-alt); }
.btn.large { font-size: .78rem; padding: 16px 22px 15px; letter-spacing: 1.3px; }
.btn.primary {
	background: linear-gradient(130deg,#3fb9ff,#6d7bff);
	border: 1px solid #4fa9ff;
	box-shadow: 0 2px 14px -2px rgba(0,150,210,.6), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.btn.primary:hover,
.btn.primary:focus-visible { background: linear-gradient(130deg,#6dd3ff,#7d89ff); }
/* Subtle text-style button (used for retry inline) */
.btn.subtle { --btn-bg: transparent; --btn-color: var(--brand); --btn-border: transparent; --btn-bg-hover: rgba(255,255,255,.08); padding: 6px 10px; font-size: .7rem; letter-spacing: 1.2px; }
.btn.subtle:hover,
.btn.subtle:focus-visible { box-shadow: none; text-decoration: underline; background: var(--btn-bg-hover); }

/* ==========================================================================
		HERO
		======================================================================= */
.hero { position: relative; padding: calc(var(--header-height) + 88px) 0 120px; overflow: visible; }
.hero-inner { position: relative; z-index: 2; }
/* visual sits underneath the sticky header */
.hero-visual { position: absolute; left: 0; right: 0; top: calc(-1 * var(--header-height)); bottom: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.orb {
	position: absolute;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	filter: blur(70px) saturate(1.15);
	opacity: .55;
	animation: float 19s var(--ease-out) infinite alternate;
	background: radial-gradient(circle at 30% 30%,#00c6ff 0%,#315dff 45%,#1c2e4a 85%);
}
.orb2 { top: 60%; left: 60%; background: radial-gradient(circle at 30% 30%,#315dff 0%,#6dd3ff 45%,#1c2e4a 85%); }
.orb1 { top: -10%; left: -15%; }
@keyframes float {
	0%   { transform: translate3d(0,0,0) scale(1); }
	50%  { transform: translate3d(40px,-60px,0) scale(1.05); }
	100% { transform: translate3d(-30px,40px,0) scale(1); }
}
.gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 22px rgba(111,205,255,.25)); }

.tagline {
	font-size: 2.45rem;
	line-height: 1.15;
	margin: 0 0 24px;
	max-width: 760px;
	letter-spacing: -1px;
}
.bio {
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 760px;
	color: var(--text-soft);
	margin: 0 0 26px;
}
.meta-grid {
	display: grid;
	gap: 10px 18px;
	grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
	max-width: 640px;
	margin-top: 8px;
}
.meta-grid .k {
	display: block;
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-weight: 600;
	color: var(--brand);
	margin-bottom: 4px;
}
.meta-grid .v { font-size: .85rem; color: var(--text-soft); }
.cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }


/* ==========================================================================
		PROJECTS
		======================================================================= */
.projects-section { padding: 40px 0 80px; position: relative; }
.projects-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%,rgba(90,130,255,.25),transparent 55%),
							radial-gradient(circle at 10% 80%,rgba(0,180,255,.18),transparent 60%);
	opacity: .4;
	pointer-events: none;
}
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.section-title { font-size: 1.75rem; margin: 0; letter-spacing: .5px; }
.section-sub { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--text-soft); }

.projects-grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.project-card {
	background: linear-gradient(155deg,rgba(46,59,78,.85),rgba(32,42,56,.7)) padding-box,
							linear-gradient(140deg,rgba(115,205,255,.6),rgba(90,120,255,.35),rgba(30,50,75,.3)) border-box;
	border: 1.5px solid transparent;
	border-radius: 22px;
	padding: 20px 20px 22px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--text);
	outline: none;
	min-height: 190px;
	box-shadow: 0 8px 34px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
	transition: box-shadow .45s var(--ease-out), background .6s;
}
.project-card:hover { box-shadow: 0 12px 55px -10px rgba(0,70,120,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
.project-card .card-inner { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.project-card:focus-visible { box-shadow: 0 0 0 3px rgba(120,210,255,.8), 0 0 0 1px rgba(255,255,255,.06) inset; }
.project-card h3 { font-size: 1.02rem; margin: 0; letter-spacing: .3px; font-weight: 600; }
.project-card p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-soft); }
.project-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(120,210,255,.22) 0%, rgba(120,210,255,0) 55%);opacity:0;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);mix-blend-mode:screen;} 
.project-card:hover::after{opacity:1;transform:translateZ(0);} 



/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.badge {
	font: 600 .55rem/1 var(--font-stack);
	letter-spacing: 1px;
	text-transform: uppercase;
	background: linear-gradient(160deg,var(--surface-alt),rgba(40,50,66,.6));
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 5px 9px;
	color: var(--text-soft);
	display: inline-flex;
	gap: 8px;
	align-items: center;
	backdrop-filter: blur(4px);
}
.badge svg { width: 12px; height: 12px; display: inline-block; vertical-align: middle; transform: none; }
.with-skeletons[data-state=loading] { position: relative; }
.with-skeletons[data-state=loading]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,rgba(255,255,255,.05) 20%,rgba(255,255,255,.12) 40%,rgba(255,255,255,.05) 60%);
	background-size: 200% 100%;
	animation: shimmer 2.2s linear infinite;
	border-radius: 28px;
	filter: blur(28px) opacity(.3);
}
@keyframes shimmer { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } }

/* ==========================================================================
		STACK GRID
		======================================================================= */
.stack-section { padding: 40px 0 90px; }
.stack-grid {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
}
.stack-item {
	position: relative;
	padding: 18px 16px 16px;
	background: linear-gradient(145deg,rgba(42,54,70,.75),rgba(30,40,54,.55));
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: .78rem;
	letter-spacing: .5px;
	line-height: 1.2;
	color: var(--text-soft);
	overflow: hidden;
	isolation: isolate;
}
.stack-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(120,210,255,.25),transparent 60%);
	opacity: 0;
	transition: opacity .45s var(--ease-out);
	mix-blend-mode: overlay;
}
.stack-item:hover::before { opacity: 1; }
.stack-name { font-size: .85rem; font-weight: 600; letter-spacing: .6px; color: var(--text); }
.stack-extra { font-size: .65rem; text-transform: uppercase; letter-spacing: 1.3px; color: var(--brand); font-weight: 600; }

/* ==========================================================================
		CONTACT & FOOTER
		======================================================================= */
.contact-section {
	padding: 40px 0 80px;
	background: rgba(20,25,37,.55);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--border);
}
.contact-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 20px; flex-wrap: wrap; }
.contact-link { text-decoration: none; color: var(--brand); font-weight: 500; font-size: .95rem; }
.contact-link:hover { color: var(--brand-accent); }

.site-footer {
	font-size: .75rem;
	color: var(--text-soft);
	padding: 38px 0 46px;
	border-top: 1px solid var(--border);
	margin-top: auto;
	background: color-mix(in srgb,var(--surface) 95%, transparent);
	backdrop-filter: blur(14px);
}
.site-footer p { margin: 0 0 10px; }
.small { font-size: .6rem; text-transform: uppercase; letter-spacing: 1px; }

/* ==========================================================================
		REVEAL / ANIMATIONS
		======================================================================= */
[data-animate] { opacity: 0; transform: translateY(30px); will-change: transform, opacity; }
[data-animate].in-view { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-animate=fade-up-delay].in-view { transition-delay: .1s; }
[data-animate=fade-up-later].in-view { transition-delay: .2s; }
[data-animate=fade-in].in-view { transition: opacity 1s var(--ease-out); }
[data-animate=stagger] > * { opacity: 0; transform: translateY(40px); }
[data-animate=stagger].in-view > * { animation: staggerFade .85s var(--ease-out) forwards; }
[data-animate=stagger].in-view > *:nth-child(2) { animation-delay: .05s; }
[data-animate=stagger].in-view > *:nth-child(3) { animation-delay: .1s; }
[data-animate=stagger].in-view > *:nth-child(4) { animation-delay: .15s; }
[data-animate=stagger].in-view > *:nth-child(5) { animation-delay: .2s; }
[data-animate=stagger].in-view > *:nth-child(6) { animation-delay: .25s; }
@keyframes staggerFade { 0% { opacity:0; transform: translateY(40px); } 100% { opacity:1; transform:none; } }

/* ==========================================================================
		ACCESSIBILITY: REDUCED MOTION
		======================================================================= */
@media (prefers-reduced-motion: reduce) {
	[data-animate],
	[data-animate] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
	.orb, .orb2 { animation: none; }
	.project-card, .stack-item { transition: none !important; }
}

/* ==========================================================================
		RESPONSIVE
		======================================================================= */
@media (max-width: 760px) {
	:root { --header-height: 64px; }
	.site-header .shell { flex-wrap: nowrap; gap: 16px; padding: 8px 24px; }
	.primary-nav { display: none; }
	.avatar { width: 52px; height: 52px; border-radius: 16px; }
	.actions { margin-left: auto; }
	.actions .btn.primary {
		padding: 10px 16px 9px;
		font-size: .68rem;
		letter-spacing: 1.2px;
		background: linear-gradient(120deg,#49bfff,#6a7dff);
		box-shadow: 0 2px 10px -2px rgba(0,140,200,.45);
	}
	.actions .btn.primary:hover,
	.actions .btn.primary:focus-visible { background: linear-gradient(120deg,#67d1ff,#7f8bff); }
	.hero { padding: calc(var(--header-height) + 32px) 0 78px; }
	.tagline { font-size: 1.9rem; }
	.bio { font-size: .98rem; }
	.projects-grid { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
	/* Orbs scaled down */
	.orb { width: 420px; height: 420px; filter: blur(60px) saturate(1.05); opacity: .42; }
	.orb1 { top: -8%; left: -38%; }
	.orb2 { top: 58%; left: 32%; }
}

@media (max-width: 480px) {
	.site-header .shell { padding: 8px 20px; }
	.actions .btn.primary { padding: 8px 14px 8px; font-size: .62rem; letter-spacing: 1.3px; border-radius: 10px; }
	.tagline { font-size: 1.65rem; }
	.bio { font-size: .9rem; }
	.orb { width: 340px; height: 340px; filter: blur(55px); opacity: .38; }
	.orb1 { top: -12%; left: -45%; }
	.orb2 { top: 60%; left: 25%; }
	.meta-grid { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
}