/* --- Variables --- */
:root {
	--color-bg: #030303;
	--color-surface: #4c4c4c;
	--color-text: #ffffff;
	--color-muted: #a1a1aa;
	--color-dim: #71717a;
	--color-divider: #52525b;
	--gap: clamp(0.5rem, 2vw, 1rem);
	--padding: clamp(0.875rem, 2vw, 1rem);
	--max-width: 1400px;
	--footer-margin: clamp(480px, 35vw, 560px);
	/* Work card animation controls */
	--project-fade-duration: 0.5s;
	--project-fade-delay-step: 0.2s;
}

* {
	box-sizing: border-box;
}

html,
body {
	display: grid;
	grid-template-rows: auto 1fr;
	background-color: var(--color-bg);
	margin: 0;
	height: 100%;
	font-family: 'Helvetica', sans-serif;
	color: var(--color-text);
	font-size: clamp(0.875rem, 1.5vw, 1rem);
	line-height: 1.2rem;
}

.page-work-loader {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-work-loader-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-work-loader-icon {
	width: 96px;
	height: 96px;
	opacity: 0;
	animation:
		loader-fade-in 0.8s ease-out forwards,
		loader-spin 8s linear infinite;
}

.page-work-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@keyframes loader-fade-in {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes loader-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

main {
	position: relative;
	min-height: 100vh;
	margin-bottom: calc(var(--footer-margin) + var(--padding) * 8);
	z-index: 1;
	background-color: var(--color-bg);
}

footer {
	position: fixed;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: auto;
	background-color: var(--color-surface);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 4rem;
	/* allow absolutely positioned pixel background inside */
	overflow: hidden;
}

a {
	color: #cccccc;

	&:hover {
		color: var(--color-text);
		opacity: 0.6;
		text-decoration: underline;
		transition: 0.3s;
	}
}

/* --- Header (769px+) --- */
.header-top-bar {
	display: contents; /* children participate in grid on desktop */
}

.header-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	margin: var(--padding);
	margin-bottom: calc(var(--padding) * 2);
	z-index: 1;
	background-color: #0a0a0a;
	font-size: 1rem;

	.header-name { grid-column: 1; }
	.header-synopsis { grid-column: 2 / span 2; }
	.header-experience { grid-column: 4; }
	.header-nav {
		grid-column: 5 / span 2;
		display: flex;
		gap: var(--gap);
	}
	.header-menu-btn {
		display: none;
	}
	.header-subtitle { grid-column: 1; }
	.header-synopsis-text {
		grid-column: 2 / span 2;
		transition: transform 0.5s ease, opacity 0.5s ease;
	}
	.header-synopsis-text.is-transitioning {
		transform: translateY(32px);
		opacity: 0;
	}
	.header-experience-list { grid-column: 4; }
}

/* --- Work page (769px+) --- */
.work-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	margin: var(--padding);
	padding-bottom: calc(var(--padding) * 4);
	z-index: 1;
	background-color: var(--color-bg);
}

.work-cascade {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 100%;
	grid-column: span 2;
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 4px;

	/* Initial state for fade-in animation */
	opacity: 0;
	transform: translateY(8px);
	will-change: opacity, transform;

	/* Activated on page load via JS */
	&.project-card-visible {
		animation-name: project-card-fade-in;
		animation-duration: var(--project-fade-duration);
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

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

@keyframes project-card-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- About page (769px+) -- */
.about-content {
	grid-column: 2 / span 2;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin-top: calc(var(--padding) * 2);

	/* Initial state for fade-in animation */
	opacity: 0;
	transform: translateY(8px);
	will-change: opacity, transform;

	/* Activated on page load via JS */
	&.about-content-visible {
		animation-name: project-card-fade-in;
		animation-duration: var(--project-fade-duration);
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
}

.about-content img {
	width: 100%;
	height: auto;
	/* Image-specific fade/shift; activated via JS */
	opacity: 0;
	transform: translateY(-8px);
	will-change: opacity, transform;

	&.about-image-visible {
		animation-name: about-image-fade-in;
		animation-duration: var(--project-fade-duration);
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
}

@keyframes about-image-fade-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.header-experience-list.about-sidebar {
	grid-column: 4;
}

/* --- Writing page (769px+) --- */
.writing-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	margin: var(--padding);
	margin-top: calc(var(--padding) * 2);
}

.writing-spacer {
	grid-column: span 4;
}

.writing-column {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap) * 2);
}

.writing-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	/* Initial state for fade-in animation */
	opacity: 0;
	transform: translateY(8px);
	will-change: opacity, transform;

	/* Activated on page load via JS */
	&.writing-card-visible {
		animation-name: project-card-fade-in;
		animation-duration: var(--project-fade-duration);
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
}

.writing-card-image {
	background-color: #d4d4d8;
	width: 100%;
	height: 6rem;
	overflow: hidden;

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

/* --- Resume page (769px+) --- */
.resume-section {
	display: grid;
	justify-items: center;
}

.resume-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
	margin: calc(var(--padding) * 4);
	padding: calc(var(--padding) * 3);
	padding-bottom: calc(var(--padding) * 4);
	max-width: var(--max-width);
	width: 100%;
	z-index: 1;
	background-color: #27272a;
}

.resume-grid .resume-section-block {
	grid-column: 1 / -1;
	margin-bottom: calc(var(--padding) * 2);
}

.resume-skills-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--gap) * 1.5);
}

