/* Кастомные стили темы АнтиКвест. Подключаются после стилей темы. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap");

/* ------------------------------------------------------------------
 * Анимации кнопок (блок «Кнопка», стили aq-anim-*)
 * Выбор в редакторе: панель блока -> Стиль -> наши 5 анимаций
 * ------------------------------------------------------------------ */

/* Базовый плавный переход для всех кнопок */
.wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
	will-change: transform;
}

/* 1. Пульс — увеличение при наведении */
.aq-anim-pulse .wp-block-button__link:hover {
	transform: scale(1.06);
}

/* 2. Подъём — кнопка приподнимается, лёгкая тень */
.aq-anim-lift .wp-block-button__link:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* 3. Нажатие — кнопка вдавливается */
.aq-anim-press .wp-block-button__link:hover {
	transform: scale(0.96);
	box-shadow: none;
}

/* 4. Свечение — мягкий ореол вокруг кнопки */
.aq-anim-glow .wp-block-button__link:hover {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), 0 0 24px rgba(0, 0, 0, 0.25);
}

/* 5. Блик — белая полоса пробегает по кнопке слева направо */
.aq-anim-shine .wp-block-button__link {
	position: relative;
	overflow: hidden;
}
.aq-anim-shine .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -110%;
	width: 60%;
	height: 100%;
	background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.aq-anim-shine .wp-block-button__link:hover::after {
	left: 120%;
}

/* Инверсия картинки (чёрное -> белое) для тёмных фонов.
 * Использование: блок «Изображение» -> Дополнительно -> Дополнительные классы: aq-invert-img */
.aq-invert-img {
	filter: invert(1);
}

/* ------------------------------------------------------------------
 * Хиро-секция (паттерн aq-hero) — только декоративные эффекты.
 * Текст, цвета, отступы, выравнивание задаются штатными настройками блоков.
 * ------------------------------------------------------------------ */

/* Хиро — ровно один экран (структурно).
 * Фон-картинка задаётся в самой группе (Медиа -> Картинка фона). */
.aq-hero {
	min-height: 100svh;
	position: relative;
}

/* Группа «шапка + хиро» — ровно один экран (структура шаблона) */
.aq-hero-wrap.is-layout-flex {
	align-items: stretch;
}
.aq-hero-wrap,
.aq-hero-wrap > .wp-block-group__inner-container {
	min-height: 100svh;
}
.aq-hero-wrap > .aq-hero {
	flex: 1 1 auto;
	min-height: 0 !important;
}

/* Планшет и уже: фон hero — «обложка» (заполняет экран) с фокусом по центру.
 * Только CSS: настройки фона в редакторе не адаптивные — одинаковы для всех экранов.
 * background-attachment: fixed глючит на мобильных (iOS Safari/Android) —
 * картинка не рендерится. Перебиваем inline-стиль редактора !important.

 * Вертикальное центрирование: hero становится flex-колонкой, а её ребёнок
 * («друг под другом», is-vertical) растягивается на всю высоту, чтобы
 * собственное justify-content:center реально работало. */
@media ( max-width: 1024px ) {
	.aq-hero {
		display: flex;
		flex-direction: column;
		background-size: cover !important;
		background-position: center !important;
		background-attachment: scroll !important;
	}
	.aq-hero > * {
		flex: 1 1 auto;
		min-height: 0;
	}
	/* Спейсер aq-fill внутри hero не должен растягиваться,
	 * иначе он съедает свободное место и ломает центрирование. */
	.aq-hero .aq-fill {
		flex: 0 0 auto !important;
	}
}

/* Телефоны: вся картинка видна целиком, по центру, немного увеличена. */
@media ( max-width: 640px ) {
	.aq-hero {
		background-size: 180% auto !important;
		background-position: 35% center !important;
	}
}

