/* VSA Fullscreen Slideshow - оверлей */
/* Дизайн по вкусу Ивана: графит #1C1E21, flat, никаких тяжёлых теней, зерно на фоне. */
/* Итерация 2: intro-заставка, постоянный бренд в углу, Ken Burns-движения */

.vsa-fs-menu-item {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
}

.vsa-fs-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0 8px;
	margin: 0;
	height: 30px;      /* = line-height пунктов меню (#primary-menu a: 30px),
	                      чтобы центр иконки совпадал с центром текста */
	cursor: pointer;
	color: inherit;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.vsa-fs-toggle .vsa-fs-icon {
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0.85;
}

.vsa-fs-toggle:hover .vsa-fs-icon,
.vsa-fs-toggle:focus-visible .vsa-fs-icon {
	opacity: 1;
}

.vsa-fs-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- оверлей ---
   Кинозальное затемнение: экран плавно «гаснет» от белого к графиту. Изначально
   фон белый (сливается со страницей — никакой вспышки/белой полоски внизу),
   затем background-color плавно доходит до #1C1E21, как гаснет свет в кинозале.
   Видимость управляется инлайн display (open='' / closeNow='none').
   Прозрачность не трогаем (opacity-переходы сквозь оверлей показывали бы белую
   страницу под графитом = «серый фон» + мигание). */
.vsa-fs-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #fff; /* старт: белый = страница, без вспышки */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	transition: background-color 1.1s cubic-bezier(0.45, 0, 0.55, 1);
}

/* film-grain поверх фона (flat-текстура, premium) */
.vsa-fs-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
	background-size: 160px 160px;
}

.vsa-fs-overlay.is-open {
	background: #1C1E21; /* графит — свет «погас» */
	pointer-events: auto;
}

/* Во время intro-заставки слайды скрыты — виден только тёмный фон + бренд + надпись,
   затем после уезда логотипа .is-intro снимается и слайды проявляются. */
.vsa-fs-overlay.is-intro .vsa-fs-stage,
.vsa-fs-overlay.is-intro .vsa-fs-slide {
	opacity: 0 !important;
}

.vsa-fs-stage {
	position: absolute;
	inset: 0;
	display: block;
}

/* Слайд: абсолютный контейнер на весь экран, обрезает Ken Burns-выходы за край.
   Кроссфейд на уровне слайда (opacity). */
.vsa-fs-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.vsa-fs-slide.is-active {
	opacity: 1;
}

/* Картинка полностью заполняет слайд (cover), чтобы не было полей.
   Ken Burns задаётся transform-анимацией поверх (см. ниже .kb*). */
.vsa-fs-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* --- Ken Burns (движение картинок) ---
   Для каждого кадра случайный вариант kb1..kbN. Длительность = интервал показа.
   Селектор НЕ зависит от .is-active: когда слайд уходит (теряет is-active),
   анимация не сбрасывается и картинка не «прыгает» обратно к scale 1 —
   иначе был бы глитч «25-й кадр» в момент кроссфейда. */
.vsa-fs-slide .vsa-fs-img.kb1 {
	animation: vsa-kb-zoom-in 6s ease-out forwards;
}
.vsa-fs-slide .vsa-fs-img.kb2 {
	animation: vsa-kb-zoom-out 7s ease-out forwards;
}
.vsa-fs-slide .vsa-fs-img.kb3 {
	animation: vsa-kb-pan-right 8s ease-in-out forwards;
}
.vsa-fs-slide .vsa-fs-img.kb4 {
	animation: vsa-kb-pan-left 8s ease-in-out forwards;
}

