/* ===========================================================================
   English with Pedro — Living Cosmos (warm accents) + light/dark themes
   Built on Pedro Brito's "Britx" design system.
   =========================================================================== */

/* ---- Design tokens : DARK (default / Living Cosmos) ---------------------- */
:root,
[data-theme="dark"] {
	/* Foundations */
	--midnight: #0a0e1a;
	--midnight-2: #0f1526;
	--midnight-3: #141d33;

	/* Accents */
	--nebula: #3d4fd6;
	--nebula-soft: #5b6de8;
	--rain: #4db8c8;
	--rain-soft: #6dcbda;

	/* Nature / warmth */
	--moss: #4a8c5c;
	--sandstone: #c4a882;
	--clay: #9c6b4e;

	/* Type */
	--ink: #e8eaf0;
	--ink-dim: #8a94b0;
	--ink-ghost: #454e6a;

	/* Glass surface */
	--glass-bg: rgba(255, 255, 255, 0.04);
	--glass-bg-hover: rgba(255, 255, 255, 0.08);
	--glass-border: rgba(255, 255, 255, 0.08);
	--glass-border-strong: rgba(255, 255, 255, 0.14);
	--glass-blur: 12px;

	/* Page background gradient (midnight with a warm clay whisper) */
	--bg-grad: radial-gradient(
			1200px 800px at 70% -10%,
			rgba(61, 79, 214, 0.18),
			transparent 60%
		),
		radial-gradient(900px 700px at 0% 100%, rgba(156, 107, 78, 0.12), transparent 55%),
		linear-gradient(160deg, var(--midnight-2), var(--midnight));

	--blob-1: #3d4fd6;
	--blob-2: #4db8c8;
	--blob-3: #9c6b4e;
	--blob-opacity: 0.45;
	--watermark-opacity: 0.05;

	--shadow-card: 0 8px 32px rgba(10, 14, 26, 0.4);
	--shadow-lift: 0 20px 44px rgba(10, 14, 26, 0.55);

	/* Fonts */
	--font-ui: "Inter", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", "Fira Code", monospace;

	/* Spacing scale */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;

	/* Motion */
	--ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 400ms;

	--width-content: 460px;
}

/* ---- Design tokens : LIGHT -----------------------------------------------
   The design system defines dark tokens only; this is a tasteful warm-light
   extension built from the same hues (sandstone paper, midnight ink). -------- */
[data-theme="light"] {
	--midnight: #f4f1ec;
	--midnight-2: #efe9e0;
	--midnight-3: #ffffff;

	--nebula: #3a45b8;
	--nebula-soft: #4a57d0;
	--rain: #2f8c9c;
	--rain-soft: #3aa2b4;

	--moss: #3f7a4f;
	--sandstone: #8a6f48;
	--clay: #9c6b4e;

	--ink: #241f1a;
	--ink-dim: #6b6256;
	--ink-ghost: #b3a895;

	--glass-bg: rgba(255, 255, 255, 0.55);
	--glass-bg-hover: rgba(255, 255, 255, 0.78);
	--glass-border: rgba(36, 31, 26, 0.1);
	--glass-border-strong: rgba(36, 31, 26, 0.16);

	--bg-grad: radial-gradient(
			1200px 800px at 70% -10%,
			rgba(58, 69, 184, 0.1),
			transparent 60%
		),
		radial-gradient(900px 700px at 0% 100%, rgba(156, 107, 78, 0.14), transparent 55%),
		linear-gradient(160deg, #f7f3ec, #ece4d8);

	--blob-1: #6d7be8;
	--blob-2: #5fb8c8;
	--blob-3: #c4a882;
	--blob-opacity: 0.3;
	--watermark-opacity: 0.06;

	--shadow-card: 0 10px 30px rgba(72, 56, 40, 0.12);
	--shadow-lift: 0 18px 40px rgba(72, 56, 40, 0.18);
}

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

html {
	background: var(--midnight);
}

body {
	font-family: var(--font-ui);
	font-weight: 400;
	color: var(--ink);
	background: var(--bg-grad);
	background-attachment: fixed;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	padding: calc(var(--sp-7) + env(safe-area-inset-top)) var(--sp-4)
		calc(var(--sp-7) + env(safe-area-inset-bottom));
	transition: background var(--dur-slow) var(--ease-organic),
		color var(--dur-slow) var(--ease-organic);
}

/* ---- Loader -------------------------------------------------------------- */
#loader {
	position: fixed;
	inset: 0;
	background: var(--midnight);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: opacity var(--dur-slow) var(--ease-organic), visibility var(--dur-slow);
}
#loader img {
	width: 96px;
	height: 96px;
	border-radius: 28px;
	animation: orbit-pulse 2s infinite var(--ease-organic);
}
#loader.fade-out {
	opacity: 0;
	visibility: hidden;
}
@keyframes orbit-pulse {
	0%,
	100% {
		transform: scale(0.86);
		opacity: 0.65;
	}
	50% {
		transform: scale(1.04);
		opacity: 1;
	}
}