/* ---------- «Сообщество»: разворот паспорта ---------- */
.aq-passport-stack {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	perspective: 1400px;
}
.aq-passport-stack .wp-block-image:first-of-type {
	width: 55%;
	z-index: 2;
	margin: 0;
	transform: rotate( -4deg );
	transform-origin: 100% 50%;
}
.aq-passport-stack .wp-block-image:first-of-type img {
	width: 100%;
	height: auto;
	box-shadow: -10px 14px 30px rgba(0, 0, 0, .25);
}
.aq-passport-stack .aq-pass-back {
	width: 55%;
	z-index: 1;
	margin: 0 0 0 -10%;
	transform: rotate( 4deg );
	transform-origin: 0% 50%;
}
.aq-passport-stack .aq-pass-back img {
	width: 100%;
	height: auto;
	box-shadow: 10px 14px 30px rgba(0, 0, 0, .25);
}
.aq-passport-stack::before {
	content: "";
	position: absolute;
	top: 5%;
	bottom: 5%;
	left: 50%;
	width: 10px;
	transform: translateX( -50% );
	background: linear-gradient( 180deg, #3a3a3a, #181818 );
	border-radius: 3px;
	z-index: 3;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
@media ( max-width: 781px ) {
	.aq-passport-stack .wp-block-image:first-of-type,
	.aq-passport-stack .aq-pass-back {
		width: 60%;
		margin-left: -6%;
	}
}

/* ---------- Появление блоков при прокрутке ----------
 * Любому блоку: Дополнительно → Доп. CSS-класс(ы) →
 *   aq-reveal            (обязательный)  базовое появление
 *   aq-reveal-fade       — просто проявление
 *   aq-reveal-up         — снизу вверх
 *   aq-reveal-down       — сверху вниз
 *   aq-reveal-left       — вылетает слева
 *   aq-reveal-right      — вылетает справа
 *   aq-reveal-scale      — из уменьшения
 *   aq-delay-1 .. aq-delay-5 — задержка старта 0.1c..0.5c
 */
.aq-reveal {
	opacity: 0;
	transition: opacity .7s ease, transform .7s cubic-bezier( .22, .61, .36, 1 );
	will-change: opacity, transform;
}

.aq-reveal.is-visible,
.aq-reveal[data-aq-visible] {
	opacity: 1;
	transform: none;
}

/* Пункт аккордеона: Interactivity API перезаписывает class при раскрытии.
   Не теряем transition раскрытия (grid-template-rows) из-за .aq-reveal. */
.wp-block-accordion-item.aq-reveal {
	transition: opacity .7s ease, transform .7s cubic-bezier( .22, .61, .36, 1 ), grid-template-rows .3s ease-out;
}

.aq-reveal-up    { transform: translateY( 40px ); }
.aq-reveal-down  { transform: translateY( -40px ); }
.aq-reveal-left  { transform: translateX( -60px ); }
.aq-reveal-right { transform: translateX( 60px ); }
.aq-reveal-scale { transform: scale( .92 ); }

.aq-delay-1 { transition-delay: .1s; }
.aq-delay-2 { transition-delay: .2s; }
.aq-delay-3 { transition-delay: .3s; }
.aq-delay-4 { transition-delay: .4s; }
.aq-delay-5 { transition-delay: .5s; }

/* Отключаем анимации для пользователей с настройкой «уменьшить движение» */
@media ( prefers-reduced-motion: reduce ) {
	.aq-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* В редакторе (канве) анимацию появления НЕ показываем: блок всегда видим.
 * Срабатывает и в редакторе поста, и в редакторе шаблонов/паттернов. */
.editor-styles-wrapper .aq-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Равная высота карточек «Почему выбирают нас» (group внутри column) */
/* ---------- Слайдер «Спектакли» ---------- */
/* Ряд: [кнопка prev] [слайдер] [кнопка next] — стрелки по бокам контента */
.aq-perf-mediarow {
	align-items: center;
}

/* Вьюпорт слайдера: скрывает всё, что за пределами области */
.aq-perf-slider {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	--aq-quests-per-view: 4;
}

/* Дорожка: align-items:stretch даёт одинаковую высоту карточек */
.aq-perf-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	background: #333;
	gap: 2px;
	will-change: transform;
	transition: transform .55s cubic-bezier( .22, .61, .36, 1 );
}

.aq-perf-track.is-instant { transition: none; }

/* Карточка */
.aq-perf-slide {
	flex: 0 0 auto;
	width: calc((100% - (var(--aq-quests-per-view) - 1) * 2px) / var(--aq-quests-per-view));
	display: flex;
	flex-direction: column;
	background: #111;
}

/* Видимых карточек в ряду — от ширины экрана */
@media ( max-width: 1199px ) { .aq-perf-slider { --aq-quests-per-view: 3; } }
@media ( max-width: 899px )  { .aq-perf-slider { --aq-quests-per-view: 2; } }
@media ( max-width: 599px )  { .aq-perf-slider { --aq-quests-per-view: 1; } }

/* Медиа */
.aq-perf-media {
	position: relative;
	overflow: hidden;
}

.aq-perf-media figure { margin: 0; }

.aq-perf-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( 100% );
	opacity: .6;
	transition: transform .6s ease, opacity .6s ease, filter .6s ease;
}

.aq-perf-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100% );
}

