/* ─── Theme Variables ─────────────────────────────────────────── */
:root {
	--bg:               #0f0f0f;
	--card-bg:          #1a1a1a;
	--card-border:      #2a2a2a;
	--text:             #e8e8e8;
	--text-muted:       #888;
	--icon-btn-bg:      #242424;
	--icon-btn-border:  #333;
	--icon-color:       #aaa;
	--footer-text:      #444;
	--footer-border:    #1e1e1e;
	--shadow:           rgba(0, 0, 0, 0.5);
	--accent:           #00e676;
	--accent-hover:     #69f0ae;
	--accent-on:        #0a0a0a;
}

[data-theme="light"] {
	--bg:               #f0f2f5;
	--card-bg:          #ffffff;
	--card-border:      #e0e0e0;
	--text:             #1a1a1a;
	--text-muted:       #666;
	--icon-btn-bg:      #f0f0f0;
	--icon-btn-border:  #ddd;
	--icon-color:       #555;
	--footer-text:      #999;
	--footer-border:    #e0e0e0;
	--shadow:           rgba(0, 0, 0, 0.08);
	--accent:           #00a651;
	--accent-hover:     #00c962;
	--accent-on:        #ffffff;
}

/* ─── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--text);
	transition: background 0.3s, color 0.3s;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.font-header {
	font-family: 'Inconsolata', monospace;
}

nav.navbar {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid #1e1e1e;
	background-color: #0a0a0a !important;
}

#green-terminal {
	color: #00e676;
	letter-spacing: 0.03em;
}

#green-terminal:hover {
	color: #69f0ae;
}

.nav-link {
	color: #aaa !important;
	transition: color 0.2s;
}

.nav-link:hover {
	color: #00e676 !important;
}

/* ─── Theme Toggle Button ─────────────────────────────────────── */
.theme-toggle {
	background: none;
	border: 1px solid #444;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 0.95rem;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
	flex-shrink: 0;
}

.theme-toggle:hover {
	color: #00e676;
	border-color: #00e676;
	background: rgba(0, 230, 118, 0.08);
}

/* ─── Layout ──────────────────────────────────────────────────── */
.flex-wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 60px;
}

main.container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

/* ─── Profile Card ────────────────────────────────────────────── */
.profile-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 1.5rem;
	padding: 3rem 4rem;
	box-shadow: 0 8px 40px var(--shadow);
	max-width: 480px;
	width: 100%;
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* ─── Profile Picture ─────────────────────────────────────────── */
.user-picture {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--accent);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent);
	transition: border-color 0.3s;
}

/* ─── Name ────────────────────────────────────────────────────── */
#user-name {
	font-family: 'Concert One', cursive;
	font-size: 3.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text);
	line-height: 1;
	transition: color 0.3s;
}

/* ─── Tagline ─────────────────────────────────────────────────── */
.user-tagline {
	font-size: 1rem;
	color: var(--text-muted);
	font-weight: 400;
	letter-spacing: 0.01em;
	transition: color 0.3s;
}

/* ─── Social Icons ────────────────────────────────────────────── */
.user-social {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--icon-btn-bg);
	border: 1px solid var(--icon-btn-border);
	color: var(--icon-color);
	font-size: 1.25rem;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.social-link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-on);
	transform: translateY(-3px);
}

/* ─── Footer ──────────────────────────────────────────────────── */
.footer {
	text-align: center;
	padding: 1.25rem;
	font-size: 0.8rem;
	color: var(--footer-text);
	border-top: 1px solid var(--footer-border);
	transition: color 0.3s, border-color 0.3s;
}

/* ─── Animations ──────────────────────────────────────────────── */

/* Blinking block cursor after the terminal prompt */
.terminal-cursor {
	display: inline-block;
	width: 0.55em;
	height: 1em;
	background: #00e676;
	margin-left: 3px;
	vertical-align: text-bottom;
	border-radius: 1px;
	animation: blink 1s step-end infinite;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

/* Profile card slides up on page load */
@keyframes card-enter {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.profile-card {
	animation: card-enter 0.55s ease-out both;
}

/* Avatar ring pulses gently */
@keyframes avatar-pulse {
	0%, 100% {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent);
	}
	50% {
		box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent),
		            0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
	}
}

.user-picture {
	animation: avatar-pulse 3s ease-in-out infinite;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
	.profile-card {
		padding: 2.5rem 2rem;
		border-radius: 1rem;
	}

	#user-name {
		font-size: 2.5rem;
	}

	.user-picture {
		width: 110px;
		height: 110px;
	}
}