/* =============================================================
   CYBERLINGZ — Coming Soon
   adapted from Claude Design "Holo Skyline" variation
   ============================================================= */

:root {
	--cl-purple: #ce66ff;
	--cl-purple-deep: #8b2fd9;
	--cl-cyan: #22e8ff;
	--cl-cyan-deep: #0fa8c7;
	--cl-pink: #ff3d9a;
	--cl-yellow: #ffe94a;
	--cl-bg-0: #07021a;
	--cl-bg-1: #120636;
	--cl-bg-2: #1f0a4d;
	--cl-ink: #f5eaff;
	--cl-ink-dim: #b8a6e0;

	--ff-display: "Orbitron", system-ui, sans-serif;
	--ff-pixel: "VT323", ui-monospace, monospace;
	--ff-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { background: var(--cl-bg-0); }

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

body {
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--ff-body);
	color: var(--cl-ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }

.font-display { font-family: var(--ff-display); letter-spacing: 0.02em; }
.font-pixel { font-family: var(--ff-pixel); }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -48px; left: 0;
	background: var(--cl-bg-2);
	color: var(--cl-ink);
	padding: 12px 16px;
	border-radius: 0 0 8px 0;
	font-weight: 600;
	z-index: 999;
}
.skip-link:focus { top: 0; }

/* =============================================================
   BACKGROUND — skyline image + aurora arc + stars + scanlines
   ============================================================= */
.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(206, 102, 255, 0.4) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 50% 30%, rgba(34, 232, 255, 0.25) 0%, transparent 60%),
		linear-gradient(180deg, #0a0428 0%, var(--cl-bg-2) 40%, var(--cl-bg-0) 100%);
}

.bg__skyline {
	position: absolute;
	inset: auto 0 0 0;
	height: 70vh;
	background: url("/assets/skyline.png") center bottom / cover no-repeat;
	mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
	opacity: 0.85;
}

.bg__aurora {
	position: absolute;
	top: -25vh;
	left: 50%;
	transform: translateX(-50%);
	width: 130vw;
	height: 130vw;
	max-width: 1600px;
	max-height: 1600px;
	border-radius: 50%;
	border: 1px solid rgba(34, 232, 255, 0.18);
	box-shadow:
		inset 0 0 80px rgba(34, 232, 255, 0.18),
		0 0 80px rgba(206, 102, 255, 0.18);
	pointer-events: none;
}

.bg__stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.6;
}

.bg__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, transparent 30%, rgba(7, 2, 26, 0.7) 100%),
		linear-gradient(180deg, rgba(7, 2, 26, 0.4) 0%, transparent 30%, transparent 70%, rgba(7, 2, 26, 0.85) 100%);
}

.bg__scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.018) 2px 3px);
	mix-blend-mode: screen;
	opacity: 0.6;
}

@keyframes twinkle {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.1); }
}

@keyframes flicker {
	0%, 100% { opacity: 1; }
	43% { opacity: 1; }
	44% { opacity: 0.7; }
	46% { opacity: 1; }
	93% { opacity: 1; }
	94% { opacity: 0.85; }
	96% { opacity: 1; }
}

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

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* =============================================================
   TOP BAR
   ============================================================= */
.topbar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px;
	gap: 24px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: 0.18em;
}
.logo__img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: drop-shadow(0 0 12px rgba(206, 102, 255, 0.55));
}
.logo__cyber { color: var(--cl-purple); text-shadow: 0 0 10px rgba(206, 102, 255, 0.6); }
.logo__lingz { color: var(--cl-cyan); text-shadow: 0 0 10px rgba(34, 232, 255, 0.6); }

.topbar__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	letter-spacing: 0.25em;
	color: var(--cl-cyan);
	margin: 0;
}
.topbar__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--cl-cyan);
	box-shadow: 0 0 10px var(--cl-cyan);
	animation: flicker 2s infinite;
}

@media (max-width: 640px) {
	.topbar { padding: 18px 20px; }
	.logo { font-size: 18px; }
	.topbar__status { font-size: 13px; letter-spacing: 0.18em; }
}

