:root {
	--color-void: #050713;
	--color-ink: #080b18;
	--color-midnight: #11172b;
	--color-panel: rgba(16, 21, 41, 0.78);
	--color-panel-strong: rgba(23, 30, 58, 0.92);
	--color-line: rgba(176, 191, 255, 0.18);
	--color-line-strong: rgba(126, 231, 255, 0.36);
	--color-text: #f4f7ff;
	--color-muted: #aeb8d0;
	--color-soft: #dce5ff;
	--color-cyan: #6ee7ff;
	--color-blue: #74a7ff;
	--color-violet: #a78bfa;
	--color-gold: #f5c86a;
	--color-gold-deep: #b8842c;
	--shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.4);
	--shadow-glow: 0 0 36px rgba(110, 231, 255, 0.18);
	--radius-card: 8px;
	--radius-button: 8px;
	--container: 1120px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	background: var(--color-void);
}

body {
	margin: 0;
	min-width: 320px;
	background:
		linear-gradient(180deg, rgba(5, 7, 19, 0.92), rgba(8, 11, 24, 1) 42%, rgba(4, 6, 16, 1)),
		var(--color-void);
	color: var(--color-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.68;
	overflow-x: hidden;
}

body,
button,
input,
textarea,
select {
	letter-spacing: 0;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background-image:
		radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 20%), rgba(245, 200, 106, 0.09), transparent 18rem),
		radial-gradient(circle at 12% 18%, rgba(110, 231, 255, 0.1), transparent 24rem),
		radial-gradient(circle at 84% 8%, rgba(167, 139, 250, 0.12), transparent 26rem),
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
	background-size: auto, auto, auto, 88px 88px, 88px 88px;
}

.js body {
	--mouse-x: 50%;
	--mouse-y: 20%;
}

.motion-field {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.motion-glyph {
	position: absolute;
	display: inline-grid;
	place-items: center;
	min-width: 2.35rem;
	min-height: 2.35rem;
	padding: 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(5, 7, 19, 0.32);
	color: rgba(244, 247, 255, 0.74);
	font-size: 0.8rem;
	font-weight: 850;
	box-shadow: 0 0 24px rgba(110, 231, 255, 0.1);
	animation: glyph-float 16s ease-in-out infinite;
}

.motion-glyph--1 {
	left: 8%;
	top: 18%;
	animation-delay: -2s;
}

.motion-glyph--2 {
	left: 78%;
	top: 20%;
	animation-delay: -6s;
}

.motion-glyph--3 {
	left: 90%;
	top: 58%;
	animation-delay: -10s;
}

.motion-glyph--4 {
	left: 10%;
	top: 74%;
	animation-delay: -12s;
}

.motion-glyph--5 {
	left: 62%;
	top: 82%;
	animation-delay: -4s;
}

.motion-glyph--6 {
	left: 42%;
	top: 10%;
	animation-delay: -8s;
}

.motion-glyph--7 {
	left: 24%;
	top: 48%;
	animation-delay: -14s;
}

.ambient-stage {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	opacity: 0.58;
	background-image:
		radial-gradient(circle, rgba(245, 200, 106, 0.38) 0 1px, transparent 1.5px),
		radial-gradient(circle, rgba(110, 231, 255, 0.34) 0 1px, transparent 1.6px);
	background-position: 0 0, 48px 62px;
	background-size: 150px 150px, 230px 230px;
	animation: star-drift 28s linear infinite;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-cyan);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-gold);
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 4px;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	color: var(--color-text);
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	max-width: 10ch;
	margin-bottom: 0.38em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.8rem;
	font-weight: 700;
	text-shadow: 0 0 30px rgba(116, 167, 255, 0.22);
}

h2 {
	margin-bottom: 0.65em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.55rem;
	font-weight: 700;
}

h3 {
	margin-bottom: 0.6em;
	font-size: 1.2rem;
	font-weight: 780;
}

p {
	color: var(--color-muted);
}

ul {
	margin: 0;
	padding-left: 1.1rem;
}

li + li {
	margin-top: 0.45rem;
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 200;
	transform: translateY(-160%);
	background: var(--color-text);
	color: var(--color-ink);
	padding: 0.65rem 0.9rem;
	border-radius: var(--radius-button);
	font-weight: 800;
	text-decoration: none;
}