.experience-point {
	margin-bottom: 0.5rem;
	margin-left: 0.5rem;
	padding-left: 1rem;
	position: relative;
}

.experience-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.experience-bullets {
	margin-top: 0.5rem;

	& > * + * {
		margin-top: 0.25rem;
	}
}

.experience-entry {
	color: #c3c3c3;
	font-size: 1rem;

	& + .experience-entry {
		margin-top: 1.5rem;
	}

	.experience-title {
		font-weight: bold;
		font-size: 1rem;
		color: var(--color-text);
	}

	.experience-role {
		font-size: 1rem;
		color: var(--color-text);
	}

	.experience-meta {
		font-size: 0.875rem;
	}
}

.resume-divider {
	border: none;
	border-top: 1px solid var(--color-divider);
	margin: 1.5rem 0;
	width: 100%;
}

/* --- Footer (769px+) --- */
.footer-pixel-area {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.footer-pixel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 4px);
	grid-auto-rows: 4px;
	width: 100%;
	height: 100%;
}

.footer-pixel {
	width: 4px;
	height: 4px;
	background-color: var(--color-surface);
}

.footer-content {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	position: relative;
	z-index: 1;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
}

.footer-text {
	grid-column: span 5;
}

.footer-text-right {
	text-align: right;
	grid-column: 2 / -1;
}

.footer-icons {
	display: flex;
	gap: var(--gap);
}

.footer-spacer {
	display: none;
}

.footer-divider {
	display: none;
}

.footer-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 1rem;
}

.footer-cta-links {
	display: flex;
	gap: 1.5rem;
}

.footer-cta-links a {
	color: var(--color-text);
	text-decoration: none;
}

.footer-icon-end {
	grid-column: 6;
	grid-row: 2;
	display: flex;
	justify-content: flex-end;
}

/* --- Mobile menu: expandable panel (in-flow, content stays visible) --- */
.header-nav-expanded {
	display: none; /* visible only in mobile breakpoint below */
}

.nav-overlay-close {
	background: none;
	border: none;
	color: var(--color-text);
	cursor: pointer;
	padding: 0.5rem;
	line-height: 0;
	min-width: 2.5rem;
	min-height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nav-overlay-close:hover {
	opacity: 0.7;
}

.nav-overlay-close svg,
.header-menu-btn svg {
	width: 1.5rem;
	height: 1.5rem;
}

.nav-overlay-links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.5rem;
	font-size: 1.25rem;
	font-weight: bold;
}

.nav-overlay-links a {
	color: var(--color-text);
}

.nav-overlay-divider {
	border: none;
	border-top: 1px solid var(--color-divider);
	width: 100%;
	margin: 0;
}