@media (max-width: 540px) {
	.topbar__status { display: none; }
}

/* =============================================================
   HERO — center stack
   ============================================================= */
.hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px 24px 80px;
	gap: 20px;
	position: relative;
	z-index: 5;
	max-width: 920px;
	margin: 0 auto;
	width: 100%;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border: 1.5px solid var(--cl-cyan);
	border-radius: 999px;
	background: rgba(34, 232, 255, 0.08);
	box-shadow: 0 0 20px rgba(34, 232, 255, 0.3);
	font-size: 18px;
	letter-spacing: 0.3em;
	color: var(--cl-cyan);
	margin: 0;
}
.badge__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--cl-cyan);
	box-shadow: 0 0 10px var(--cl-cyan);
	animation: flicker 1.6s infinite;
}

.title {
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: clamp(36px, 6vw, 84px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	margin: 4px 0;
}
.title__line {
	display: block;
	white-space: nowrap;
}
@media (max-width: 540px) {
	.title { font-size: clamp(32px, 9vw, 56px); }
}
.title__line--gradient {
	background: linear-gradient(135deg, #fff 0%, var(--cl-purple) 50%, var(--cl-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* layered drop-shadows: tight dark backdrop for legibility against the
	   busy skyline, then a punchy purple bloom, then a soft outer halo */
	filter:
		drop-shadow(0 2px 6px rgba(7, 2, 26, 0.85))
		drop-shadow(0 0 32px rgba(206, 102, 255, 0.7))
		drop-shadow(0 0 70px rgba(34, 232, 255, 0.35));
}
.title__line--neon {
	color: var(--cl-purple);
	text-shadow:
		0 2px 6px rgba(7, 2, 26, 0.9),
		0 0 14px rgba(7, 2, 26, 0.7),
		0 0 28px rgba(206, 102, 255, 0.95),
		0 0 70px rgba(206, 102, 255, 0.6),
		0 0 120px rgba(206, 102, 255, 0.35);
}

.subtitle {
	font-size: clamp(16px, 2.1vw, 19px);
	font-weight: 500;
	color: var(--cl-ink);
	max-width: 600px;
	margin: 0;
	line-height: 1.55;
	text-shadow:
		0 2px 6px rgba(7, 2, 26, 0.95),
		0 0 14px rgba(7, 2, 26, 0.7);
}

/* Email signup */
.signup {
	display: flex;
	gap: 8px;
	padding: 6px;
	width: 100%;
	max-width: 520px;
	margin-top: 8px;
	border-radius: 10px;
	background: rgba(7, 2, 26, 0.7);
	border: 1.5px solid rgba(206, 102, 255, 0.5);
	box-shadow:
		0 0 20px rgba(206, 102, 255, 0.2),
		inset 0 0 20px rgba(206, 102, 255, 0.05);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.signup[hidden] { display: none; }

@media (max-width: 540px) {
	.signup {
		flex-direction: column;
		gap: 6px;
	}
	.signup input {
		width: 100%;
		text-align: center;
	}
	.signup button {
		width: 100%;
		padding: 14px 22px;
	}
}
.signup:focus-within {
	border-color: var(--cl-cyan);
	box-shadow:
		0 0 24px rgba(34, 232, 255, 0.35),
		inset 0 0 20px rgba(34, 232, 255, 0.05);
}
.signup input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--cl-ink);
	font-family: var(--ff-body);
	font-size: 15px;
	padding: 12px 16px;
}
.signup input::placeholder { color: var(--cl-ink-dim); }
.signup button {
	padding: 12px 22px;
	border-radius: 6px;
	font-family: var(--ff-display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 13px;
	white-space: nowrap;
	color: #fff;
	background: linear-gradient(135deg, var(--cl-purple) 0%, var(--cl-pink) 100%);
	box-shadow:
		0 0 20px rgba(206, 102, 255, 0.5),
		0 4px 0 rgba(0, 0, 0, 0.3);
	transition: transform 0.15s, box-shadow 0.15s;
}
.signup button:hover, .signup button:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		0 0 28px rgba(206, 102, 255, 0.8),
		0 5px 0 rgba(0, 0, 0, 0.3);
	outline: none;
}
.signup button:active {
	transform: translateY(2px);
	box-shadow:
		0 0 16px rgba(206, 102, 255, 0.5),
		0 2px 0 rgba(0, 0, 0, 0.3);
}
.signup button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.signup__note {
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--cl-ink-dim);
	text-transform: uppercase;
	margin: 4px 0 0;
}