/* ---- Atmosphere (ambient background) ------------------------------------- */
.atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.blob {
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: var(--blob-opacity);
	animation: float 18s infinite var(--ease-organic);
	will-change: transform;
}
.blob1 {
	background: var(--blob-1);
	top: -110px;
	left: -90px;
}
.blob2 {
	background: var(--blob-2);
	bottom: -130px;
	right: -120px;
	animation-duration: 22s;
}
.blob3 {
	background: var(--blob-3);
	top: 42%;
	left: 58%;
	animation-duration: 27s;
}
@keyframes float {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(36px, -54px);
	}
	100% {
		transform: translate(0, 0);
	}
}
.watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(86vw, 760px);
	opacity: var(--watermark-opacity);
	user-select: none;
}
.watermark img {
	width: 100%;
	height: auto;
}

/* ---- Header controls ----------------------------------------------------- */
.controls {
	position: fixed;
	top: calc(var(--sp-4) + env(safe-area-inset-top));
	right: var(--sp-4);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	z-index: 100;
}
.ctrl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	color: var(--ink);
	font-size: 16px;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-spring),
		background var(--dur-fast);
}
.ctrl-btn:hover {
	background: var(--glass-bg-hover);
	transform: scale(1.06);
}
.lang-toggle {
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-spring);
}
.lang-toggle:hover {
	transform: scale(1.04);
}
.lang-toggle span {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 999px;
	color: var(--ink-dim);
	transition: all var(--dur-base) var(--ease-organic);
}
.lang-toggle span.active {
	background: rgba(77, 184, 200, 0.16);
	color: var(--rain);
}

/* ---- Main layout --------------------------------------------------------- */
.main-content {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: var(--width-content);
	margin: 0 auto;
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-organic);
}
.main-content.visible {
	opacity: 1;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
	text-align: center;
	margin-bottom: var(--sp-7);
}
.profile-logo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin-bottom: var(--sp-4);
	border: 1px solid var(--glass-border-strong);
	box-shadow: var(--shadow-card);
	transition: transform var(--dur-slow) var(--ease-spring),
		box-shadow var(--dur-slow) var(--ease-organic);
}
.profile-logo:hover {
	transform: rotate(4deg) scale(1.06);
	box-shadow: var(--shadow-lift);
}
.hero h1 {
	font-family: var(--font-ui);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: var(--sp-2);
}
.hero .subtitle {
	color: var(--ink-dim);
	font-size: 0.9rem;
	font-weight: 400;
	margin-bottom: var(--sp-2);
}
.hero .tagline {
	color: var(--ink-dim);
	font-size: 0.82rem;
	max-width: 36ch;
	margin: 0 auto var(--sp-5);
	opacity: 0.85;
}

/* ---- Primary CTA --------------------------------------------------------- */
.btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	padding: var(--sp-4);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--nebula), var(--nebula-soft));
	color: #fff;
	font-family: var(--font-ui);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	box-shadow: 0 10px 30px rgba(61, 79, 214, 0.35);
	transition: transform var(--dur-fast) var(--ease-spring),
		box-shadow var(--dur-base) var(--ease-organic);
}
.btn-primary i {
	font-size: 1.05rem;
}
.btn-primary:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 16px 40px rgba(61, 79, 214, 0.45);
}
.btn-primary:active {
	transform: scale(0.98);
}

/* ---- Sections ------------------------------------------------------------ */
.sections {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}
.link-section {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.section-label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-dim);
	padding: 0 var(--sp-2);
}
.section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--glass-border);
}

/* ---- Glass link cards ---------------------------------------------------- */
.glass-btn {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4);
	border-radius: 16px;
	text-decoration: none;
	color: var(--ink);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease-organic),
		background var(--dur-base) var(--ease-organic),
		box-shadow var(--dur-base) var(--ease-organic),
		border-color var(--dur-base);
}
.glass-btn:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-border-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}
.glass-btn:active {
	transform: scale(0.98);
}
.glass-btn .icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(77, 184, 200, 0.1);
	color: var(--rain);
	font-size: 1.15rem;
}
.glass-btn .body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}
.glass-btn .label {
	font-size: 0.95rem;
	font-weight: 500;
}
.glass-btn .note {
	font-size: 0.76rem;
	color: var(--ink-dim);
}
.glass-btn .chev {
	margin-left: auto;
	color: var(--ink-ghost);
	font-size: 1rem;
	transition: transform var(--dur-base) var(--ease-spring), color var(--dur-base);
}
.glass-btn:hover .chev {
	color: var(--rain);
	transform: translateX(3px);
}

/* Glimmer that follows the cursor */
.glass-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		500px circle at var(--x, 50%) var(--y, 50%),
		rgba(109, 203, 218, 0.12),
		transparent 40%
	);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-organic);
	pointer-events: none;
}
.glass-btn:hover::after {
	opacity: 1;
}

/* Copy tooltip (email) */
.copy-tooltip {
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-3);
	background: var(--rain);
	color: var(--midnight);
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 500;
	opacity: 0;
	transform: translateY(-4px);
	transition: all var(--dur-base) var(--ease-organic);
	pointer-events: none;
}
.copy-tooltip.show {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Staggered reveal ---------------------------------------------------- */
.reveal-item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-slow) var(--ease-organic),
		transform var(--dur-slow) var(--ease-spring);
}
.reveal-item.reveal {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
	margin-top: var(--sp-7);
	text-align: center;
}
.footer-mark {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--ink-ghost);
}

/* ---- Accessibility ------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--rain);
	outline-offset: 3px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 380px) {
	.glass-btn .note {
		display: none;
	}
	.hero h1 {
		font-size: 1.5rem;
	}
}