.skip-link:focus {
	transform: translateY(0);
}

.container {
	width: min(var(--container), calc(100% - 2rem));
	margin: 0 auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(5, 7, 19, 0.72);
	border-bottom: 1px solid var(--color-line);
	backdrop-filter: blur(18px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}

.site-nav {
	width: min(var(--container), calc(100% - 2rem));
	min-height: 4.5rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-nav__brand {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid rgba(245, 200, 106, 0.52);
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.18), rgba(167, 139, 250, 0.16)),
		rgba(10, 14, 30, 0.88);
	color: var(--color-text);
	font-weight: 850;
	text-decoration: none;
	box-shadow: 0 0 24px rgba(245, 200, 106, 0.13);
}

.site-nav__links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__links li {
	margin: 0;
}

.site-nav__links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: var(--radius-button);
	color: var(--color-soft);
	font-size: 0.92rem;
	font-weight: 720;
	text-decoration: none;
}

.site-nav__links a::after {
	content: "";
	position: absolute;
	left: 0.8rem;
	right: 0.8rem;
	bottom: 0.35rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-cyan), var(--color-gold), transparent);
	opacity: 0;
	transform: scaleX(0.25);
	transition: opacity 160ms ease, transform 160ms ease;
}

.site-nav__links a:hover,
.site-nav__links a.is-active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.055);
}

.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
	opacity: 1;
	transform: scaleX(1);
}

.section-band {
	position: relative;
	padding: 6.5rem 0;
}

.section-band::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: min(900px, calc(100% - 2rem));
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.35), rgba(245, 200, 106, 0.22), transparent);
}

.section-band--deep {
	background:
		linear-gradient(180deg, rgba(16, 21, 41, 0.44), rgba(8, 11, 24, 0.18)),
		transparent;
}

.section-band--contact {
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.08), rgba(245, 200, 106, 0.06)),
		rgba(8, 11, 24, 0.82);
}

.hero {
	padding-top: 7rem;
	padding-bottom: 5.5rem;
	background:
		radial-gradient(ellipse at 28% 26%, rgba(116, 167, 255, 0.2), transparent 30rem),
		linear-gradient(140deg, rgba(12, 18, 42, 0.82), rgba(5, 7, 19, 0.1));
}

.hero::after {
	content: "";
	position: absolute;
	inset: 5rem 0 auto;
	height: 15rem;
	pointer-events: none;
	background:
		linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.08), transparent),
		repeating-linear-gradient(90deg, transparent 0 60px, rgba(245, 200, 106, 0.045) 61px, transparent 62px);
	mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.hero__layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
	align-items: center;
	gap: 4rem;
}

.hero__title {
	margin-bottom: 1rem;
	color: var(--color-cyan);
	font-size: 1.25rem;
	font-weight: 820;
}

.hero__intro {
	max-width: 44rem;
	margin-bottom: 2rem;
	color: var(--color-soft);
	font-size: 1.12rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.05rem;
	border: 1px solid rgba(110, 231, 255, 0.52);
	border-radius: var(--radius-button);
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.9), rgba(167, 139, 250, 0.78)),
		#12213f;
	color: #05101c;
	font-weight: 850;
	text-decoration: none;
	box-shadow: 0 0 24px rgba(110, 231, 255, 0.18);
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
	transform: translateY(-2px);
	border-color: rgba(245, 200, 106, 0.75);
	color: #020617;
	box-shadow: 0 0 34px rgba(110, 231, 255, 0.28), 0 16px 30px rgba(0, 0, 0, 0.26);
}

.button--secondary {
	background:
		linear-gradient(135deg, rgba(245, 200, 106, 0.95), rgba(180, 132, 44, 0.88)),
		#2e220e;
	border-color: rgba(245, 200, 106, 0.72);
}

.button--ghost {
	background: rgba(255, 255, 255, 0.055);
	color: var(--color-text);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

.button--ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--color-text);
	border-color: rgba(110, 231, 255, 0.45);
	box-shadow: 0 0 26px rgba(110, 231, 255, 0.12);
}

