/*--------------------------------------------------
	MAK-1700. Пушистик: небо прелоадера, слой полёта, голова в хедере.
	Логика — js/mascot.js, переключатели — include/mascot-config.php.
---------------------------------------------------*/

/* ---------- Небо прелоадера ---------- */

	/* Цвет неба — единственное место: голубой, как фон кадров R1 (решение владельца 08.10).
	   Облака l-cloud-1/2 кремовые, не перекрашиваются. */
	.preloader-wrap.ollya-sky {
		--ollya-sky: #9CB8D6;
		background: var(--ollya-sky);
		overflow: visible;
	}

	/* Нижний край занавеса: ровный, с мягкой тенью (раскадровка v3, гряда облаков снята 08.10) */
	.preloader-wrap.ollya-sky.is-curtain {
		box-shadow: 0 28px 60px rgba(40, 20, 10, 0.22);
	}

	.ollya-loader {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

/* ---------- Облака (три глубины; дальние и средние — в небе, ближние — поверх персонажа) ---------- */

	.ollya-clouds {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.ollya-clouds--front {
		position: fixed;
		z-index: 1860;
	}

	.ollya-cloud {
		position: absolute;
		left: 0;
		top: 0;
		width: 480px;
		height: 480px;
		opacity: 0;
		will-change: transform, opacity;
	}

	.ollya-cloud--far {
		filter: blur(2px);
	}

	.ollya-cloud--near {
		filter: blur(6px);
	}

	@media only screen and (max-width: 767px) {
		/* на телефонах без CSS-фильтров: размытие облака на каждом кадре дорогое */
		.ollya-cloud--far,
		.ollya-cloud--near {
			filter: none;
		}
	}

/* ---------- Слой полёта ---------- */

	.ollya-flyer {
		--ollya-flyer-size: 360px;
		position: fixed;
		left: 50%;
		top: 50%;
		width: var(--ollya-flyer-size);
		height: var(--ollya-flyer-size);
		margin: calc(var(--ollya-flyer-size) / -2) 0 0 calc(var(--ollya-flyer-size) / -2);
		z-index: 1850;
		pointer-events: none;
		will-change: transform;
	}

	@media only screen and (max-width: 1024px) {
		.ollya-flyer {
			--ollya-flyer-size: 300px;
		}
	}

	@media only screen and (max-width: 480px) {
		.ollya-flyer {
			--ollya-flyer-size: 260px;
		}
	}

	.ollya-flyer__canvas {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* Ролик — только источник кадров для WebGL; в DOM, чтобы декодер не засыпал */
	.ollya-flyer__video {
		position: absolute;
		left: 0;
		top: 0;
		width: 2px;
		height: 2px;
		opacity: 0;
		pointer-events: none;
	}

	/* Нет WebGL: R1 показывается сам (у него вшит голубой фон), без заливки и полёта */
	.ollya-flyer.is-nogl .ollya-flyer__canvas {
		display: none;
	}

	.ollya-flyer.is-nogl .ollya-flyer__video--r1 {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	.disable-ajaxload .ollya-flyer,
	.disable-ajaxload .ollya-clouds--front {
		display: none;
	}

/* ---------- Голова в хедере ---------- */

	/* Ссылка держит прежний размер логотипа 50 × 50; голова — поверх, по центру */
	#clapat-logo .ollya-head-link {
		position: relative;
		width: 50px;
		height: 50px;
	}

	/* Прозрачные заглушки старых логотипов (на них завязан JS темы) */
	#clapat-logo .ollya-head-link img {
		display: none;
	}

	/*
	 * Шар головы: 48 px (1440), 44 px (≤ 1024), 40 px (≤ 767). Шар занимает 0,706 кадра i3,
	 * отсюда размер кадра 68 / 62 / 57. Центр шара в кадре — (0,4918; 0,4919): сдвиг на
	 * 0,0082 кадра возвращает его в центр бывшего логотипа.
	 */
	.ollya-head {
		--ollya-head-size: 68px;
		position: absolute;
		left: 50%;
		top: 50%;
		width: var(--ollya-head-size);
		height: var(--ollya-head-size);
		margin: calc(var(--ollya-head-size) * -0.4918) 0 0 calc(var(--ollya-head-size) * -0.4918);
		transition: opacity 0.125s linear;
	}

	@media only screen and (max-width: 1024px) {
		.ollya-head {
			--ollya-head-size: 62px;
		}
	}

	@media only screen and (max-width: 767px) {
		.ollya-head {
			--ollya-head-size: 57px;
		}
	}

	/* Пока персонаж летит из прелоадера, голова в хедере пустая: её место займёт он сам */
	.ollya-flying .ollya-head {
		opacity: 0;
		transition: none;
	}

	.ollya-head__body {
		position: absolute;
		inset: 0;
		transform-origin: 49% 49%;
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.ollya-head.is-hover .ollya-head__body {
		transform: scale(1.15);
	}

	.ollya-head.is-press .ollya-head__body {
		animation: ollya-head-press 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* Нажатие: ротик «о» и сплющ scaleY 0,92 → 1 поверх увеличения наведения */
	@keyframes ollya-head-press {
		0%   { transform: scale(1.15, 1.058); }
		100% { transform: scale(1.15); }
	}

	.ollya-head__f {
		position: absolute;
		inset: 0;
		background: center / contain no-repeat;
		opacity: 0;
		transition: opacity 0.04s linear;
	}

	.ollya-head__f--open {
		background-image: var(--ollya-head-open);
		opacity: 1;
	}

	/* Остальные кадры грузятся, только когда голова «живая» (десктоп с курсором) */
	.ollya-head.is-live .ollya-head__f--blink  { background-image: var(--ollya-head-blink); }
	.ollya-head.is-live .ollya-head__f--closed { background-image: var(--ollya-head-closed); }
	.ollya-head.is-live .ollya-head__f--o      { background-image: var(--ollya-head-o); }

	/* Без курсора голова только моргает: кадр век грузится с первым кругом таймера */
	.ollya-head.is-blinky .ollya-head__f--blink { background-image: var(--ollya-head-blink); }

	.ollya-head[data-state="blink"]  .ollya-head__f--blink,
	.ollya-head[data-state="closed"] .ollya-head__f--closed,
	.ollya-head[data-state="o"]      .ollya-head__f--o {
		opacity: 1;
	}

	/* Глазница = 0,92 радиуса белка, зрачок обрезается её краем */
	.ollya-head__eye {
		position: absolute;
		border-radius: 50%;
		overflow: hidden;
	}

	.ollya-head__eye--l {
		left: 34.788%;
		top: 42.528%;
		width: 11.445%;
		height: 11.445%;
	}

	.ollya-head__eye--r {
		left: 53.281%;
		top: 42.201%;
		width: 11.298%;
		height: 11.298%;
	}

	.ollya-head[data-state="blink"] .ollya-head__eye,
	.ollya-head[data-state="closed"] .ollya-head__eye {
		visibility: hidden;
	}

	/* Зрачок как у принятой i1: 1,28 × 1,44 радиуса белка */
	.ollya-head__pupil {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 69.6%;
		height: 78.3%;
		margin: -39.15% 0 0 -34.8%;
		background: var(--ollya-head-pupil) center / contain no-repeat;
		will-change: transform;
	}

/* ---------- Футер главной (этап 2): js/mascot.js → Foot, разметка sections/mascot_footer_section.php ---------- */

	/* Голова «спрыгнула» в футер: в хедере пусто; вернулась — scale 0 → 1, back.out, 300 мс */
	.ollya-head {
		transition: opacity 0.125s linear, transform 0.3s cubic-bezier(0.34, 1.9, 0.64, 1);
	}

	.ollya-foot-away .ollya-head {
		opacity: 0;
		transform: scale(0);
		transition: opacity 0.1s linear, transform 0s linear 0.1s;
	}

	/* Палитра — референс «Peekaboo × Eclipse», Mix 3 (тёмный) */
	.clapat-footer.ollya-foot {
		--ollya-foot-bg: #3E1F14;
		--ollya-foot-ink: #F3EEE6;
		--ollya-foot-tan: #C9A891;
		--ollya-foot-orange: #EE8A3A;
		/* H — высота бокса персонажа; ширина бокса = H × 4:3 (кадр R3b) */
		--ollya-actor: clamp(190px, 17vw, 260px);
		/* Пол: от нижней кромки футера до ступней (над рядом Back to Top / копирайт) — только ≤ 767 */
		--ollya-floor: 128px;
		--ollya-pad: 80px;
		/* Правая линия контента = отступ #header-container темы (80 / 60 ≤ 1466 / 40 ≤ 1024):
		   по ней правый край кнопки Let's Talk, по ней же — правый край соцсетей */
		--ollya-edge: 80px;
		/* Отступы сцены сверху и снизу (снизу — место под ряд Back to Top / копирайт). Три блока —
		   текст, персонаж, соцсети — стоят на одной горизонтали: середине между этими отступами */
		--ollya-pt: 72px;
		--ollya-pb: 150px;
		height: auto;
		/* visible — падение из хедера и удар о кромку рисуются выше футера. Вниз ничего не выступает:
		   прежние «Follow Me» (выпадающий список ниже футера давал белую полосу 70 px) здесь не выводятся */
		overflow: visible;
		text-align: left;
		background: var(--ollya-foot-bg);
		color: var(--ollya-foot-ink);
	}

	.ollya-foot__scene {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		min-height: max(540px, 40vw);
		padding: var(--ollya-pt) var(--ollya-edge) var(--ollya-pb) var(--ollya-pad);
		box-sizing: border-box;
		pointer-events: auto;
	}

	.ollya-foot__info {
		position: relative;
		z-index: 2;
		flex: 0 1 auto;
		display: grid;
		gap: 16px;
		max-width: min(36vw, 460px);
	}

	.ollya-foot__k {
		font-size: 12px;
		line-height: 1.2;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ollya-foot-tan);
	}

	.clapat-footer.ollya-foot .ollya-foot__h {
		margin: 0;
		font-size: max(30px, 3.3vw);
		line-height: 1.08;
		font-weight: 400;
		color: inherit;
	}

	.clapat-footer.ollya-foot .ollya-foot__h em {
		font-size: inherit;
		font-style: italic;
		color: var(--ollya-foot-orange);
	}

	.clapat-footer.ollya-foot .ollya-foot__h b {
		font-weight: 900;
		color: inherit;
	}

	.ollya-foot__tw {
		margin: 0;
		min-height: 3.1em;
		font-size: 16px;
		line-height: 1.55;
		color: inherit;
		opacity: 0.92;
	}

	.ollya-foot__role {
		font-style: italic;
		color: var(--ollya-foot-orange);
	}

	.ollya-foot__caret {
		display: inline-block;
		width: 2px;
		height: 1.05em;
		margin-left: 2px;
		vertical-align: -0.15em;
		background: currentColor;
		opacity: 0.7;
		animation: ollya-caret 1s steps(1) infinite;
	}

	@keyframes ollya-caret {
		50% { opacity: 0; }
	}

	/* Соцсети — «rail» референса: справа, столбиком, правый край — по правой линии контента
	   (как у Let's Talk). Наведение — только цвет акцента, ничего не появляется и не сдвигается */
	.ollya-foot__rail {
		position: relative;
		flex: 0 0 auto;
		z-index: 4;
		display: grid;
		gap: 12px;
		justify-items: end;
		text-align: right;
		font-size: 15px;
		line-height: 1.3;
	}

	.ollya-foot__rail-k {
		font-style: italic;
		font-size: 14px;
		color: var(--ollya-foot-tan);
	}

	.clapat-footer.ollya-foot .ollya-foot__rail a {
		color: var(--ollya-foot-ink);
		text-decoration: none;
		pointer-events: auto;
		transition: color 0.2s;
	}

	.clapat-footer.ollya-foot .ollya-foot__rail a:hover,
	.clapat-footer.ollya-foot .ollya-foot__rail a:focus-visible {
		color: var(--ollya-foot-orange);
	}

	/* Нижний ряд темы (Back to Top, копирайт) — светлым по коричневому */
	.clapat-footer.ollya-foot #footer-container,
	.clapat-footer.ollya-foot #footer-container a,
	.clapat-footer.ollya-foot #footer-container .button-text span,
	.clapat-footer.ollya-foot #footer-container .copyright,
	.clapat-footer.ollya-foot #footer-container i {
		color: var(--ollya-foot-ink);
	}

	/* Персонаж стоит ВНУТРИ коричневого блока, по центру футера (если слева мало места, 768–900 px, —
	   правее колонки текста). По вертикали середина видимого тела (макушка 0,146 H, ступни 0,850 H
	   кадра покоя → 0,498 H) — на той же горизонтали, что середины текста и соцсетей (flex сцены).
	   Удар о верхнюю кромку при падении — сдвигом холста (js/mascot.js) */
	.ollya-foot__actor {
		position: absolute;
		left: calc(max(50%, min(36vw, 460px) + var(--ollya-pad) + var(--ollya-actor) * 0.42) - var(--ollya-actor) * 0.495);
		top: calc(var(--ollya-pt) + (100% - var(--ollya-pt) - var(--ollya-pb)) / 2 - var(--ollya-actor) * 0.498);
		bottom: auto;
		width: calc(var(--ollya-actor) * 1.331);
		height: var(--ollya-actor);
		z-index: 3;
		pointer-events: none;
	}

	.ollya-foot__canvas {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0 0 13.4% 0);   /* ниже пола не рисуем: при посадке R3a он приседает «в пол» */
		visibility: hidden;
		will-change: transform;
	}

	/* Удар о кромку: низ кадра R3a стоит на верхней кромке футера, режем ровно по ней */
	.ollya-foot.is-edge .ollya-foot__canvas {
		clip-path: inset(0 0 0 0);
	}

	.ollya-foot.is-video .ollya-foot__canvas {
		visibility: visible;
	}

	/* Обратный полёт сел на место головы: голова хедера проявляется, холст гаснет (как в прелоадере) */
	.ollya-foot.is-hand .ollya-foot__canvas {
		opacity: 0;
		transition: opacity 0.125s linear;
	}

	/* Покой: кадр c2-awake-whites (те же доли, что у кадров R3a/R3b) + зрачки кодом */
	.ollya-foot__still {
		position: absolute;
		left: 0;
		top: 0;
		width: var(--ollya-actor);
		height: var(--ollya-actor);
		background: var(--ollya-foot-still) center / contain no-repeat;
		visibility: hidden;
	}

	.ollya-foot.is-idle .ollya-foot__still {
		visibility: visible;
	}

	.ollya-foot__eye {
		position: absolute;
		width: 8.8%;
		height: 8.8%;
		border-radius: 50%;
		overflow: hidden;
	}

	.ollya-foot__eye--l { left: 37.27%; top: 38.7%; }
	.ollya-foot__eye--r { left: 53.1%;  top: 38.4%; }

	.ollya-foot__pupil {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 69.6%;
		height: 78.3%;
		margin: -39.15% 0 0 -34.8%;
		background: var(--ollya-foot-pupil) center / contain no-repeat;
		will-change: transform;
	}

	.ollya-foot__hit {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.ollya-foot__body {
		position: absolute;
		left: calc(var(--ollya-actor) * 0.14);
		top: calc(var(--ollya-actor) * 0.15);
		width: calc(var(--ollya-actor) * 0.71);
		height: calc(var(--ollya-actor) * 0.71);
		border-radius: 46%;
		pointer-events: none;
	}

	/* Персонаж стоит в футере (покой, флажок, вздох) — клик и тап по нему ведут на контакты (js/mascot.js).
	   Пока он в хедере или падает, пустое место в футере не кликается */
	.ollya-foot.is-here .ollya-foot__body {
		pointer-events: auto;
		cursor: pointer;
	}

	/* Ссылка флажка (кликабельна, пока флажок разворачивается и развёрнут: .is-flag) — по полотну последнего кадра R3b-flag (x 0,75–1,16 H, y 0,25–0,42 H);
	   видимая надпись — SVG .ollya-foot__ink, текст ссылки — для скринридеров */
	.ollya-foot__flag {
		position: absolute;
		left: calc(var(--ollya-actor) * 0.77);
		top: calc(var(--ollya-actor) * 0.245);
		width: calc(var(--ollya-actor) * 0.39);
		height: calc(var(--ollya-actor) * 0.18);
		pointer-events: none;
		text-decoration: none;
		border-radius: 4px;
	}

	.ollya-foot__flag-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ollya-foot.is-flag .ollya-foot__flag {
		pointer-events: auto;
		cursor: pointer;
	}

	.ollya-foot__flag:focus-visible {
		outline: 2px solid var(--ollya-foot-orange);
		outline-offset: 3px;
	}

	/* Надпись на ткани: буквы ставит js/mascot.js (Foot.ink) по средней линии полотна текущего кадра,
	   с наклоном и высотой по изгибу ткани; буква проявляется, когда край полотна прошёл её */
	.ollya-foot__ink {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
		visibility: hidden;
		mix-blend-mode: multiply;
	}

	.ollya-foot.is-video .ollya-foot__ink {
		visibility: visible;
	}

	.ollya-foot__ink .l {
		opacity: 0;
		transform-box: fill-box;
		transform-origin: 50% 70%;
		transition: opacity 0.14s linear, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
	}

	.ollya-foot__ink .l.on {
		opacity: 1;
		transform: none;
	}

	/* Вариант «hand»: рукопись тёмными чернилами, как подписанная от руки ткань */
	.ollya-foot__ink--hand .l {
		font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
		font-weight: 700;
		fill: #3A2116;
		fill-opacity: 0.9;
		stroke: #3A2116;
		stroke-opacity: 0.9;
		transform: translateY(6%) scale(0.92);
	}

	/* Вариант «stamp»: штемпель цветом строчки флажка, рваная кромка краски */
	.ollya-foot__ink--stamp .l {
		font-family: 'Special Elite', 'Courier New', monospace;
		fill: #D2561A;
		fill-opacity: 0.92;
		stroke: #D2561A;
		filter: url(#ollya-ink-rough);
		transform: scale(1.5);
		transition: opacity 0.08s linear, transform 0.16s cubic-bezier(0.5, 0, 0.3, 1.4);
	}

	@media only screen and (max-width: 1466px) {
		.clapat-footer.ollya-foot {
			--ollya-edge: 60px;
		}
	}

	@media only screen and (max-width: 1024px) {
		.clapat-footer.ollya-foot {
			--ollya-pad: 60px;
			--ollya-edge: 40px;
			--ollya-pt: 64px;
			--ollya-pb: 140px;
		}
	}

	@media only screen and (max-width: 767px) {
		/* Колонкой: текст → персонаж по центру → соцсети строкой → ряд Back to Top / копирайт.
		   Пол — над строкой соцсетей, место под персонажа — нижним отступом сцены: ничего не перекрывается */
		.clapat-footer.ollya-foot {
			--ollya-actor: 170px;
			--ollya-floor: 150px;
			--ollya-pad: 24px;
		}

		.ollya-foot__scene {
			display: block;
			min-height: 0;
			padding: 48px var(--ollya-pad) calc(var(--ollya-floor) + var(--ollya-actor) * 0.72 + 28px);
		}

		.ollya-foot__info {
			max-width: none;
		}

		.ollya-foot__actor {
			left: calc(50% - var(--ollya-actor) * 0.495);
			top: auto;
			bottom: calc(var(--ollya-floor) - var(--ollya-actor) * 0.142);
		}

		/* значок Back to Top темы (обёртка 80 px с отступом 5 px) торчал под футер на 5 px —
		   в теме это прятал overflow:hidden футера, у нас он visible */
		.clapat-footer.ollya-foot #footer-container {
			overflow: hidden;
		}

		.ollya-foot__rail {
			position: absolute;
			left: var(--ollya-pad);
			right: var(--ollya-pad);
			bottom: 92px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 4px 20px;
			text-align: center;
		}

		.ollya-foot__rail-k {
			flex-basis: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ollya-foot__caret {
			animation: none;
		}

		.ollya-foot__ink .l {
			transition: none;
		}
	}