@media ( hover: hover ) {
	.aq-perf-slide:hover .aq-perf-media img {
		transform: scale( 1.06 );
		opacity: .75;
		filter: none;
	}
}

/* Жанр — бейдж поверх изображения */
.aq-perf-genre {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(0,0,0,.35);
	font-family: "Inter", sans-serif;
	font-size: 10px; font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

/* Тело карточки: кнопка прижимается книзу, чтобы все карточки были равной высоты */
.aq-perf-body { display: flex; flex-direction: column; flex: 1; }
.aq-perf-body .wp-block-button { margin-top: auto; }
.aq-perf-body .wp-block-button__link { width: 100%; justify-content: center; }

/* Навигационные кнопки (стрелки) */
.aq-perf-nav { flex: 0 0 auto; }

.aq-perf-nav .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	padding: 0;
	border-width: 0 !important;    /* без контура/рамки */
	border-color: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	transition: background .3s ease, color .3s ease;
}

.aq-perf-nav .wp-block-button__link svg { display: block; }

@media ( hover: hover ) {
	.aq-perf-nav .wp-block-button__link:hover {
		background-color: #fff !important;
		color: #111 !important;
	}
}

/* Мобилка <900px: слайдер на всю ширину, кнопки внизу */
@media ( max-width: 899px ) {
	.aq-perf-slider { flex: 1 1 100%; order: 1; }
	.aq-perf-prev { order: 2; }
	.aq-perf-next { order: 3; }
	.aq-perf-nav { margin-top: 44px; }
}

/* ============================================================
   AQ Slider (новый блочный слайдер) — тёмная секция.
   Оформление карточки (3:4, grayscale, градиент, stats, ghost-CTA)
   теперь живёт в плагине (public/css/slider.css) — макет Figma.
   Здесь оставляем только то, что плагин не знает про тему.
   ============================================================ */
.aq-slider--site-dark {
	--aq-slider-accent: #ffffff;
	color: #ffffff;
}