@keyframes vsa-kb-zoom-in {
	0%   { transform: scale(1); }
	100% { transform: scale(1.1); }
}
@keyframes vsa-kb-zoom-out {
	0%   { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@keyframes vsa-kb-pan-right {
	0%   { transform: scale(1.15) translate(-3%, 0); }
	100% { transform: scale(1.05) translate(3%, 0); }
}
@keyframes vsa-kb-pan-left {
	0%   { transform: scale(1.1) translate(2%, 1%); }
	100% { transform: scale(1.16) translate(-2%, -1%); }
}

/* --- Логотип (общий) --- */
.vsa-fs-logo {
	position: absolute;
	display: block;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* --- Intro-заставка: логотип из центра едет в левый верхний угол ---
   Логотип живёт внутри .vsa-fs-brand (inset:0) и сразу стоит в финальной позиции
   угла (left/top/width/height = позиции хедера). Стартовое «в центре, крупно»
   задаётся transform'ом; transition на transform двигает его плавно в угол. */
.vsa-fs-brand {
	position: absolute;
	inset: 0;
	z-index: 15;
	pointer-events: none;
}
.vsa-fs-brand .vsa-fs-logo {
	transform: translate(0, 0) scale(1);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
}
.vsa-fs-brand .vsa-fs-logo.fade-in {
	opacity: 1;
}
/* Стартовое «крупно по центру» (сдвиг и масштаб переданы CSS-переменными из JS),
   затем .intro-done снимает его — логотип плавно едет в угол. */
.vsa-fs-brand .vsa-fs-logo.intro-start {
	transform: translate(var(--vfs-dx, 0), var(--vfs-dy, 0)) scale(var(--vfs-scale, 1));
}
.vsa-fs-brand .vsa-fs-logo.intro-done {
	transform: translate(0, 0) scale(1);
}

/* --- Intro-заставка: слово «SLIDESHOW» выезжает из-за невидимой границы ---
   .vsa-fs-intro-word-wrap = невидимая граница (обёртка overflow:hidden, ширина = слова,
   лежит на bx = правый край логотипа + 8px). Слово внутри сначала сдвинуто влево
   (translateX(-100%), скрыто за левой кромкой обёртки), затем выезжает вправо.
   Исчезает одновременно с растворением (opacity + blur, см. .smoke). */
.vsa-fs-intro {
	position: absolute;
	inset: 0;
	z-index: 20;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.5, 0, 0.75, 0);
}
.vsa-fs-intro.show {
	opacity: 1;
}
.vsa-fs-intro.out {
	opacity: 0;
	transition: opacity 0.55s cubic-bezier(0.5, 0, 0.75, 0);
	pointer-events: none;
}

/* невидимая граница: левая кромка — маска, из-за которой выезжает слово */
.vsa-fs-intro-word-wrap {
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	height: 24px;
}
.vsa-fs-intro-word {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 15px;
	line-height: 24px;
	text-transform: uppercase;
	color: #FFF;
	will-change: transform;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* одна буква слова: blur/fade на каждую букву отдельно (без «прямоугольника») */
.vsa-fs-intro-ch {
	display: inline-block;
	will-change: transform, opacity, filter;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
	            filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* скрыто за левой кромкой обёртки (за границей) */
.vsa-fs-intro-word.pre {
	transform: translateX(-100%);
}
/* выехало из-за границы */
.vsa-fs-intro-word.in {
	transform: translateX(0);
}
/* исчезает + растворяется: каждая буква блюрится и тает со стаггером
   (слева направо, как дым), а не прямоугольником строки */
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch {
	transform: translateY(-10px);
	opacity: 0;
	filter: blur(6px);
}
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(1)  { transition-delay: 0.00s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(2)  { transition-delay: 0.05s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(3)  { transition-delay: 0.10s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(4)  { transition-delay: 0.15s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(5)  { transition-delay: 0.20s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(6)  { transition-delay: 0.25s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(7)  { transition-delay: 0.30s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(8)  { transition-delay: 0.35s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(9)  { transition-delay: 0.40s; }
.vsa-fs-intro-word.smoke .vsa-fs-intro-ch:nth-child(10) { transition-delay: 0.45s; }

/* Кнопка закрытия - hairline, приглушённый, в углу */
.vsa-fs-close {
	position: absolute;
	top: 20px;
	right: 22px;
	z-index: 30;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vsa-fs-close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.vsa-fs-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

body.vsa-fs-open {
	overflow: hidden;
}

/* --- Название проекта текущего кадра ---
   Крупные полупрозрачные буквы в нижней части экрана по левому краю.
   left задаётся из JS (= левый край логотипа). Появляется с компонент .in,
   и слегка сдвигается вправо, пока идёт показ слайда (за счёт translateX в .in). */
.vsa-fs-caption {
	position: absolute;
	bottom: 10vh;
	left: 20px;
	z-index: 12;               /* выше слайдов, ниже логотипа (brand=15) */
	pointer-events: none;
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(26px, 4.5vw, 48px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transform: translateX(0);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	max-width: 60vw;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.vsa-fs-caption.in {
	opacity: 0.55;               /* «немного прозрачные» */
	transform: translateX(18px); /* лёгкий сдвиг вправо за время показа */
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.vsa-fs-slide,
	.vsa-fs-overlay,
	.vsa-fs-toggle .vsa-fs-icon,
	.vsa-fs-intro .vsa-fs-logo,
	.vsa-fs-intro-word,
	.vsa-fs-caption,
	.vsa-fs-slide.is-active .vsa-fs-img.kb1,
	.vsa-fs-slide.is-active .vsa-fs-img.kb2,
	.vsa-fs-slide.is-active .vsa-fs-img.kb3,
	.vsa-fs-slide.is-active .vsa-fs-img.kb4 {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   HERO-РЕЖИМ (главная): динамический фон вместо 3 статичных ACF-слайдов.
   Тот же пул/фильтры/Ken Burns, что и в lightbox, но инлайн в секции
   (страница прокручивается, БЕЗ fullscreen/оверлея).
   ============================================================== */

/* Секция promo становится контейнером. Оригинальный owl-слайдер темы
   скрываем целиком — его высоту/вертикаль наследует наш hero-слой. */
.vsa-fs-hero-on .vsa_promo > .vsa_promo_slider {
	display: none !important;
}

/* --- VYAZMINOVA | SELVINSKY ARCHITECTS: постоянная надпись на hero ---
   Анимации темы НЕ трогаем (slash летит сверху и обрезается контейнером,
   h3 выезжают, ARCHITECTS проявляется blur-in) — см. main-page.css:592-687.
   Геометрию линии пинит JS (pinLine в app.js): высота #line > div = позиция
   hero-заголовка, как в оригинале делал JS темы от контента owl-слайда. */

/* Слой над hero-content (z5): надпись видна на всех слайдах */
.vsa-fs-hero-on .vsa_promo > .vsa_line {
	z-index: 6;
	/* Надпись — чистая декорация (h3 + .vsa_slash, ссылок внутри нет).
	   Она absolute top:0 left:0 width:100% и накрывает верх экрана, где
	   лежит меню темы (#vsaHeader z-index:4). Без pointer-events:none она
	   перехватывала клики по пунктам меню. */
	pointer-events: none;
}

/* vsa_main.css темы задаёт всем h2/h3 padding: 50px 0 20px — из-за паддинг-батома
   20px глифы строки сидят ВЫШЕ низа div, а палка обрезается по самому низу
   → палка на 20px ниже текста. Обнуляем паддинги: глифы прижаты к низу div,
   палка (обрезка по низу div) совпадает со строкой — знак "|" в надписи. */
.vsa-fs-hero-on .vsa_line h3 {
	padding: 0;
}

/* Линия скрыта, пока JS не пинил её высоту (vsa-fs-line-pinned ставится
   в pinLine()) — иначе до прихода пула надпись висит на дефолтной высоте
   контейнера (на заголовке проекта) и через секунду прыгает вверх */
.vsa-fs-hero-on .vsa_line {
	opacity: 0;
	transition: opacity 0.25s ease;
}
.vsa-fs-hero-on.vsa-fs-line-pinned .vsa_line {
	opacity: 1;
}

/* Hero-слой: занимает место слайдера (min-height 100vh), графит-фон,
   относительное позиционирование для children. */
.vsa-fs-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: #1C1E21;
}

/* film-grain поверх фона (flat-текстура, premium) — как в оверлее */
.vsa-fs-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
	background-size: 160px 160px;
}

/* Сцена фоновых слайдов: absolute на весь hero, переиспользуем .vsa-fs-slide/.vsa-fs-img */
.vsa-fs-hero-stage {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Контентная колонка по центру экрана (title -> year -> desc -> кнопки) */
.vsa-fs-hero-content {
	position: absolute;
	inset: 0;
	/* Держим ниже меню темы (#vsaHeader z-index:4): hero-title рендерится в
	   верхней полосе страницы, и при z>=4 он перехватывал клики по пунктам
	   меню. 2 — над stage(1), под меню(4) и декор-надписью .vsa_line(6). */
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	pointer-events: none;
}
.vsa-fs-hero-content > * { pointer-events: auto; }

/* Название проекта: крупно по центру, ссылка на страницу проекта.
   Стиль повторяет .hero-title темы (Panton, uppercase, white, тень). */
.vsa-fs-hero-title {
	display: inline-block;
	font-family: 'Panton', sans-serif;
	font-weight: 400;
	font-size: clamp(38px, 6.5vw, 96px);
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
	margin: 0;
	max-width: 90vw;
	transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
a.vsa-fs-hero-title:hover,
a.vsa-fs-hero-title:focus-visible {
	color: #c9c9c9;
	outline: none;
}

/* Год проекта — тонкая строка под описанием */
.vsa-fs-hero-year {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 16px;
}
.vsa-fs-hero-year:empty { display: none; }

/* Краткое описание под названием: мелко, 2-3 строки */
.vsa-fs-hero-desc {
	font-family: inherit;
	font-size: clamp(15px, 1.6vw, 19px);
	line-height: 1.5;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	max-width: 640px;
	margin: 18px auto 0;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/* Смена слайда: лёгкий fade (без rise-сдвига). Раньше был translateY(14px) —
   анимация не гасла до 0 и постоянно смещала блок надписей вниз на 14px,
   ломая вертикальное центрирование. */
.vsa-fs-hero-content .vsa-fs-hero-meta {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.vsa-fs-hero-content .vsa-fs-hero-meta.in {
	opacity: 1;
}

/* Кнопки hero (клоны .vsa_btns_wrapp из слайдов темы).
   absolute внизу: кнопки НЕ участвуют в центрировании `.vsa-fs-hero-content`
   (раньше они были вторым ребёнком flex-столбца и тянули центр вверх —
   блок надписей оказывался прижат к верху экрана, а не по центру).
   Селектор по двум классам: у темы `.vsa_btns_wrapp{position:relative;margin:40px}`
   (специфичность 1 класс) грузится позже и перебивает одиночный класс. */
.vsa-fs-hero-content .vsa-fs-hero-btns {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	margin: 0;
	top: auto;
	/* wrapper несёт класс vsa_btns_wrapp; тема в @media(max-width:768px)
	   прячет .vsa_btns_wrapp{display:none} -> footer page render даёт
	   rect.top=0 -> pinLine считал overflow~565 и уносил мету+линию за
	   экран (портрет: «надписей вообще нет»). Форсим видимость. */
	display: flex;
	opacity: 1 !important;
	z-index: 3;
}
.vsa-fs-hero-btns .vsa_btns_wrapp_resp { display: none; }
/* тёмный клонированный pill «Заказать» поверх светлых .owl-item.active мы не
   наследуем — оставляем как есть; transition тайминги темы не нужны */
.vsa-fs-hero-content .vsa-fs-hero-btns {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	transition: none !important;
}
/* desk-клон кнопок тоже вне owl-item.active: тема держит .owl-item.active
   .vsa_btns_wrapp на opacity:1, а наш клон на 0 — форсим. */
.vsa-fs-hero-content .vsa-fs-hero-btns > .vsa_btns_wrapp {
	opacity: 1 !important;
	top: auto;
	transition: none !important;
}

/* Мобильный: показываем только resp-версию кнопок (только «Заказать»).
   Тема прячет wrapper (fix 1) и держит resp на opacity:0/top:50px пока не
   `owl-item.active` (а наш клон вне слайдера) — форсим видимость. */
@media (max-width: 767px) {
	.vsa-fs-hero-content .vsa-fs-hero-btns .vsa_btns_wrapp { display: none; }
	.vsa-fs-hero-content .vsa-fs-hero-btns .vsa_btns_wrapp_resp {
		display: flex;
		opacity: 1 !important;
		top: auto;
		transition: none !important;
	}
	.vsa-fs-hero-content .vsa-fs-hero-btns .vsa_btns_wrapp_resp .vsa_tr_pill {
		padding: 8px 20px;
		min-height: 40px;
		font-size: 15px;
	}
}

/* hero не должен перекрывать хедер — тому свой слой поверх; на всякий случай */
.vsa-fs-hero-on #vsa_promo { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.vsa-fs-hero-content .vsa-fs-hero-meta {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* ЛАНДШАФТ (телефон горизонтально): vw-шрифты раздуваются до огромных и
   блок съезжает к верху — масштабируем по min(vw, vh) и держим строгий центр. */
@media screen and (orientation: landscape) and (max-height: 560px) {
	.vsa-fs-hero-title {
		font-size: clamp(28px, 7.5vh, 46px);
		max-width: 92vw;
	}
	.vsa-fs-hero-desc {
		font-size: max(13px, min(1.5vw, 2.4vh));
		line-height: 1.4;
		margin-top: 10px;
		max-width: 86vw;
	}
	.vsa-fs-hero-year { margin-top: 10px; font-size: max(11px, 1.9vh); }
	/* кнопки: сжимаем и прижимаем к низу — не конкурируют с текстом за центр.
	   position:relative (тема) → absolute, иначе bottom/left игнорируются */
	.vsa-fs-hero-btns {
		position: absolute !important;
		bottom: 14px;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0;
	}
	.vsa-fs-hero-btns > div { padding: 6px 8px; }
	.vsa-fs-hero-btns .vsa_tr_pill {
		padding: 6px 16px;
		min-height: 34px;
		font-size: 13px;
		line-height: 16px;
	}
	.vsa-fs-hero-btns .vsa_btns_wrapp { flex-direction: row; }
	.vsa-fs-hero-btns .vsa_btns_wrapp > div { padding: 0 6px; }
}