*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	color-scheme: dark;
}

body {
	margin: 0;
	font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
	background: #1d1d1f;
	color: #f5f5f7;
	min-height: 100vh;
}

.home-page {
	position: relative;
	min-height: 100vh;
	padding: 4rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1d1d1f;
	overflow: hidden;
	isolation: isolate;
}

.background-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.device-icon {
	position: absolute;
	opacity: 0.05;
}

.device-icon svg {
	width: 3.25rem;
	height: 3.25rem;
	fill: currentColor;
	stroke: none;
}

.device-icon .device-icon-cutout {
	fill: #1d1d1f;
}

.device-icon.icon-laptop {
	top: 15%;
	left: 12%;
	color: #86868b;
}

.device-icon.icon-tablet {
	top: 18%;
	right: 10%;
	color: #0071e3;
}

.device-icon.icon-phone {
	bottom: 20%;
	left: 8%;
	color: #bf5af2;
}

.device-icon.icon-globe {
	bottom: 15%;
	right: 12%;
	color: #5ac8fa;
}

.device-icon.icon-code {
	top: 55%;
	left: 15%;
	color: #30d158;
}

.device-icon.icon-terminal {
	top: 60%;
	right: 15%;
	color: #ff9f0a;
}

.device-icon.icon-database {
	bottom: 45%;
	left: 20%;
	color: #ffd60a;
}

.device-icon.icon-file {
	bottom: 48%;
	right: 18%;
	color: #ff375f;
}

.skill-tag {
	position: absolute;
	font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.75rem;
	color: var(--color, #f5f5f7);
	opacity: 0.25;
	top: var(--top);
	left: var(--left, auto);
	right: var(--right, auto);
	animation: var(--animation, float) 18s ease-in-out infinite;
	animation-delay: var(--delay, 0s);
	white-space: nowrap;
}

.home-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	text-align: center;
}

.avatar-wrapper {
	width: 128px;
	height: 128px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	overflow: hidden;
}

.avatar-wrapper img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid #2c2c2e;
	background: #2c2c2e;
	object-fit: cover;
	image-rendering: pixelated;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.home-content h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 5vw, 1.875rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.role {
	margin: 0 0 1.5rem;
	font-size: 1.1rem;
	color: #86868b;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #86868b;
	transition: color 0.2s ease;
}

.icon-button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon-button svg.key-icon {
	fill: currentColor;
	stroke: none;
	opacity: 0.82;
}

.icon-button:hover,
.icon-button:focus-visible {
	color: #f5f5f7;
}

.icon-button:focus-visible {
	outline: 2px solid #5ac8fa;
	outline-offset: 2px;
}

@keyframes float {
	0% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(60px, -80px, 0);
	}
	50% {
		transform: translate3d(-70px, -30px, 0);
	}
	75% {
		transform: translate3d(40px, -100px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes float-alt {
	0% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(-50px, 70px, 0);
	}
	50% {
		transform: translate3d(80px, 100px, 0);
	}
	75% {
		transform: translate3d(-60px, 50px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes float-wide {
	0% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(-90px, -60px, 0);
	}
	50% {
		transform: translate3d(100px, 80px, 0);
	}
	75% {
		transform: translate3d(50px, -70px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 720px) {
	.home-page {
		padding: 3rem 1rem;
	}

	.device-icon,
	.skill-tag {
		display: none;
	}
}