/* ====== Reset / Base ====== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ====== Theme ====== */
:root {
	--bg: hsl(240 10% 6%);
	--bg-2: hsl(240 10% 8%);
	--surface: hsl(240 14% 12% / 0.6);
	--surface-strong: hsl(240 14% 16% / 0.9);
	--text: hsl(0 0% 98%);
	--muted: hsl(240 5% 65%);
	--accent: hsl(266 100% 70%);
	--accent-2: hsl(195 100% 52%);
	--ring: hsl(266 100% 70% / 0.35);
	--shadow: 0 10px 30px hsl(0 0% 0% / 0.35);
	--radius: 16px;
	--space: 18px;
	--space-lg: 28px;
	--container: 1000px;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: hsl(0 0% 99%);
		--bg-2: hsl(0 0% 100%);
		--surface: hsl(0 0% 100% / 0.7);
		--surface-strong: hsl(0 0% 100% / 0.95);
		--text: hsl(240 10% 6%);
		--muted: hsl(240 5% 45%);
		--ring: hsl(266 80% 40% / 0.35);
	}
}

/* ====== Background / Typography ====== */
body {
	font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 20% -10%, hsl(266 100% 60% / .25), transparent 60%),
		radial-gradient(900px 500px at 110% 10%, hsl(195 100% 50% / .25), transparent 60%),
		linear-gradient(180deg, var(--bg), var(--bg-2));
	background-attachment: fixed;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

/* smooth scroll and anchor offset for sticky nav */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* ====== Layout ====== */
main { max-width: var(--container); margin: 0 auto; padding: 120px var(--space) var(--space-lg); }

/* Card-like sections */
main > div {
	background: var(--surface);
	backdrop-filter: saturate(130%) blur(12px);
	-webkit-backdrop-filter: saturate(130%) blur(12px);
	border: 1px solid hsl(0 0% 100% / 0.08);
	border-radius: var(--radius);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

/* space between cards */
main > div + div { margin-top: var(--space-lg); }

/* subtle card glow */
main > div::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: inherit;
	background: radial-gradient(600px 200px at 10% -10%, var(--ring), transparent 60%);
	pointer-events: none;
}

/* ====== Navbar ====== */
.navbar {
	position: sticky; top: 0; z-index: 50;
	display: flex; gap: 10px; align-items: center; justify-content: center;
	padding: 14px clamp(10px, 2vw, 24px);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	background: linear-gradient(180deg, hsl(0 0% 100% / 0.06), hsl(0 0% 100% / 0.02));
	border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}

.navbar a {
	color: var(--text);
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 999px;
	position: relative;
}

.navbar a::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s ease;
	border-radius: 2px;
}

.navbar a:hover::after, .navbar a:focus-visible::after { transform: scaleX(1); }
.navbar a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ====== Headings & text ====== */
h1, h2 { margin: 0 0 12px; line-height: 1.2; }
h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(90deg, var(--text), hsl(0 0% 100% / .7));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; }
p { margin: 8px 0; color: var(--text); opacity: .92; }
.muted { color: var(--muted); }

/* ====== Top / Hero ====== */
#top { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(14px, 3vw, 28px); align-items: center; }
@media (max-width: 820px) { #top { grid-template-columns: 1fr; } }

#top img {
	width: 100%; height: auto; border-radius: calc(var(--radius) - 6px);
	box-shadow: 0 6px 24px hsl(0 0% 0% / .35);
	border: 1px solid hsl(0 0% 100% / .08);
}

/* ====== About ====== */
#about ul { margin-top: 8px; display: grid; gap: 8px; }
#about li { padding-left: 12px; position: relative; }
#about li::before {
	content: ""; position: absolute; left: 0; top: .9em; width: 6px; height: 6px;
	border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ====== Links section ====== */
#link ul { display: grid; gap: 12px; }
#link li {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px;
	border-radius: 12px; border: 1px solid hsl(0 0% 100% / .08);
	background: linear-gradient(180deg, hsl(0 0% 100% / .05), hsl(0 0% 100% / .02));
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
#link li:hover { transform: translateY(-2px); border-color: hsl(0 0% 100% / .16); }

#link img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px hsl(0 0% 0% / .25)); }
#link a { font-weight: 700; color: var(--text); position: relative; }
#link a::after { content: "↗"; margin-left: 8px; color: var(--accent-2); opacity: .9; }

/* ====== Contact ====== */
#contact p { font-weight: 600; }

/* ====== Focus & Selection ====== */
::selection { background: hsl(266 100% 60% / .35); }

/* ====== Micro animations ====== */
@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
main > div { animation: rise .6s ease both; }
main > div:nth-child(1) { animation-delay: .02s; }
main > div:nth-child(2) { animation-delay: .08s; }
main > div:nth-child(3) { animation-delay: .14s; }
main > div:nth-child(4) { animation-delay: .2s; }

/* ====== Utilities ====== */
.hidden { display: none !important; }
.center { text-align: center; }