/* --- Tablet: under 768px (mobile: flex top bar + fixed expanded nav) --- */
@media (max-width: 768px) {
	:root {
		--footer-margin: 620px;
		--header-bar-height: 3.5rem;
	}

	/* Fixed flex top bar: name + menu icon only */
	.header-top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 101;
		background-color: #0a0a0a;
		padding: var(--padding);

		.header-menu-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			background: none;
			border: none;
			color: var(--color-text);
			cursor: pointer;
			padding: 0.5rem;
			line-height: 0;
		}
		.header-menu-btn:hover { opacity: 0.8; }
	}

	/* Content below fixed bar */
	.header-grid {
		grid-template-columns: 1fr;
		gap: var(--gap);
		padding-top: var(--header-bar-height);

		.header-nav {
			display: none;
		}

		.header-subtitle {
			grid-column: 1 / -1;
			order: 1;
			font-size: 1rem !important;
		}

		.header-synopsis {
			grid-column: 1 / -1;
			order: 2;
		}

		.header-synopsis-text,
		.about-content {
			grid-column: 1 / -1;
			order: 3;
		}

		.header-experience {
			grid-column: 1 / -1;
			order: 4;
		}

		.header-experience-list {
			grid-column: 1 / -1;
			order: 5;
		}

		.about-experience,
		.header-experience-list.about-sidebar {
			display: none;
		}
	}

	.page-writing .header-synopsis-text,
	.page-writing .header-experience,
	.page-writing .header-experience-list,
	.page-resume .header-synopsis-text,
	.page-resume .header-experience,
	.page-resume .header-experience-list {
		display: none;
	}

	/* Fixed expanded nav below the top bar */
	.header-nav-expanded {
		position: fixed;
		top: var(--header-bar-height);
		left: 0;
		right: 0;
		z-index: 100;
		display: block;
		background-color: #0a0a0a;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s ease;
	}
	.header-nav-expanded.is-open {
		max-height: 20rem;
		opacity: 1;
		visibility: visible;
	}
	.header-nav-expanded .nav-overlay-links {
		margin-top: calc(var(--padding) * 1.5);
		padding: var(--padding);
		padding-bottom: calc(var(--padding) * 1.5);
		font-size: 1rem;
	}

	.writing-grid {
		grid-template-columns: 1fr;
	}

	.writing-spacer {
		display: none;
	}

	.writing-column {
		grid-column: 1;
		display: block;
		column-count: 2;
		column-gap: var(--gap);
	}

	.writing-card {
		break-inside: avoid;
		margin-bottom: calc(var(--gap) * 2);
	}

	.resume-grid {
		margin: calc(var(--padding) * 2);
		padding: calc(var(--padding) * 2);
		max-width: 600px;
	}

	footer {
		gap: 2.5rem;
		padding: var(--padding);
		padding-bottom: calc(var(--padding) * 4);
	}

	.footer-icon-end {
		display: none;
	}

	.footer-grid {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.footer-grid > div:empty {
		display: none;
	}

	.footer-spacer {
		display: none;
	}

	.footer-text {
		grid-column: unset;
	}

	.footer-text-right {
		text-align: right;
		order: -1;
	}

	.footer-grid:has(.footer-text-right) {
		align-items: flex-end;
	}

	.footer-grid:has(.footer-text-right) .footer-text {
		width: 100%;
	}

	.footer-icons > div {
		width: 2.5rem !important;
		height: 2.5rem !important;
	}

	.footer-divider {
		display: block;
		border: none;
		border-top: 1px solid var(--color-divider);
		width: 100%;
		margin: 0;
	}

	.footer-cta {
		flex-direction: column;
		gap: 2.5rem;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.footer-cta-heading {
		font-size: 1.5rem;
		font-weight: bold;
		margin: 0;
	}

	.footer-cta-links {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 1.5rem;
		font-weight: bold;
		justify-content: start;
	}

	.footer-cta-links a {
		color: var(--color-text);
		text-decoration: none;
	}
}

/* --- Tablet: work page (768px and below) --- */
@media (max-width: 768px) {
	.work-grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(0.75rem, 3vw, 1.25rem);
		margin-top: 0;
		padding-bottom: calc(var(--padding) * 3);
	}

	.work-cascade {
		grid-column: span 1;
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(0.75rem, 3vw, 1.25rem);
	}

	.project-card {
		width: 100%;
	}
}

/* --- under Mobile: 520px --- */
@media (max-width: 520px) {
	:root {
		--footer-margin: 720px;
	}

	.header-grid {
		grid-template-columns: 1fr;
		row-gap: calc(var(--gap) * 1.25);

		.header-synopsis {
			display: none;
		}

		.header-synopsis,
		.header-experience,
		.header-nav,
		.header-subtitle,
		.header-synopsis-text,
		.header-experience-list,
		.about-content,
		.header-experience-list.about-sidebar {
			grid-column: 1 / -1;
		}
	}

	.work-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin: var(--padding);
		padding-bottom: calc(var(--padding) * 4);
	}

	.work-cascade {
		grid-column: 1;
		gap: 1rem;
	}

	.writing-grid {
		grid-template-columns: 1fr;
	}

	.writing-spacer {
		display: none;
	}

	.writing-column {
		grid-column: 1;
		display: flex;
		column-count: auto;
	}

	.resume-grid {
		margin: var(--padding);
		padding: var(--padding);
		max-width: 400px;
	}

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

	.footer-text {
		grid-column: 1;
	}
}