.aq-slider--site-dark .aq-slider__title {
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-align: left;
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.aq-slider--site-dark .aq-slider__desc {
	margin: 0;
	text-align: left;
	color: rgba(255, 255, 255, 0.5);
}

/* Убираем дефолтный block-gap-отступ между секциями на уровне .wp-site-blocks
   (ядро генерит `:where(.wp-site-blocks) > * { margin-block-start: 1.2rem }`,
   --wp--style--block-gap при этом сохраняется для флекс/потоков). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------- Smart Slider 3 (метаслайдер №2) на мобильных ----------
 * На десктопе как есть (blurfit: фото целиком + размытые края, contain).
 * На телефонах (<= 900px) фото занимает всю ширину в своём размере
 * (высота слайда = высота фото), без обрезки сверху/снизу и без блюра.
 */
@media (max-width: 900px) {
	.n2-section-smartslider[data-ssid="2"] {
		height: auto !important;
	}

	#n2-ss-2,
	#n2-ss-2 .n2-ss-slider-1,
	#n2-ss-2 .n2-ss-slider-2,
	#n2-ss-2 .n2-ss-slider-3,
	#n2-ss-2 .n2-ss-slider-4,
	#n2-ss-2 .n2-ss-slide,
	#n2-ss-2 .n2-ss-slide-backgrounds {
		height: auto !important;
		min-height: 0 !important;
	}

	/* Фон-контейнер слайда — поверх слайда (не в потоке, чтобы не складывать
	   фоны всех слайдов вертикально) */
	#n2-ss-2 .n2-ss-slide-background,
	#n2-ss-2 .n2-ss-slide-backgrounds {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Smart Slider пинит высоту инлайн-свойством grid-template-rows;
	   сбрасываем его статично, чтобы высота шла из фото */
	#n2-ss-2 .n2-ss-slider-1,
	#n2-ss-2 .n2-ss-slider-2,
	#n2-ss-2 .n2-ss-slider-3,
	#n2-ss-2 .n2-ss-slider-4,
	#n2-ss-2 .n2-ss-slider-4 > .n2-ss-slide {
		grid-template-rows: none !important;
	}

	/* Слайд на мобильных — квадрат: фото (кв.) целиком, без обрезки */
	#n2-ss-2 .n2-ss-slider-4 > .n2-ss-slide {
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

	/* Резкое фото заполняет кадр слайда, contain — ничего не обрезается */
	#n2-ss-2 .n2-ss-slide-background-image:not([data-bgblur]) {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#n2-ss-2 .n2-ss-slide-background-image:not([data-bgblur]) picture {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}

	#n2-ss-2 .n2-ss-slide-background-image:not([data-bgblur]) img {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	/* Скрываем размытую подложку (у неё data-bgblur; селектор picture[style]
	   НЕ используем — плагин добавляет инлайн-стиль и резкому picture) */
	#n2-ss-2 .n2-ss-slide-background-image[data-bgblur] {
		display: none !important;
	}
}

/* Popup Maker: WP не выводит wp-container-* для контента попапа,
   поэтому соц-иконки не центрируются и слипаются — задаём явно */
.pum-content .wp-block-social-links {
	justify-content: center;
	gap: 20px;
}

/* Плавная прокрутка якорей (#community, #performances и т.п.) */
html {
	scroll-behavior: smooth;
}

/* Чтобы секция не уходила под админ-бар WordPress */
@media screen and (min-width: 783px) {
	html.admin-bar {
		scroll-padding-top: 48px;
	}
}

@media screen and (max-width: 782px) {
	html.admin-bar {
		scroll-padding-top: 64px;
	}
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Лайтбокс слайдера «АнтиКвест Мерч» (Smart Slider 3) ----------
 * Клик по слайду открывает фото во весь экран (как фото «паспорта»
 * в блоке «Сообщество», которое использует штатный WP-лайтбокс).
 */
#n2-ss-2 .n2-ss-slide { cursor: zoom-in; }

.aq-ss-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.9);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.aq-ss-lightbox.is-open {
	visibility: visible;
	opacity: 1;
}

.aq-ss-lightbox__frame {
	max-width: 100%;
	max-height: 100%;
}

.aq-ss-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 80px);
	margin: 0 auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.aq-ss-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.aq-ss-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

body.aq-ss-lock {
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.aq-ss-lightbox { padding: 16px; }
	.aq-ss-lightbox__img { max-height: calc(100vh - 32px); }
}

@media ( prefers-reduced-motion: reduce ) {
	.aq-ss-lightbox { transition: none; }
}

/* Защита от горизонтальной полосы прокрутки слева/справа.
   Скрытые блоки aq-reveal (translateX ±60px) на время анимации выезжают
   за вьюпорт и расширяют scrollWidth документа → появлялась белая полоса.
   clip (в отличие от hidden) не создаёт scroll-контейнер и ломает
   position: sticky / fixed попапы, поэтому используем именно clip. */