.hero-art {
	position: relative;
	padding: 1.2rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
		var(--color-panel);
	box-shadow: var(--shadow-panel), var(--shadow-glow);
	overflow: hidden;
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hero-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 49%, rgba(110, 231, 255, 0.08) 50%, transparent 51%),
		linear-gradient(0deg, transparent 49%, rgba(245, 200, 106, 0.06) 50%, transparent 51%);
	background-size: 42px 42px;
	opacity: 0.42;
}

.hero-art::after,
.glass-panel::after,
.timeline-item::after,
.education-panel::after,
.project-card::after,
.skill-group::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(110, 231, 255, 0.18), transparent 16rem);
	opacity: 0;
	transition: opacity 180ms ease;
}

.hero-art:hover::after,
.glass-panel:hover::after,
.timeline-item:hover::after,
.education-panel:hover::after,
.project-card:hover::after,
.skill-group:hover::after {
	opacity: 1;
}

.portrait-frame {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: min(100%, 24rem);
	margin: 0 auto 1.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.18), rgba(245, 200, 106, 0.12)),
		rgba(5, 7, 19, 0.62);
	box-shadow: 0 0 46px rgba(110, 231, 255, 0.14), inset 0 0 42px rgba(255, 255, 255, 0.05);
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.portrait-frame::before,
.portrait-frame::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.portrait-frame::before {
	inset: -0.65rem;
	border: 1px solid rgba(110, 231, 255, 0.46);
	border-top-color: rgba(245, 200, 106, 0.72);
	border-bottom-color: rgba(167, 139, 250, 0.4);
	animation: portrait-ring 15s linear infinite;
}

.portrait-frame::after {
	inset: 1rem;
	border: 1px dashed rgba(245, 200, 106, 0.44);
	animation: portrait-ring 22s linear infinite reverse;
}

.portrait-frame img {
	position: relative;
	z-index: 2;
	width: calc(100% - 2.1rem);
	height: calc(100% - 2.1rem);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

.portrait-orbits {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	animation: orbit-slow 19s linear infinite;
}

.orbit-tag {
	position: absolute;
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	min-height: 2.6rem;
	border: 1px solid rgba(110, 231, 255, 0.38);
	border-radius: 50%;
	background: rgba(5, 7, 19, 0.68);
	color: var(--color-text);
	font-size: 0.75rem;
	font-weight: 850;
	box-shadow: 0 0 22px rgba(110, 231, 255, 0.16);
	animation: orbit-counter 19s linear infinite reverse;
}

.orbit-tag--one {
	left: 6%;
	top: 16%;
}

.orbit-tag--two {
	right: 4%;
	top: 28%;
}

.orbit-tag--three {
	right: 18%;
	bottom: 1%;
	border-color: rgba(245, 200, 106, 0.5);
}

.orbit-tag--four {
	left: 10%;
	bottom: 13%;
}

.arcane-interface {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: 22rem;
	margin-bottom: 1.25rem;
}

.arcane-interface__ring,
.arcane-interface__ring::before,
.arcane-interface__ring::after {
	position: absolute;
	border-radius: 50%;
}

.arcane-interface__ring {
	width: 15.4rem;
	aspect-ratio: 1;
	border: 1px solid rgba(110, 231, 255, 0.55);
	box-shadow: inset 0 0 36px rgba(110, 231, 255, 0.1), 0 0 36px rgba(110, 231, 255, 0.16);
}

.arcane-interface__ring::before {
	content: "";
	inset: 1.25rem;
	border: 1px dashed rgba(245, 200, 106, 0.52);
}

.arcane-interface__ring::after {
	content: "";
	inset: 3.1rem;
	border: 1px solid rgba(167, 139, 250, 0.45);
}

.arcane-interface__grid {
	position: absolute;
	width: 14rem;
	aspect-ratio: 1;
	background:
		linear-gradient(30deg, transparent 48%, rgba(110, 231, 255, 0.36) 49%, transparent 51%),
		linear-gradient(150deg, transparent 48%, rgba(245, 200, 106, 0.3) 49%, transparent 51%),
		linear-gradient(90deg, transparent 48%, rgba(167, 139, 250, 0.26) 49%, transparent 51%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	opacity: 0.65;
	animation: diagram-breathe 8s ease-in-out infinite;
}

.arcane-interface__mark {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 7.5rem;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.14), rgba(245, 200, 106, 0.12)),
		rgba(5, 7, 19, 0.78);
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.45rem;
	font-weight: 700;
	box-shadow: 0 0 30px rgba(167, 139, 250, 0.22);
	overflow: hidden;
}

