*,
*:before,
*:after {
	box-sizing: inherit;
	-webkit-user-select: inherit;
	user-select: inherit;
	-webkit-user-drag: inherit;
	-webkit-tap-highlight-color: inherit;
	backface-visibility: inherit;
}

* {
	margin: 0;
	padding: 0;
}

html {
	line-height: 1;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

main,
canvas {
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

ol,
ul {
	list-style: none;
}

:root {
	--c-bg: hsl(0, 0%, 90%);
	--c-text: hsl(0, 0%, 10%);
	--pad: max(20px, 4vmin);
	--fs-text: 12px;
	/* Page section top offset — scales with viewport height for tall/4K screens */
	--page-offset: clamp(96px, 15vmin, 350px);
}

@media (prefers-color-scheme: dark) {
	:root {
		--c-bg: hsl(0, 0%, 5%);
		--c-text: hsl(0, 0%, 95%);
	}
}

@media (min-width: 800px) {
	:root {
		/* Fluid: 13px → 22px from ~1857px to ~3142px viewport width */
		--fs-text: clamp(13px, 0.7vw, 22px);
	}
}

@font-face {
	font-family: "Geist";
	font-weight: 200;
	font-display: swap;
	src: url("/assets/font/Geist-ExtraLight.woff2") format("woff2");
}

@font-face {
	font-family: "Geist";
	font-weight: 400;
	font-display: swap;
	src: url("/assets/font/Geist-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Geist";
	font-weight: 600;
	font-display: swap;
	src: url("/assets/font/Geist-SemiBold.woff2") format("woff2");
}

html,
body {
	height: 100%;
}

body {
	background-color: var(--c-bg);
	font-family: "Geist";
	font-weight: 600;
	font-size: var(--fs-text);
	font-feature-settings: "palt";
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
}

#Page {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--c-bg);
	color: #fff;
	white-space: nowrap;
	transition-property: background-color;
	transition-duration: 0.9s;
	transition-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
}

#Load {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	will-change: opacity;
	background-color: var(--c-bg);
	color: var(--c-text);
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.5em;
	/* Fluid: 30px (mobile) → 80px (UHD+) */
	font-size: clamp(30px, 2.5vw, 80px);
}

#Load .l1 {
	font-weight: 400;
}

#Load .l2 {
	font-weight: 200;
}

#Background {
	position: fixed;
	z-index: 1;
	left: var(--pad);
	right: var(--pad);
	top: var(--pad);
	bottom: var(--pad);
	pointer-events: none;
	overflow: hidden;
}

.mask {
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.mask_top,
.mask_bottom {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--pad);
	background-color: var(--c-bg);
	transition-property: background-color;
	transition-duration: 0.9s;
	transition-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
	opacity: 0.9;
}

.mask_top {
	top: 0;
}

.mask_bottom {
	bottom: 0;
}

.frame {
	position: fixed;
	z-index: 10;
	left: var(--pad);
	right: var(--pad);
	top: var(--pad);
	bottom: var(--pad);
	mix-blend-mode: difference;
	pointer-events: none;
}

.frame_line {
	position: absolute;
	background-color: #fff;
	opacity: 0.5;
}

.frame_line-left {
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
}

.frame_line-right {
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
}

.frame_line-top {
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
}

.frame_line-bottom {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
}

.content {
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	mix-blend-mode: difference;
}

.content_inner {
	position: relative;
	min-height: 100%;
}

.text-btn {
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
}

@media (hover: hover) {
	.text-btn:hover {
		opacity: 0.25;
	}
}

.siteHeader {
	position: fixed;
	z-index: 10;
	left: calc(var(--pad) * 2);
	top: calc(var(--pad) * 2);
	mix-blend-mode: difference;
}

.siteHeader_title {
	margin: -0.1em 0 0 0.01em;
	font-weight: 200;
	/* Fluid: 30px (mobile) → 150px (4K) */
	font-size: clamp(30px, 4.5vw, 150px);
}

.siteHeader_label {
	margin-top: 5px;
	font-weight: 400;
}

.siteHeader_nav {
	margin-top: clamp(30px, 4vmin, 80px);
}

.siteHeader_nav ol {
	display: flex;
	flex-direction: column;
	row-gap: clamp(10px, 1.5vmin, 30px);
}

.siteHeader_nav ol li {
	position: relative;
}

.siteHeader_nav ol li ._dot {
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 10px;
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
}

.siteHeader_nav ol li ._text {
	position: relative;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
}

.siteHeader_nav ol li ._text::before {
	content: "";
	display: block;
	position: absolute;
	left: -5px;
	top: -5px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
}

@media (hover: hover) {
	.siteHeader_nav ol li ._text:hover {
		opacity: 0.25;
	}
}

.siteHeader_nav ol li.is-selected {
	pointer-events: none;
}

.siteHeader_nav ol li.is-selected ._dot {
	opacity: 1;
	transform: scale(1);
}

.siteHeader_nav ol li.is-selected ._text {
	opacity: 0;
}

.page {
	display: none;
	width: 100%;
	min-height: calc(var(--vh, 1vh) * 100);
}

.page.is-leaving {
	position: absolute;
	left: 0;
	top: 0;
}

.home {
	position: absolute;
	right: calc(var(--pad) * 2);
	bottom: calc(var(--pad) * 2);
	white-space: wrap;
	overflow-y: visible;
}

.home_aboutme {
	line-height: 1.5;
}

.home_aboutme span {
	display: block;
}

@media (max-width: 480px) {
	.home {
		padding-bottom: calc(var(--pad) * 3);
	}
}

@media (max-width: 375px) {
	.home {
		padding-bottom: calc(var(--pad) * 4);
	}
}