html,
body {
	overflow-x: clip;
}

/* Паттерн «Мерч» (#merch): на мобильных картинка и кнопки в один ряд,
 * заполняют ширину, между ними space-between. На ПК остаётся вертикально. */
@media ( max-width: 640px ) {
	#merch .aq-fill {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
}

/* На ПК глобальное правило-спейсер `:where(.is-layout-flex) > .aq-fill`
 * (flex: 1 1 0px !important) схлопывает блок контента мерча до ширины 0,
 * из-за чего картинка и кнопки не видны. Возвращаем базовую ширину по
 * контенту, оставляя возможность сжиматься рядом с большим слайдером. */
@media ( min-width: 641px ) {
	#merch .aq-fill {
		flex: 0 1 auto !important;
		max-width: 340px;
	}
	#merch .aq-fill .wp-block-image img {
		width: 100%;
		height: auto;
	}
	#merch .n2-section-smartslider {
		flex: 1 1 auto !important;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
 * Шапка (только телефоны): телефон не переносится на новую строку и
 * занимает ровно столько места, сколько ему нужно, а логотип-паттерн
 * забирает остаток и уменьшается пропорционально — картинки не
 * обрезаются. На планшетах и ПК — прежнее поведение.
 * ------------------------------------------------------------------ */
@media screen and ( max-width: 782px ) {
	header a[href^="tel:"] {
		white-space: nowrap; /* текст не переносится */
	}

	header .wp-block-buttons {
		flex: 0 0 auto; /* кнопка не сжимается: занимает свою ширину */
	}

	header > .wp-block-group > .wp-block-group:first-child {
		flex: 1 1 auto; /* логотип занимает остаток места */
		min-width: 0;   /* и имеет право сжиматься */
	}

	header > .wp-block-group > .wp-block-group:first-child img {
		object-fit: contain; /* пропорции сохраняются, без обрезки */
	}
}

/* Тень шапки при скролле: header получает класс aq-header-scrolled
 * от custom.js, когда страница прокручена ниже ~150px. */
header.aq-header-scrolled {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.25s ease;
}
header {
	transition: box-shadow 0.25s ease;
}

/* Плавающая кнопка-телефон (FAB) в правом нижнем углу экрана.
 * Контент меню подключается через виджет-зону «Плавающая кнопка». */
.aq-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
}
.aq-fab__toggle {
	pointer-events: auto;
}
.aq-fab * {
	box-sizing: border-box;
}
.aq-fab__toggle {
	position: relative;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3, #1f1f1f);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, background-color 0.2s ease;
	line-height: 0;
}
/* Пассивная пульсация: расходящиеся от кнопки круги (sonar).
 * Работает постоянно, пока меню закрыто. */
.aq-fab__toggle::before,
.aq-fab__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent-2, #404040);
	opacity: 0.7;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: none;
	animation: aq-fab-sonar 2.6s ease-out infinite;
	z-index: 0;
}
.aq-fab__toggle::after {
	animation-delay: 1.3s;
}
@keyframes aq-fab-sonar {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.7;
	}
	80% {
		opacity: 0.15;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.75);
		opacity: 0;
	}
}
.aq-fab__toggle:hover {
	background: var(--wp--preset--color--accent-2, #404040);
	transform: scale(1.05);
}
/* «Звонок» кнопки-телефона (запускается из aq-fab.js раз в 3 секунды).
 * Дёргается только иконка трубки; сама круглая кнопка лишь слегка
 * увеличивается. */
@keyframes aq-fab-ring {
	0% {
		transform: rotate(0deg) translateX(0);
	}
	15% {
		transform: rotate(-7deg) translateX(-1.5px);
	}
	30% {
		transform: rotate(7deg) translateX(1.5px);
	}
	45% {
		transform: rotate(-7deg) translateX(-1.5px);
	}
	60% {
		transform: rotate(7deg) translateX(1.5px);
	}
	75% {
		transform: rotate(-4deg) translateX(-1px);
	}
	100% {
		transform: rotate(0deg) translateX(0);
	}
}
@keyframes aq-fab-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}
.aq-fab__toggle--ring {
	animation: aq-fab-pulse 0.7s ease-in-out;
}
.aq-fab__toggle--ring .aq-fab__call-icon {
	animation: aq-fab-ring 0.7s ease-in-out;
}
@media ( prefers-reduced-motion: reduce ) {
	.aq-fab__toggle--ring,
	.aq-fab__toggle--ring .aq-fab__call-icon,
	.aq-fab__toggle::before,
	.aq-fab__toggle::after {
		animation: none;
	}
}
.aq-fab.is-open .aq-fab__toggle::before,
.aq-fab.is-open .aq-fab__toggle::after {
	animation: none;
	opacity: 0;
}
.aq-fab__toggle svg {
	width: 26px;
	height: 26px;
}
.aq-fab__close-icon {
	display: none;
}
.aq-fab.is-open .aq-fab__call-icon {
	display: none;
}
.aq-fab.is-open .aq-fab__close-icon {
	display: block;
}

