/* Эффекты оформления: заставка с логотипом, переходы между страницами,
   появление блоков при прокрутке, объёмные заголовки.
   Всё здесь и в effekty.js, чтобы при необходимости снять одним махом.
   Классы на <html> ставит маленький скрипт в <head> (header.twig):
     bt-zastavka       - первый заход за сессию, показать заставку;
     bt-zastavka-ukhod - страница догрузилась, заставка гаснет;
     bt-bez-vt         - браузер не умеет переходы между страницами (View Transitions). */

/* ---------- Заставка ---------- */

.bt-zastavka-ekran
{
	display: none;
}
html.bt-zastavka .bt-zastavka-ekran
{
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	/* Чёрный с небольшим светлым пятном под эмблемой - на чистом чёрном
	   тень не видна. Пятно маленькое, а сверху почти незаметное зерно:
	   на широком плавном переходе тёмных тонов иначе видны кольца-ступеньки. */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E"),
		radial-gradient(ellipse 300px 190px at 50% 54%, #1d1d1d 0%, #0d0d0d 55%, #000 100%);
	transition: opacity .5s ease, visibility .5s;
}
html.bt-zastavka-ukhod .bt-zastavka-ekran
{
	opacity: 0;
	visibility: hidden;
}
/* Эмблема (буква-летучая мышь из логотипа) - маленькая и белая, как знак
   на заставке shiftech.eu, но объёмная: двадцать копий контура по
   глубине, лицо и оборот белые, торец светлый. Под ней тень на «полу»,
   которая сужается, когда эмблема встаёт ребром. Контур взят из
   logo.svg и встроен в шапку - отдельного запроса нет. */
.bt-zastavka-defs
{
	position: absolute;
}
.bt-zastavka-scena
{
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 700px;
}
.bt-zastavka-logo
{
	position: relative;
	width: min(26vw, 104px);
	aspect-ratio: 49.43 / 30.72;
	transform-style: preserve-3d;
	will-change: transform;
	animation: bt-vrashchenie 2.4s linear infinite;
}
/* svg строчными: для SVG-элементов регистр в селекторе важен, Firefox и
   Safari заглавное SVG не находят (Chrome прощает). */
.bt-zastavka-logo svg
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bt-zastavka-logo svg:nth-child(1) { transform: translateZ(0); fill: url(#bt-em-lico); }
.bt-zastavka-logo svg:nth-child(2) { transform: translateZ(-0.45px); fill: #ececec; }
.bt-zastavka-logo svg:nth-child(3) { transform: translateZ(-0.9px); fill: #e9e9e9; }
.bt-zastavka-logo svg:nth-child(4) { transform: translateZ(-1.35px); fill: #e5e5e5; }
.bt-zastavka-logo svg:nth-child(5) { transform: translateZ(-1.8px); fill: #e2e2e2; }
.bt-zastavka-logo svg:nth-child(6) { transform: translateZ(-2.25px); fill: #dedede; }
.bt-zastavka-logo svg:nth-child(7) { transform: translateZ(-2.7px); fill: #dbdbdb; }
.bt-zastavka-logo svg:nth-child(8) { transform: translateZ(-3.15px); fill: #d8d8d8; }
.bt-zastavka-logo svg:nth-child(9) { transform: translateZ(-3.6px); fill: #d4d4d4; }
.bt-zastavka-logo svg:nth-child(10) { transform: translateZ(-4.05px); fill: #d1d1d1; }
.bt-zastavka-logo svg:nth-child(11) { transform: translateZ(-4.5px); fill: #cdcdcd; }
.bt-zastavka-logo svg:nth-child(12) { transform: translateZ(-4.95px); fill: #cacaca; }
.bt-zastavka-logo svg:nth-child(13) { transform: translateZ(-5.4px); fill: #c7c7c7; }
.bt-zastavka-logo svg:nth-child(14) { transform: translateZ(-5.85px); fill: #c3c3c3; }
.bt-zastavka-logo svg:nth-child(15) { transform: translateZ(-6.3px); fill: #c0c0c0; }
.bt-zastavka-logo svg:nth-child(16) { transform: translateZ(-6.75px); fill: #bcbcbc; }
.bt-zastavka-logo svg:nth-child(17) { transform: translateZ(-7.2px); fill: #b9b9b9; }
.bt-zastavka-logo svg:nth-child(18) { transform: translateZ(-7.65px); fill: #b6b6b6; }
.bt-zastavka-logo svg:nth-child(19) { transform: translateZ(-8.1px); fill: #b2b2b2; }
.bt-zastavka-logo svg:nth-child(20) { transform: translateZ(-8.55px) rotateY(180deg); fill: url(#bt-em-lico); }
.bt-zastavka-ten
{
	width: min(24vw, 96px);
	height: 14px;
	margin-top: 22px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .95), rgba(0, 0, 0, .6) 55%, transparent);
	animation: bt-ten 1.2s ease-in-out infinite;
}
@keyframes bt-vrashchenie
{
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}
/* Эмблема встаёт ребром дважды за оборот - тень сужается в такт. */
@keyframes bt-ten
{
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50%      { transform: scaleX(.3); opacity: .55; }
}

/* ---------- Переходы между страницами ---------- */

/* Chrome/Edge 126+, Safari 18.2+: браузер сам снимает старую страницу и
   плавно подменяет новой, без JavaScript и без задержки перехода.
   Шапка вынесена в свою группу - она не мигает, меняется только содержимое. */
@view-transition
{
	navigation: auto;
}
/* view-transition-name делает шапку отдельным слоем, и её подменю
   (z-index: 50) уже не выходит выше страницы: его перекрывали заголовок
   баннера и блок подбора машины. Поэтому слой шапки поднят целиком -
   как у прокрученной .header.scroll в style.css. */
.header
{
	view-transition-name: bt-shapka;
	z-index: 100;
}
::view-transition-old(root)
{
	animation: bt-ukhod .22s cubic-bezier(.55, .055, .675, .19) both;
}
::view-transition-new(root)
{
	animation: bt-prikhod .38s cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes bt-ukhod
{
	to { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
}
@keyframes bt-prikhod
{
	from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
}
/* Откат для Firefox и старого Safari: содержимое мягко проявляется после
   загрузки. Не с нуля прозрачности - иначе браузер позже засчитает
   отрисовку главного блока (LCP). */
/* Только backwards: с both анимация остаётся в силе после окончания,
   и содержимое становится отдельным слоем поверх шапки (у неё
   position: absolute без z-index) - в Firefox переставали работать
   выпадающее меню и бургер. */
html.bt-bez-vt .body-wrap
{
	animation: bt-prikhod-myagko .45s cubic-bezier(.215, .61, .355, 1) backwards;
}
@keyframes bt-prikhod-myagko
{
	from { opacity: .35; transform: translateY(10px); }
}

/* ---------- Появление блоков при прокрутке ---------- */

/* Класс получают только блоки ниже первого экрана (effekty.js), поэтому то,
   что видно сразу, никогда не прячется. После проявления класс снимается,
   чтобы не мешать собственным transform блоков (наведение на карточку). */
.bt-poyavlenie
{
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.215, .61, .355, 1), transform .7s cubic-bezier(.215, .61, .355, 1);
}
.bt-poyavlenie.bt-vidno
{
	opacity: 1;
	transform: none;
}

/* ---------- Объёмные заголовки ---------- */

/* Тени у заголовков убраны по просьбе клиентки (30.10): рябило. */
.first-text H1
{
	animation: bt-zagolovok 1s cubic-bezier(.215, .61, .355, 1) both;
}
.catalog-body > H1
{
	font-family: 'Bank Gothic(RUS BY LYAJKA)', sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
	/* Высота строки в пикселях: Bank Gothic догружается позже основного
	   шрифта, и при относительной высоте строка прыгала (сдвиг карточек). */
	line-height: 38px;
	color: #111;
	animation: bt-zagolovok .8s cubic-bezier(.215, .61, .355, 1) both;
}
/* Заголовок «встаёт» из наклона. Прозрачность не трогаем - см. LCP выше.
   В наклоне ближний край шире на ~5 %, на телефоне это давало горизонтальную
   прокрутку в 1 px - поэтому начальный кадр чуть уменьшен. */
@keyframes bt-zagolovok
{
	from { transform: perspective(700px) rotateX(40deg) translateY(12px) scale(.94); }
}

/* ---------- Скругления ---------- */

/* Просьба клиентки «сделать такие штуки овальными»: кнопки - капсулой,
   поля ввода и блоки - со скруглёнными углами. */
.btn,
.btn-form
{
	border-radius: 999px;
}
.form-control,
.form-input,
TEXTAREA,
.header-serach INPUT,
.select2-container .select2-selection--single
{
	border-radius: 12px;
}
.select2-dropdown
{
	border-radius: 12px;
	overflow: hidden;
}
/* Открытый список прилегает к полю - общие углы не скругляем. */
.select2-container--open.select2-container--below .select2-selection--single
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.select2-container--open.select2-container--above .select2-selection--single
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.select2-dropdown--below
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.select2-dropdown--above
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.contact-card,
.vehicle-selector-box,
.cookies,
.ocf-option-name
{
	border-radius: 16px;
}
.header-submenu
{
	border-radius: 0 0 14px 14px;
}
.fake_select-action,
.pagination A,
.pagination SPAN,
.custom_alert
{
	border-radius: 8px;
}

/* ---------- Кто просил меньше движения ---------- */

@media (prefers-reduced-motion: reduce)
{
	@view-transition
	{
		navigation: none;
	}
	html.bt-bez-vt .body-wrap,
	.first-text H1,
	.catalog-body > H1
	{
		animation: none;
	}
	.bt-poyavlenie
	{
		opacity: 1;
		transform: none;
		transition: none;
	}
}