.projects {
	padding: calc(var(--pad) * 2 + var(--page-offset)) calc(var(--pad) * 2);
	text-align: right;
	white-space: nowrap;
}

.project_list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: clamp(20px, 2.5vmin, 60px);
}

@media (min-width: 1280px) {
	.project_item {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: baseline;
		column-gap: clamp(10px, 1.5vmin, 30px);
	}
}

.project_title {
	font-weight: 200;
	font-size: 8vw;
	text-align: right;
}

@media (min-width: 800px) {
	.project_title {
		/* Fluid: 50px (HD) → 140px (4K) */
		font-size: clamp(50px, 3.5vw, 140px);
	}
}

.project_info {
	margin-top: 5px;
}

@media (min-width: 1280px) {
	.project_info {
		margin-top: 0;
	}
}

.experience {
	padding: calc(var(--pad) * 2 + var(--page-offset)) calc(var(--pad) * 2);
	text-align: right;
	white-space: nowrap;
}

.experience_list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: clamp(20px, 2.5vmin, 60px);
}

@media (min-width: 1280px) {
	.experience_item {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: baseline;
		column-gap: clamp(10px, 1.5vmin, 30px);
	}
}

.experience_title {
	font-weight: 200;
	font-size: 8vw;
	text-align: right;
}

@media (min-width: 800px) {
	.experience_title {
		/* Fluid: 50px (HD) → 140px (4K) */
		font-size: clamp(50px, 3.5vw, 140px);
	}
}

.experience_info {
	margin-top: 5px;
}

@media (min-width: 1280px) {
	.experience_info {
		margin-top: 0;
	}
}

.skills {
	padding: calc(var(--pad) * 2 + var(--page-offset)) calc(var(--pad) * 2);
	text-align: right;
	white-space: nowrap;
}

.skills_list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: clamp(8px, 1vmin, 20px);
}

@media (min-width: 1280px) {
	.skills_item {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: baseline;
		column-gap: clamp(20px, 2.5vmin, 60px);
	}
}

.skills_title {
	font-weight: 200;
	font-size: 6vw;
	text-align: right;
}

@media (min-width: 800px) {
	.skills_title {
		/* Fluid: 45px (HD) → 120px (4K) */
		font-size: clamp(45px, 3vw, 120px);
	}
}

.skills_info {
	margin-bottom: clamp(20px, 3vmin, 80px);
}

.education {
	padding: calc(var(--pad) * 2 + var(--page-offset)) calc(var(--pad) * 2);
	text-align: right;
	white-space: nowrap;
}

.education_list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	row-gap: clamp(8px, 1vmin, 20px);
}

@media (min-width: 1280px) {
	.education_item {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		align-items: baseline;
		column-gap: clamp(20px, 2.5vmin, 60px);
	}
}

.education_title {
	font-weight: 200;
	font-size: 6vw;
	text-align: right;
}

@media (min-width: 800px) {
	.education_title {
		/* Fluid: 45px (HD) → 120px (4K) */
		font-size: clamp(45px, 3vw, 120px);
	}
}

.education_info {
	margin-bottom: clamp(20px, 3vmin, 80px);
}

.info {
	position: absolute;
	left: calc(var(--pad) * 2);
	bottom: calc(var(--pad) * 2);
	white-space: nowrap;
}

@media (min-width: 1280px) {
	.info {
		position: relative;
		left: auto;
		bottom: auto;
		height: calc(var(--vh, 1vh) * 100);
	}
}

@media (min-width: 1280px) {
	.info_item {
		position: absolute;
	}
}

.info_item + .info_item {
	margin-top: clamp(30px, 4vmin, 80px);
}

@media (min-width: 1280px) {
	.info_item + .info_item {
		margin-top: 0;
	}
}

@media (min-width: 1280px) {
	.info_item-1 {
		right: 20%;
		top: calc(50% - 19px);
	}
}

@media (min-width: 1280px) {
	.info_item-2 {
		right: calc(var(--pad) * 2);
		top: calc(var(--pad) * 2);
	}
}

@media (min-width: 1280px) {
	.info_item-3 {
		right: calc(var(--pad) * 2);
		bottom: calc(var(--pad) * 2);
	}
}

@media (max-width: 480px) {
	.info_item-3 {
		padding-bottom: calc(var(--pad) * 3);
	}
}

@media (max-width: 375px) {
	.info_item-3 {
		padding-bottom: calc(var(--pad) * 4);
	}
}

.info_content {
	line-height: 1.5;
}

.info_content .is-light {
	font-weight: 400;
}


/* ─── Frame entrance animation ───────────────────────────────────────────── */

.frame_line-left,
.frame_line-right {
	transform: scaleY(0);
	transform-origin: top;
}

.frame_line-top {
	transform: scaleX(0);
	transform-origin: left;
}

.frame_line-bottom {
	transform: scaleX(0);
	transform-origin: right;
}

.frame.is-visible .frame_line-left,
.frame.is-visible .frame_line-right {
	transform: scaleY(1);
	transition: transform 1.2s cubic-bezier(0.1, 0.4, 0.2, 1);
}

.frame.is-visible .frame_line-top,
.frame.is-visible .frame_line-bottom {
	transform: scaleX(1);
	transition: transform 1.2s cubic-bezier(0.1, 0.4, 0.2, 1);
}

/* ─── Scroll hint ────────────────────────────────────────────────────────── */

#ScrollHint {
	position: fixed;
	z-index: 10;
	bottom: calc(var(--pad) * 2);
	left: 50%;
	mix-blend-mode: difference;
	color: #fff;
	font-weight: 200;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.1, 0.4, 0.2, 1);
	animation: scrollBounce 1.5s ease-in-out infinite;
}

#ScrollHint.is-visible {
	opacity: 1;
}

@keyframes scrollBounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(5px); }
}