.aq-fab__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}
.aq-fab.is-open .aq-fab__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
.aq-fab__item {
	margin: 0;
}
.aq-fab__item a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3, #1f1f1f);
	color: #ffffff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.aq-fab__item a:hover {
	transform: translateY(-1px);
}
.aq-fab__item a > svg,
.aq-fab__item a > img {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.aq-fab__item--telegram a {
	background: var(--wp--preset--color--accent-3, #1f1f1f);
}
.aq-fab__item--telegram a:hover {
	background: var(--wp--preset--color--accent-2, #404040);
}
.aq-fab__item--callback a {
	background: var(--wp--preset--color--accent-4, #757575);
}
.aq-fab__item--callback a:hover {
	background: var(--wp--preset--color--accent-2, #404040);
}

@media ( max-width: 640px ) {
	.aq-fab {
		right: 16px;
		bottom: 16px;
	}
	.aq-fab__toggle {
		width: 56px;
		height: 56px;
	}
}

/* Паттерн «Атмосфера игры» (#atmosphere): строгий монохром,
 * чёрное / белое / оттенки серого, прямые углы. */
#atmosphere {
	position: relative;
	overflow: hidden;
}
#atmosphere::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -160px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 65%);
	pointer-events: none;
	z-index: 0;
}
#atmosphere::after {
	content: "";
	position: absolute;
	bottom: -200px;
	left: -140px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 65%);
	pointer-events: none;
	z-index: 0;
}
#atmosphere > * {
	position: relative;
	z-index: 1;
}

.aq-atmos-eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 8px 16px;
	background: #ffffff;
	color: #111111;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
}

.aq-atmos-accent {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.aq-atmos-desc {
	color: #a3a3a3;
}

.aq-atmos-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.aq-atmos-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #3a3a3a;
	background: transparent;
	color: #e8e8e8;
	font-size: 14px;
	font-weight: 500;
}
.aq-atmos-stat::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #ffffff;
	flex: 0 0 6px;
}

.aq-atmos-video-card {
	position: relative;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	border: 1px solid #3a3a3a;
}
.aq-atmos-video-card .wp-block-video,
.aq-atmos-video-card video {
	width: 100%;
	height: 100%;
	display: block;
}
.aq-atmos-video-card video {
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.aq-atmos-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.75);
	border: 1px solid #3a3a3a;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.aq-atmos-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #ffffff;
	animation: aq-pulse 1.8s ease-in-out infinite;
}
@keyframes aq-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.aq-atmos-posters {
	display: flex;
	gap: 14px;
}
.aq-atmos-posters figure {
	margin: 0;
	flex: 1 1 0;
}
.aq-atmos-posters img {
	border: 1px solid #3a3a3a;
	transition: transform 0.35s ease;
}
.aq-atmos-posters figure:hover img {
	transform: translateY(-6px);
}

