/* ============================================================
   kirill.onishuk.dev — общий стиль (лендинг + 404)
   Эстетика: IDE noir / редактор кода. Моно-типографика,
   подсветка синтаксиса в палитре GitHub Dark, атмосферный фон.
   ============================================================ */

:root {
	--bg:        #060910;
	--editor:    #0b0f17;
	--bar:       #0e131d;
	--statusbar: #0a0e16;
	--border:    #1b2330;
	--txt:       #c4ccd8;
	--dim:       #5b6675;

	/* синтаксис */
	--kw:   #ff7b72; /* ключевые слова: const, return  */
	--type: #d2a8ff; /* типы / функции                 */
	--key:  #79c0ff; /* свойства объекта               */
	--str:  #a5d6ff; /* строки                         */
	--num:  #ffa657; /* числа / литералы               */
	--cmt:  #6b7684; /* комментарии                    */
	--punc: #8b949e; /* пунктуация                     */

	--accent:  #7ee787; /* акцент (prompt, branch)      */
	--caret:   #ffa657;
	--sel:     rgba(121, 192, 255, 0.14);

	--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
	        "Fira Code", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
	min-height: 100%;
	font-family: var(--mono);
	color: var(--txt);
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	position: relative;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* атмосфера: свечения + тонкая сетка */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(900px 500px at 78% -8%,  rgba(121, 192, 255, 0.10), transparent 60%),
		radial-gradient(760px 480px at 12% 112%, rgba(210, 168, 255, 0.09), transparent 58%),
		radial-gradient(600px 600px at 50% 40%,  rgba(126, 231, 135, 0.04), transparent 60%);
	pointer-events: none;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
	        mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
	pointer-events: none;
}

/* ---------- окно редактора ---------- */
.window {
	position: relative;
	z-index: 1;
	width: min(660px, 100%);
	background: linear-gradient(180deg, var(--editor), #090d14);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 40px 90px -30px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	animation: window-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes window-in {
	to { opacity: 1; transform: none; }
}

/* верхняя полоса + вкладка */
.titlebar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--bar);
	border-bottom: 1px solid var(--border);
}
.dots { display: flex; gap: 8px; }
.dots i {
	width: 12px; height: 12px; border-radius: 50%;
	display: block;
	background: #2a3240;
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--txt);
	background: var(--editor);
	padding: 5px 13px;
	border-radius: 7px;
	border: 1px solid var(--border);
	white-space: nowrap;
}
.tab .ts {
	font-size: 10px; font-weight: 800;
	color: #0b0f17; background: var(--key);
	border-radius: 3px; padding: 1px 4px; letter-spacing: 0.5px;
}
.tab .md { color: var(--accent); font-weight: 700; }

/* ---------- тело: код ---------- */
.editor {
	padding: 22px clamp(16px, 4vw, 30px) 20px;
	overflow-x: auto;
}
.code {
	counter-reset: line;
	font-size: clamp(12.5px, 3vw, 14.5px);
	line-height: 1.85;
	white-space: normal; /* переносы между строками-блоками схлопываются */
	tab-size: 2;
}
.ln {
	display: block;
	position: relative;
	padding-left: 42px;
	min-height: 1.85em;      /* высота пустых строк сохраняется */
	white-space: pre;         /* отступы/выравнивание внутри строки */
	opacity: 0;
	transform: translateX(-6px);
	animation: line-in 0.5s ease forwards;
}
.ln::before {
	counter-increment: line;
	content: counter(line);
	position: absolute;
	left: 0;
	width: 26px;
	text-align: right;
	color: var(--dim);
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}
@keyframes line-in { to { opacity: 1; transform: none; } }

/* staggered появление строк */
.ln:nth-child(1)  { animation-delay: 0.30s; }
.ln:nth-child(2)  { animation-delay: 0.36s; }
.ln:nth-child(3)  { animation-delay: 0.42s; }
.ln:nth-child(4)  { animation-delay: 0.48s; }
.ln:nth-child(5)  { animation-delay: 0.54s; }
.ln:nth-child(6)  { animation-delay: 0.60s; }
.ln:nth-child(7)  { animation-delay: 0.66s; }
.ln:nth-child(8)  { animation-delay: 0.72s; }
.ln:nth-child(9)  { animation-delay: 0.78s; }
.ln:nth-child(10) { animation-delay: 0.84s; }
.ln:nth-child(11) { animation-delay: 0.90s; }
.ln:nth-child(12) { animation-delay: 0.96s; }
.ln:nth-child(13) { animation-delay: 1.02s; }
.ln:nth-child(14) { animation-delay: 1.08s; }
.ln:nth-child(15) { animation-delay: 1.14s; }
.ln:nth-child(16) { animation-delay: 1.20s; }
.ln:nth-child(17) { animation-delay: 1.26s; }

/* токены */
.kw   { color: var(--kw);   }
.type { color: var(--type); }
.key  { color: var(--key);  }
.str  { color: var(--str);  }
.num  { color: var(--num);  }
.cmt  { color: var(--cmt); font-style: italic; }
.punc { color: var(--punc); }

/* кликабельные контакты — строки, ведут себя как выделение в редакторе */
a.k-link {
	color: var(--str);
	text-decoration: none;
	border-radius: 4px;
	padding: 1px 3px;
	margin: 0 -3px;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
a.k-link:hover,
a.k-link:focus-visible {
	background: var(--sel);
	color: #d6ecff;
	box-shadow: inset 0 0 0 1px rgba(121, 192, 255, 0.35);
	outline: none;
}

/* мигающая каретка */
.caret {
	display: inline-block;
	width: 8px;
	height: 1.05em;
	margin-left: 3px;
	vertical-align: text-bottom;
	background: var(--caret);
	animation: blink 1.1s steps(1) infinite;
	opacity: 0;
	animation-delay: 1.4s;
}
@keyframes blink {
	0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; }
}

/* ---------- статус-бар ---------- */
.statusbar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 8px 16px;
	background: var(--statusbar);
	border-top: 1px solid var(--border);
	font-size: 11.5px;
	color: var(--dim);
	flex-wrap: wrap;
}
.statusbar .branch { color: var(--accent); }
.statusbar .sep { margin-left: auto; }

/* ---------- 404 ---------- */
.big404 {
	font-size: clamp(64px, 20vw, 132px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--txt);
	text-shadow:
		3px 0 var(--kw),
		-3px 0 var(--key);
	animation: glitch 3.4s infinite;
}
@keyframes glitch {
	0%, 92%, 100% { text-shadow: 3px 0 var(--kw), -3px 0 var(--key); }
	94%  { text-shadow: -3px 0 var(--kw), 3px 0 var(--key); transform: translateX(1px); }
	96%  { text-shadow: 3px 0 var(--key), -3px 0 var(--kw); transform: translateX(-1px); }
}
.home-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	color: var(--accent);
	text-decoration: none;
	border: 1px solid rgba(126, 231, 135, 0.3);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	transition: background 0.18s ease, transform 0.18s ease;
}
.home-link:hover { background: rgba(126, 231, 135, 0.08); transform: translateY(-2px); }

/* sr-only для семантичного заголовка */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* уважение к настройкам движения */
@media (prefers-reduced-motion: reduce) {
	.window, .ln { opacity: 1; transform: none; animation: none; }
	.caret { opacity: 1; animation: none; }
	.big404 { animation: none; }
}