/* ===== Прелоадер POGO/WEB ===== */
/* Шрифты и палитра подогнаны под сайт: Saar SP Demo (заголовки), Koulen (цифры), Lorenzo Sans (текст) */
.pre {
	--ink: #191919;
	--blue: #3840FF;
	--green: #38A9FF;
	--white: #fff;
	--grad: linear-gradient(110deg, #3840FF 0%, #2f8bff 45%, #38A9FF 100%);
	--pre-display: "Saar SP Demo", sans-serif;
	--pre-num: "Koulen", sans-serif;
	--pre-mono: "Lorenzo Sans", ui-monospace, "SF Mono", Menlo, monospace;
	--pre-body: "Lorenzo Sans", sans-serif;

	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
}

.pre * {
	box-sizing: border-box;
}

/* film grain */
.pre .grain {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: .06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: pre-grain .6s steps(3) infinite;
}

@keyframes pre-grain {
	0% { transform: translate(0, 0); }
	33% { transform: translate(-4px, 3px); }
	66% { transform: translate(3px, -2px); }
}

/* slash rain */
.pre .rain {
	position: absolute;
	inset: -20% -10%;
	pointer-events: none;
	opacity: .5;
}

.pre .rain span {
	position: absolute;
	top: -15%;
	font-family: var(--pre-display);
	color: #2a2a2a;
	transform: rotate(20deg);
	will-change: transform;
	filter: blur(.3px);
	animation: pre-fall linear infinite;
}

@keyframes pre-fall {
	0% { transform: translateY(-20vh) rotate(20deg); opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { transform: translateY(130vh) rotate(20deg); opacity: 0; }
}

/* bracket frame */
.pre .frame {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4vw;
	pointer-events: none;
}

.pre .frame .bk {
	font-family: var(--pre-display);
	font-size: clamp(120px, 26vw, 360px);
	color: #222;
	line-height: 0;
	animation: pre-breathe 2.6s ease-in-out infinite;
}

.pre .frame .bk.r {
	transform: scaleX(-1);
	animation-delay: .4s;
}

@keyframes pre-breathe {
	0%, 100% { color: #222; }
	50% { color: #2c2c44; }
}

.pre .stage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

@media (max-width: 820px) {
	.pre .stage { grid-template-columns: 1fr; justify-items: center; }
}

.pre .log {
	justify-self: end;
	width: min(42ch, 40vw);
	padding-left: 6vw;
	font-family: var(--pre-mono);
	font-size: 13px;
	line-height: 1.85;
}

@media (max-width: 820px) {
	.pre .log { display: none; }
}

.pre .log .ln {
	opacity: 0;
	transform: translateY(6px);
	white-space: nowrap;
	overflow: hidden;
}

.pre .log .ln.in {
	opacity: 1;
	transform: none;
	transition: .25s;
}

.pre .log .mut { color: #6a6a6a; }
.pre .log .ok { color: var(--green); }
.pre .log .key { color: #7a82ff; }
.pre .log .br { color: #cfcfff; }

.pre .cursor {
	display: inline-block;
	width: 8px;
	height: 15px;
	background: var(--green);
	margin-left: 2px;
	transform: translateY(2px);
	animation: pre-blink .9s steps(1) infinite;
}

@keyframes pre-blink {
	50% { opacity: 0; }
}

.pre .counter {
	justify-self: start;
	padding-left: 5vw;
}

@media (max-width: 820px) {
	.pre .counter { justify-self: center; padding: 0; text-align: center; margin-top: 20px; }
}

.pre .counter .lbl {
	font-family: var(--pre-mono);
	color: #777;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.pre .counter .lbl b { color: var(--green); }
.pre .counter .lbl .br { color: #555; }

.pre .num {
	font-family: var(--pre-num);
	font-size: clamp(110px, 19vw, 260px);
	line-height: .82;
	letter-spacing: -2px;
	background: var(--grad);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pre-shift 3s linear infinite;
}

.pre .num.glitch {
	animation: pre-shift 3s linear infinite, pre-jit .12s steps(2);
}

@keyframes pre-shift {
	to { background-position: 200% 0; }
}

@keyframes pre-jit {
	0% { transform: translate(0, 0); }
	50% { transform: translate(-2px, 1px); }
	100% { transform: translate(2px, 0); }
}

.pre .num small {
	font-size: .34em;
	-webkit-text-fill-color: #fff;
	color: #fff;
	font-family: var(--pre-body);
	font-weight: 700;
	vertical-align: top;
	margin-left: 6px;
}

.pre .bar {
	margin-top: 18px;
	width: min(420px, 46vw);
	height: 6px;
	background: #2a2a2a;
	border-radius: 99px;
	overflow: hidden;
}

@media (max-width: 820px) {
	.pre .bar { width: 70vw; }
}

.pre .bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--grad);
	border-radius: 99px;
	box-shadow: 0 0 18px rgba(56, 169, 255, .5);
}

.pre .meta {
	margin-top: 10px;
	font-family: var(--pre-mono);
	font-size: 11px;
	color: #5e5e5e;
	display: flex;
	gap: 14px;
}

.pre .meta b {
	color: #9aa;
	font-weight: 400;
}

.pre .stamp {
	position: absolute;
	top: 26px;
	left: 30px;
	font-family: var(--pre-display);
	font-size: 22px;
	z-index: 6;
}

.pre .stamp .s { color: var(--blue); }

.pre .stamp .w {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pre .stamp em {
	font-family: var(--pre-mono);
	font-style: normal;
	font-size: 10px;
	color: #666;
	display: block;
	letter-spacing: 2px;
	margin-top: 2px;
}

/* slash wipe: twin blades + thin green seam between */
.pre .wipe {
	position: absolute;
	inset: -30%;
	z-index: 40;
	pointer-events: none;
}

.pre .wipe .blade {
	position: absolute;
	top: -60%;
	height: 220%;
	transform: rotate(12deg) translateX(-200vw);
}

.pre .wipe .b-ink { width: 120%; left: -60%; background: var(--ink); }

.pre .wipe .b-seam {
	width: 14px;
	left: 60%;
	background: var(--green);
	box-shadow: 0 0 40px 6px var(--green);
}

.pre .wipe .b-grad {
	width: 60%;
	left: 62%;
	background: var(--grad);
	box-shadow: 0 0 80px rgba(56, 169, 255, .4);
}

.pre .flash {
	position: absolute;
	inset: 0;
	z-index: 41;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

/* when finished */
.pre.pre--hidden {
	opacity: 0;
	transition: opacity .5s ease;
}

/* ===== Фикс высоты логотипа в шапке ===== */
/* Сайт фиксирует height логотипа по scrollHeight на DOMContentLoaded. Если SVG
   ещё не загрузился, у <img> нет высоты и бокс схлопывается до строки alt (~14px).
   Задаём пропорцию SVG (1759×264) — высота считается из ширины сразу, до загрузки. */
.header__logo img {
	aspect-ratio: 1759 / 264;
	height: auto;
}

/* ===== Проявление основного заголовка (логотип pogosov/studio) после прелоадера ===== */
/* Пока прелоадер активен — заголовок скрыт (обрезан слева направо). */
.pre-active .header__logo img {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	will-change: clip-path;
}

/* Когда прелоадер завершается — заголовок плавно выезжает слева направо. */
.pre-done .header__logo img {
	-webkit-animation: header-logo-wipe 1s cubic-bezier(.62, .04, .3, 1) .15s forwards;
	animation: header-logo-wipe 1s cubic-bezier(.62, .04, .3, 1) .15s forwards;
}

@-webkit-keyframes header-logo-wipe {
	from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
	to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}

@keyframes header-logo-wipe {
	from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
	to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pre .rain,
	.pre .grain { display: none; }
	.pre .num,
	.pre .num.glitch,
	.pre .frame .bk { animation: none; }
	.pre .wipe .blade { transition: none !important; }

	/* без анимаций заголовок просто остаётся видимым */
	.pre-active .header__logo img {
		-webkit-clip-path: none;
		clip-path: none;
	}
	.pre-done .header__logo img {
		-webkit-animation: none;
		animation: none;
	}
}