.arcane-interface__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spark {
	position: fixed;
	z-index: 120;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	pointer-events: none;
	background: var(--color-gold);
	box-shadow: 0 0 18px rgba(245, 200, 106, 0.75), 0 0 28px rgba(110, 231, 255, 0.38);
	transform: translate(-50%, -50%);
	animation: spark-burst 700ms ease-out forwards;
}

.profile-panel__facts {
	position: relative;
	z-index: 1;
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.profile-panel__facts div {
	display: grid;
	gap: 0.18rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--radius-card);
	background: rgba(5, 7, 19, 0.48);
}

.profile-panel__facts dt {
	color: var(--color-cyan);
	font-size: 0.75rem;
	font-weight: 840;
	text-transform: uppercase;
}

.profile-panel__facts dd {
	margin: 0;
	color: var(--color-text);
	font-weight: 760;
}

.chapter-label {
	margin-bottom: 0.8rem;
	color: var(--color-gold);
	font-size: 0.78rem;
	font-weight: 850;
	text-transform: uppercase;
}

.section-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 4rem;
	align-items: start;
}

.section-copy p {
	font-size: 1.05rem;
}

.section-copy p:last-child,
.section-heading p:last-child {
	margin-bottom: 0;
}

.section-heading {
	max-width: 44rem;
}

.section-heading--center {
	max-width: 48rem;
	margin: 0 auto 3rem;
	text-align: center;
}

.glass-panel {
	position: relative;
	padding: 1.6rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028)),
		var(--color-panel);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.glass-panel > * {
	position: relative;
	z-index: 1;
}

.timeline {
	position: relative;
	display: grid;
	gap: 1.25rem;
}

.timeline::before {
	content: "";
	position: absolute;
	top: 1rem;
	bottom: 1rem;
	left: 7.55rem;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(110, 231, 255, 0.38), rgba(245, 200, 106, 0.26), transparent);
}

.timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 2rem;
	padding: 1.45rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
		var(--color-panel);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.timeline-item::before {
	content: "";
	position: absolute;
	top: 1.65rem;
	left: 7.1rem;
	width: 0.9rem;
	aspect-ratio: 1;
	border: 1px solid var(--color-cyan);
	border-radius: 50%;
	background: var(--color-ink);
	box-shadow: 0 0 18px rgba(110, 231, 255, 0.42);
}

.timeline-item__meta p,
.timeline-item__org {
	margin-bottom: 0;
}

.timeline-item__org {
	color: var(--color-cyan);
	font-weight: 800;
}

.timeline-item__body ul {
	margin-top: 1rem;
	color: var(--color-muted);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-bottom: 0.65rem;
	padding: 0.25rem 0.65rem;
	border: 1px solid rgba(110, 231, 255, 0.28);
	border-radius: 999px;
	background: rgba(110, 231, 255, 0.08);
	color: var(--color-cyan);
	font-size: 0.76rem;
	font-weight: 850;
}

.status-pill--gold {
	border-color: rgba(245, 200, 106, 0.35);
	background: rgba(245, 200, 106, 0.09);
	color: var(--color-gold);
}

.status-pill--violet {
	border-color: rgba(167, 139, 250, 0.35);
	background: rgba(167, 139, 250, 0.1);
	color: #d8ccff;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.project-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: -1.2rem auto 2rem;
}

.filter-chip {
	min-height: 2.5rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.045);
	color: var(--color-soft);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 780;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.filter-chip:hover,
.filter-chip[aria-pressed="true"] {
	border-color: rgba(110, 231, 255, 0.55);
	background: rgba(110, 231, 255, 0.12);
	color: #ffffff;
	box-shadow: 0 0 24px rgba(110, 231, 255, 0.13);
	transform: translateY(-1px);
}