.signup__success {
	margin: 8px 0 0;
	padding: 12px 18px;
	border: 1.5px solid var(--cl-cyan);
	border-radius: 8px;
	background: rgba(34, 232, 255, 0.08);
	color: var(--cl-cyan);
	font-size: 16px;
	letter-spacing: 0.15em;
	box-shadow: 0 0 20px rgba(34, 232, 255, 0.3);
}

/* =============================================================
   TERMINAL PANEL — bottom-left, decorative
   ============================================================= */
.terminal {
	position: fixed;
	left: 32px;
	bottom: 80px;
	width: 360px;
	max-width: calc(100vw - 64px);
	z-index: 6;
	background: rgba(7, 2, 26, 0.78);
	border: 1.5px solid rgba(34, 232, 255, 0.5);
	border-radius: 4px;
	box-shadow:
		0 0 24px rgba(34, 232, 255, 0.25),
		inset 0 0 24px rgba(34, 232, 255, 0.05);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-family: var(--ff-pixel);
	font-size: 16px;
	line-height: 1.4;
	animation: float 5s ease-in-out infinite;
}

.terminal__bar {
	display: flex;
	justify-content: space-between;
	padding: 8px 14px;
	border-bottom: 1px dashed rgba(34, 232, 255, 0.3);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--cl-ink-dim);
}

.terminal__body {
	padding: 12px 14px 16px;
	min-height: 150px;
}
.terminal__body div {
	margin: 2px 0;
}

@media (max-width: 1100px) {
	.terminal { display: none; }
}

/* =============================================================
   WILLOW — bottom-right character (transparent-background PNG)
   ============================================================= */
.willow {
	position: fixed;
	right: 16px;
	bottom: 72px;
	z-index: 6;
	width: clamp(170px, 19vw, 280px);
	pointer-events: none;
	animation: float 6s ease-in-out infinite;
}
.willow img {
	width: 100%;
	height: auto;
	filter:
		drop-shadow(0 0 24px rgba(206, 102, 255, 0.55))
		drop-shadow(0 0 60px rgba(206, 102, 255, 0.3));
}

@media (max-width: 1100px) {
	.willow {
		width: clamp(140px, 24vw, 220px);
		opacity: 0.92;
	}
}

@media (max-width: 540px) {
	.willow {
		width: 130px;
		opacity: 0.6;
	}
}

/* =============================================================
   BOTTOM BAR
   ============================================================= */
.bottombar {
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 40px;
	flex-wrap: wrap;
	background: linear-gradient(180deg, transparent 0%, rgba(7, 2, 26, 0.9) 100%);
}

.bottombar__copy {
	margin: 0;
	font-size: 16px;
	letter-spacing: 0.15em;
	color: var(--cl-ink-dim);
}

.bottombar__parent {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--cl-ink-dim);
	flex-wrap: wrap;
}

.willowbe-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid rgba(206, 102, 255, 0.4);
	border-radius: 4px;
	color: var(--cl-ink);
	font-family: var(--ff-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.willowbe-link:hover, .willowbe-link:focus-visible {
	border-color: var(--cl-purple);
	box-shadow: 0 0 12px rgba(206, 102, 255, 0.4);
	outline: none;
}
.willowbe-link__mark {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--cl-purple), var(--cl-cyan));
}
.willowbe-link__ext { opacity: 0.5; font-size: 10px; }

@media (max-width: 640px) {
	.bottombar { padding: 14px 20px; font-size: 14px; }
	.bottombar__copy { font-size: 14px; }
	.bottombar__parent { font-size: 14px; }
}

/* Blinking cursor in terminal */
.blink { animation: blink 1s infinite step-end; color: var(--cl-cyan); }