.aq-atmos-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid #3a3a3a;
	background: rgba(255, 255, 255, 0.02);
}
.aq-atmos-facts .aq-atmos-fact {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 20px;
	flex: 1 1 0;
	box-sizing: border-box;
	color: #e8e8e8;
	font-size: 15px;
	font-weight: 600;
}
.aq-atmos-facts .aq-atmos-fact + .aq-atmos-fact {
	border-left: 1px solid #3a3a3a;
}
.aq-atmos-facts .aq-atmos-fact__num {
	font-family: var(--wp--preset--font-family--fira-code, ui-monospace, monospace);
	font-size: 13px;
	color: #8a8a8a;
	font-weight: 500;
	flex: 0 0 auto;
}

@media ( max-width: 1024px ) {
	.aq-atmos-video-card video {
		aspect-ratio: 16 / 9;
	}
	.aq-atmos-posters {
		gap: 10px;
	}
	.aq-atmos-facts {
		flex-direction: column;
		align-items: stretch;
	}
	.aq-atmos-facts .aq-atmos-fact {
		flex: 1 1 auto;
		width: 100%;
		box-sizing: border-box;
		border-left: 0;
		border-top: 0;
	}
	.aq-atmos-facts .aq-atmos-fact + .aq-atmos-fact {
		border-top: 1px solid #3a3a3a;
		border-left: 0;
	}
}

/* ------------------------------------------------------------------
 * Паттерн «Услуги» (#services): сетка карточек с фото.
 * Карточка = фото 16:9 вровень с краями (убираем внутренние паддинги
 * блока) + заголовок с серым описанием. Тонкая серая сетка-фон бриджа
 * даёт линии-разделители 2px между карточками.
 * ------------------------------------------------------------------ */

/* Фото — на всю ширину карточки, единый кадр 16:9, по центру.
 * Внутренние паддинги 40/36px группы снимаем отрицательными маржами. */
#services .wp-block-image {
	margin: -40px -36px 0;
}
#services .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

/* Карточки растягиваем на всю высоту ряда грид-ячейки,
 * чтобы подписи выравнивались по нижнему краю. overflow скрывает
 * выросшее при ховере фото за краями карточки. */
#services .wp-block-group__inner-container > .wp-block-group,
#services .is-layout-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
}
#services .is-layout-grid > .wp-block-group .wp-block-heading {
	margin-top: 20px;
}
#services .is-layout-grid > .wp-block-group p {
	margin-bottom: 0;
}

/* Лёгкое приближение фото при наведении на карточку целиком
 * (только устройства с курсором). Картинка растёт и обрезается
 * краями карточки (overflow: hidden выше).
 * На тач-устройствах ноль, чтобы не прыгало при скролле. */
@media ( hover: hover ) {
	#services .is-layout-grid > .wp-block-group:hover img {
		transform: scale(1.06);
	}
}
@media ( hover: none ) {
	#services .wp-block-image img {
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
 * Паттерн «Почему выбирают нас» (wp_block 95 aq-why).
 * Единый размер иконок-декора: не выше 64px, ширина исходная.
 * ------------------------------------------------------------------ */
.aq-why-icon img {
	height: 72px !important;
	max-height: 72px !important;
	width: auto !important;
}

/* Маска на первой карточке — отражаем зеркально (наклон в другую
 * сторону), чуть увеличиваем разворот и добавляем мягкую тень,
 * чтобы читалась как декоративный элемент поверх остальных. */
.aq-why-mask img {
	transform: scaleX( -1 ) rotate( -12deg );
	filter: drop-shadow( 0 10px 14px rgba( 0, 0, 0, 0.35 ) );
}

/* Фон секции — градиент от светлого сверху к чисто чёрному снизу,
 * чтобы плавно переходил в чёрный следующий блок (bg #000). */
.wp-block-group.alignfull:has( .aq-why-card ) {
	background-image: linear-gradient(
		180deg,
		#f5f5f5 0%,
		#d9d9d9 35%,
		#1f1f1f 75%,
		#000000 100%
	) !important;
}

/* Карточки — белые подложки на градиенте. */
.aq-why-card {
	background-color: #ffffff;
}

/* ------------------------------------------------------------------
 * Паттерн «Сообщество» (wp_block 2008 aq-community).
 * Фото здания — широкая фото-полоса под легендой о доме.
 * ------------------------------------------------------------------ */
.aq-building-photo .wp-block-image {
	margin: 0;
}
.aq-building-photo img {
	display: block;
	width: 100%;
	height: clamp( 320px, 42vw, 640px );
	object-fit: cover;
	object-position: center;
}

/* Мобильная раскладка сетки — одна колонка (задано в паттерне),
 * паддинги карточек остаются 40/36 — маржины те же, что и на ПК.
 * Линии сеточного бриджа 2px на маленьких экранах светлеем,
 * чтобы не превращались в крупные чёрточки. */
@media ( max-width: 600px ) {
	#services .is-layout-grid {
		background-color: #e8e8e8 !important;
	}
	#services .is-layout-grid > .wp-block-group .wp-block-heading {
		margin-top: 16px;
	}
}

