@font-face {
	font-family: "mono";
	src: url(../fonts/JetBrainsMono-400.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "mono";
	src: url(../fonts/JetBrainsMono-500.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "mono";
	src: url(../fonts/JetBrainsMono-600.woff2) format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "mono";
	src: url(../fonts/JetBrainsMono-700.woff2) format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "display";
	src: url(../fonts/GasoekOne-latin.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}

html {
	--bg: #101216;
	--bg-soft: rgba(20, 22, 27, 0.82);
	--card: rgba(0, 0, 0, 0.24);
	--card-hover: rgba(0, 0, 0, 0.4);
	--fg: #f4f4f7;
	--fg-muted: #ccccd6;
	--fg-dim: #a2a2b0;
	--border: rgba(255, 255, 255, 0.15);
	--border-strong: rgba(255, 255, 255, 0.36);
	--accent: #a7adff;
	--accent-soft: rgba(167, 173, 255, 0.16);
	--ok: #34d399;
	--muted: rgba(0, 0, 0, 0.28);
	--glass: rgba(10, 12, 16, 0.4);
	--glass-edge: rgba(255, 255, 255, 0.13);
	--invert-dark: 1;
	--invert-light: 0;

	--wrap: 46rem;
	--r-xs: 0.375rem;
	--r-sm: 0.5rem;
	--r-md: 0.625rem;
	--r-lg: 0.875rem;
	--r-xl: 0.75rem;
	--r-full: 999px;

	--fast: 160ms;
	--norm: 260ms;
	--slow: 420ms;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="Dark"] {
	--bg: #0a0a0a;
	--bg-soft: #121214;
	--card: rgba(255, 255, 255, 0.026);
	--card-hover: rgba(255, 255, 255, 0.055);
	--fg: #ededef;
	--fg-muted: #a0a0aa;
	--fg-dim: #6d6d78;
	--border: rgba(255, 255, 255, 0.1);
	--border-strong: rgba(255, 255, 255, 0.28);
	--accent: #838aff;
	--accent-soft: rgba(131, 138, 255, 0.14);
	--ok: #34d399;
	--muted: rgba(255, 255, 255, 0.05);
	--glass: transparent;
	--glass-edge: transparent;
	--invert-dark: 1;
	--invert-light: 0;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--fg);
	font-family: "mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	position: relative;
	transition: background-color var(--norm) var(--ease-out), color var(--norm) var(--ease-out);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background-image: url(../img/wallpaper.jpg);
	background-size: cover;
	background-position: center;
	transition: opacity var(--slow) var(--ease-out);
}

html[data-theme="Light"] body::before {
	opacity: 1;
}

::selection {
	background: var(--accent-soft);
	color: var(--fg);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--border-strong);
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

img,
svg {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

.wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 8.5rem 1.5rem 4.5rem;
}

.section {
	margin-top: 4.5rem;
	scroll-margin-top: 5.5rem;
}

.pane {
	position: relative;
}

html[data-theme="Light"] .pane::before {
	content: "";
	position: absolute;
	--frost-bleed: 6.5rem;
	--frost-fade: 7.5rem;
	inset: -1.5rem calc(var(--frost-bleed) * -1);
	z-index: -1;
	pointer-events: none;
	background: var(--glass);
	backdrop-filter: blur(18px) saturate(1.12);
	-webkit-backdrop-filter: blur(18px) saturate(1.12);
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 var(--frost-fade), #000 calc(100% - var(--frost-fade)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 var(--frost-fade), #000 calc(100% - var(--frost-fade)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

html[data-theme="Light"] .paneTop::before {
	inset: -3rem calc(var(--frost-bleed) * -1) -1.5rem;
}

html[data-theme="Light"] .paneEnd::before {
	inset: -3rem calc(var(--frost-bleed) * -1) -4.5rem;
}

@media (max-width: 1080px) {
	html[data-theme="Light"] .pane::before {
		--frost-bleed: 1.5rem;
		--frost-fade: 2.25rem;
	}
}

#stack {
	margin-top: 2.5rem;
}

.sectionHead {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.sectionHead h2 {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-dim);
	white-space: nowrap;
}

.sectionHead::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

.sectionHead a {
	font-size: 11px;
	color: var(--fg-dim);
	transition: color var(--fast) var(--ease);
}

.sectionHead a:hover {
	color: var(--fg);
}

.muted {
	color: var(--fg-muted);
}

.dim {
	color: var(--fg-dim);
}

.link {
	color: var(--accent);
	position: relative;
}

.link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--fast) var(--ease);
}

.link:hover::after {
	width: 100%;
}

.reveal {
	opacity: 0;
	transform: translateY(22px);
}

.reveal.in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--slow) var(--ease),
		transform var(--slow) var(--ease);
}

.stagger > * {
	opacity: 0;
	transform: translateY(14px);
}

.reveal.in .stagger > * {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--norm) var(--ease) calc(var(--i, 0) * 55ms),
		transform var(--norm) var(--ease) calc(var(--i, 0) * 55ms);
}

html:not(.js) .reveal,
html:not(.js) .stagger > * {
	opacity: 1;
	transform: none;
}

.shiny {
	background-image: linear-gradient(120deg, var(--fg) 0%, var(--fg) 38%, var(--accent) 50%, var(--fg) 62%, var(--fg) 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 5.5s linear infinite;
}

@keyframes shine {
	0% {
		background-position: 180% center;
	}
	100% {
		background-position: -80% center;
	}
}

footer {
	position: relative;
	margin-top: 3rem;
}

.signature {
	display: block;
	width: min(100%, 24rem);
	height: auto;
	margin: 0 auto;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0.92;
	filter: invert(var(--invert-light));
	transition: transform var(--norm) var(--ease), opacity var(--norm) var(--ease);
}

.signature:hover {
	opacity: 1;
	transform: scale(1.05);
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	z-index: 1;
}

::view-transition-new(root) {
	z-index: 999;
	clip-path: inset(0 0 100% 0);
	animation: ripple-down 700ms var(--ease-out) forwards;
}

@keyframes ripple-down {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (max-width: 640px) {
	.wrap {
		padding-top: 6.5rem;
	}

	.section {
		margin-top: 3.5rem;
	}

	#stack {
		margin-top: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal,
	.stagger > * {
		opacity: 1;
		transform: none;
	}

	.shiny {
		animation: none;
	}

	::view-transition-new(root) {
		animation: none;
		clip-path: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}