.project-card {
	position: relative;
	display: flex;
	min-height: 100%;
	flex-direction: column;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
		var(--color-panel);
	overflow: hidden;
	box-shadow: var(--shadow-panel);
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.project-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, transparent 0 42%, rgba(110, 231, 255, 0.08) 48%, transparent 55%),
		linear-gradient(45deg, transparent 0 58%, rgba(245, 200, 106, 0.07) 62%, transparent 68%);
	opacity: 0;
	transition: opacity 180ms ease;
}

.project-card:hover {
	transform: perspective(1000px) translateY(-5px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	border-color: var(--color-line-strong);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), 0 0 36px rgba(110, 231, 255, 0.14);
}

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

.project-card__visual {
	position: relative;
	min-height: 9.2rem;
	display: grid;
	place-items: center;
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.13), rgba(167, 139, 250, 0.14), rgba(245, 200, 106, 0.07)),
		rgba(5, 7, 19, 0.54);
	overflow: hidden;
}

.project-card__visual::before,
.project-card__visual::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.project-card__visual::before {
	width: 6.8rem;
	aspect-ratio: 1;
	border: 1px solid rgba(110, 231, 255, 0.36);
	box-shadow: inset 0 0 20px rgba(110, 231, 255, 0.08);
}

.project-card__visual::after {
	width: 4.8rem;
	aspect-ratio: 1;
	border: 1px dashed rgba(245, 200, 106, 0.34);
}

.project-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-card__symbol {
	position: relative;
	z-index: 1;
	color: var(--color-text);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2rem;
	font-weight: 700;
	text-shadow: 0 0 18px rgba(110, 231, 255, 0.32);
}

.project-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.project-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.8rem;
}

.project-card__description {
	margin-bottom: 1rem;
}

.project-card__highlights {
	margin: 0 0 1rem;
	color: var(--color-muted);
	font-size: 0.93rem;
}

.tech-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: auto 0 1.1rem;
	padding: 0;
	list-style: none;
}

.tech-list li {
	margin: 0;
	padding: 0.28rem 0.58rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.045);
	color: var(--color-soft);
	font-size: 0.8rem;
	font-weight: 730;
}

.project-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.project-card__actions a {
	display: inline-flex;
	min-height: 2.4rem;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(110, 231, 255, 0.32);
	border-radius: var(--radius-button);
	background: rgba(110, 231, 255, 0.08);
	color: var(--color-text);
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
}

.project-card__actions a:hover {
	border-color: rgba(245, 200, 106, 0.45);
	background: rgba(245, 200, 106, 0.12);
	color: #ffffff;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.skill-group {
	position: relative;
	padding: 1.15rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
		var(--color-panel);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.skill-group::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(110, 231, 255, 0.08), transparent 42%, rgba(245, 200, 106, 0.05));
	opacity: 0.72;
	pointer-events: none;
}

.skill-group h3,
.skill-group ul,
.skill-group li {
	position: relative;
	z-index: 1;
}

.skill-group ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skill-group li {
	margin: 0;
	padding: 0;
}

.skill-chip {
	min-height: 2rem;
	padding: 0.33rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-soft);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 720;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.skill-chip:hover,
.skill-chip.is-active {
	border-color: rgba(245, 200, 106, 0.48);
	background: rgba(245, 200, 106, 0.12);
	color: #ffffff;
	box-shadow: 0 0 20px rgba(245, 200, 106, 0.12);
	transform: translateY(-1px);
}

.skill-focus {
	width: fit-content;
	max-width: 100%;
	margin: 1.5rem auto 0;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgba(110, 231, 255, 0.24);
	border-radius: var(--radius-card);
	background: rgba(110, 231, 255, 0.07);
	color: var(--color-soft);
	font-weight: 750;
}

.education-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 4rem;
	align-items: start;
}