/* ------------------------------------------------------------------
 * Паттерн «Автор» (wp_block 3105): анимированный ворон.
 *
 * Два НЕЗАВИСИМЫХ слоя:
 *   .crow-track  — движение по траектории. Только transform: translate(x,y)
 *                  (задаёт aq-crow.js). Ориентация картинки фиксирована,
 *                  никаких rotate от траектории.
 *   .crow-sprite — «дёргание». Только transform: rotate() (keyframes
 *                  aq-crow-twitch), без смещения. transform-origin: центр.
 *
 * Дёргание: 0° -> +10° -> -30° -> +40° -> 0°, каждый шаг 0.5s (2000ms / 4),
 * ease-in-out. Плей-стейт управляет aq-crow.js (paused по умолчанию).
 * Длительности полёта/сидения/паузы — в aq-crow.js (НАСТРОЙКИ).
 * ------------------------------------------------------------------ */
#author {
	position: relative;
}

.aq-crow-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0; /* ворон ПОД видео */
	overflow: visible;
}

/* Видео — над вороном (ворон «вылетает» из центра блока, скрываясь за ним). */
.wp-block-video {
	position: relative;
	z-index: 1;
}

/* Точка (0,0) .crow-track = центр-низ картинки ворона.
 * Ширина/высота знаят настройкой ниже, чтобы rotate вращался вокруг
 * центра картинки, а сами габариты можно было менять одним местом. */
:root {
	--crow-w: clamp( calc( 48px * 1.1 ), calc( 7vw * 1.1 ), calc( 110px * 1.1 ) );
	--crow-h: calc( var( --crow-w ) * 0.857 ); /* 695/811 — пропорции исходника */
}

/* На мобилках ворон в 2 раза крупнее. */
@media ( max-width: 781.98px ) {
	:root {
		--crow-w: clamp( 96px, 14vw, 220px );
	}
}

.crow-track {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	will-change: transform;
}

.crow-sprite {
	position: absolute;
	left: calc( var( --crow-w ) / -2 );
	top: calc( var( --crow-h ) * -1 );
	width: var( --crow-w );
	height: var( --crow-h );
	object-fit: contain;
	transform-origin: 50% 50%;
	animation: aq-crow-twitch 1200ms linear infinite;
	animation-play-state: paused; /* JS ставит running при входе блока в зону видимости */
}

/* Резкое «дёргание»: каждый угол держится ровно 0.3s (25% от 1200ms)
 * и сменяется мгновенно: 0 -> +10 -> -30 -> +25 -> 0. Без плавных
 * переходов. Длительность шага = 1200ms / 4 = 0.3s (TWITCH_STEP_DURATION). */
@keyframes aq-crow-twitch {
	0%, 24.99%   { transform: rotate( 0deg ); }
	25%, 49.99%  { transform: rotate( 10deg ); }
	50%, 74.99%  { transform: rotate( -30deg ); }
	75%, 99.99%  { transform: rotate( 25deg ); }
	100%         { transform: rotate( 0deg ); }
}