.education-panel {
	position: relative;
	padding: 1.6rem;
	border: 1px solid var(--color-line);
	border-left: 4px solid var(--color-gold);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	background:
		linear-gradient(135deg, rgba(245, 200, 106, 0.08), rgba(110, 231, 255, 0.04)),
		var(--color-panel);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
	transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.education-panel > * {
	position: relative;
	z-index: 1;
}

.education-panel p:last-child {
	margin-bottom: 0;
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
	gap: 4rem;
	align-items: center;
}

.contact-layout h2 {
	font-size: 2.1rem;
}

.contact-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-list li {
	margin: 0;
}

.contact-list a,
.contact-list button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-button);
	color: #ffffff;
	background:
		linear-gradient(135deg, rgba(110, 231, 255, 0.08), rgba(167, 139, 250, 0.08)),
		rgba(255, 255, 255, 0.04);
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.contact-list a::after,
.contact-list button::after {
	content: "Open";
	color: var(--color-gold);
	font-size: 0.78rem;
	text-transform: uppercase;
}

.contact-list button::after {
	content: "Copy";
}

.contact-list a:hover,
.contact-list button:hover {
	border-color: rgba(110, 231, 255, 0.48);
	background: rgba(255, 255, 255, 0.09);
	color: #ffffff;
	box-shadow: 0 0 28px rgba(110, 231, 255, 0.12);
}

.copy-status {
	grid-column: 2;
	min-height: 1.4rem;
	margin: 0.85rem 0 0;
	color: var(--color-gold);
	font-size: 0.92rem;
	font-weight: 750;
}

.site-footer {
	background: rgba(5, 7, 19, 0.92);
	border-top: 1px solid var(--color-line);
}

.site-footer__layout {
	min-height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	font-weight: 800;
}

.reveal {
	opacity: 1;
	transform: none;
}

.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms ease;
	transition-delay: calc(var(--card-index, 0) * 70ms);
}

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

@keyframes star-drift {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-80px, 60px, 0);
	}
}

@keyframes diagram-breathe {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.98);
	}

	50% {
		opacity: 0.72;
		transform: scale(1.02);
	}
}

@keyframes glyph-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		opacity: 0.32;
	}

	45% {
		transform: translate3d(1.3rem, -2rem, 0) rotate(8deg);
		opacity: 0.78;
	}

	70% {
		transform: translate3d(-0.8rem, 0.9rem, 0) rotate(-6deg);
		opacity: 0.52;
	}
}

@keyframes portrait-ring {
	to {
		transform: rotate(360deg);
	}
}

@keyframes orbit-slow {
	to {
		transform: rotate(360deg);
	}
}

@keyframes orbit-counter {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes spark-burst {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0);
	}
}

@media (max-width: 1120px) {
	.skills-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	h1 {
		font-size: 3.4rem;
	}

	h2 {
		font-size: 2.1rem;
	}

	.site-nav {
		align-items: flex-start;
		flex-direction: column;
		padding: 1rem 0;
	}

	.site-nav__links {
		width: 100%;
		flex-wrap: wrap;
	}

	.site-nav__links a {
		padding: 0 0.65rem;
	}

	.hero__layout,
	.section-grid,
	.timeline-item,
	.education-layout,
	.contact-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.copy-status {
		grid-column: auto;
	}

	.timeline::before,
	.timeline-item::before {
		display: none;
	}

	.project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.skills-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body {
		font-size: 15px;
	}

	body::before {
		background-size: auto, auto, auto, 120px 120px, 120px 120px;
	}

	.ambient-stage {
		opacity: 0.34;
		background-size: 190px 190px, 280px 280px;
	}

	h1 {
		font-size: 2.55rem;
	}

	h2 {
		font-size: 1.8rem;
	}

	.section-band {
		padding: 4.4rem 0;
	}

	.hero {
		padding-top: 4.8rem;
	}

	.hero__actions,
	.project-card__actions,
	.site-footer__layout {
		align-items: stretch;
		flex-direction: column;
	}

	.button,
	.project-card__actions a {
		width: 100%;
	}

	.project-grid,
	.skills-grid {
		grid-template-columns: 1fr;
	}

	.arcane-interface {
		min-height: 17rem;
	}

	.portrait-frame {
		width: min(100%, 19rem);
	}

	.arcane-interface__ring {
		width: 12rem;
	}

	.arcane-interface__grid {
		width: 11rem;
	}

	.arcane-interface__mark {
		width: 6.2rem;
		font-size: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}