/**
 * Геро-блок. Макет: Figma 60:1363 (desktop 1441).
 *
 * Координаты макета (канвас 1440, контент 1280):
 *   лента кружков  8 колонок по 145.85, gap 19; кружок 108, подпись на y=123
 *   отступ до карточки 34
 *   карточка       1280x514, радиус 25, градиент #232233 -> #322a4f
 *   текст          слева 60, сверху 84, ширина 590, gap 26
 *   заголовок      Benzin SemiBold 36, белый
 *   описание       Gilroy Medium 16, ширина 520
 *   кнопки         ряд 501, gap 12, каждая h=48, радиус 10, шрифт 12
 *   полосы         слева 60, снизу (y=470), 3 x 80x4, gap 14
 *   визуал         776x517, поворот -14.67deg, слева 509, сверху -69
 */

.sm-hero {
	padding-top: 18px;
}

/* --- лента быстрых переходов --- */

.sm-shortcuts {
	display: flex;
	gap: 19px;
	align-items: flex-start;
	justify-content: space-between;
}

.sm-shortcuts__item {
	flex: 1 1 0;
	min-width: 0;
}

.sm-shortcuts__link {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	text-align: center;
}

.sm-shortcuts__circle {
	display: block;
	width: 108px;
	height: 108px;
	padding: 4px;
	/* Обводка по контуру скруглённого квадрата — лёгкий жёлтый градиент. */
	background: linear-gradient(180deg, #ffec9e 0%, #f5d54a 100%);
	border-radius: 18px;
	transition: transform 0.2s ease;
}

.sm-shortcuts__link:hover .sm-shortcuts__circle {
	transform: translateY(-4px);
}

/*
 * Отдельный слой обрезки: исходники из Figma — круглые вырезы
 * с прозрачными углами, поэтому картинку увеличиваем, а лишнее режем здесь.
 * Обрезать в самой плашке нельзя — съело бы обводку.
 */
.sm-shortcuts__crop {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
}

.sm-shortcuts__crop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.62);
}

.sm-shortcuts__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sm-ink);
}

/* --- карточка --- */

.sm-hero__card {
	position: relative;
	min-height: 514px;
	margin-top: 34px;
	overflow: hidden;
	background: linear-gradient(180deg, #232233 0%, #322a4f 100%);
	border-radius: 25px;
}

/*
 * Замыленное фото под фирменным градиентом: полупрозрачный градиент лежит
 * поверх снимка в одном слое, blur размывает их вместе. inset с запасом,
 * чтобы прозрачная кромка блюра не вылезала по краям карточки.
 */
.sm-hero__card::before {
	content: '';
	position: absolute;
	inset: -40px;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(35, 34, 51, 0.82) 0%, rgba(50, 42, 79, 0.86) 100%),
		url('../../img/hero/bg-photo.webp') center / cover no-repeat;
	filter: blur(8px);
}

.sm-hero__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

/*
 * Уходящий кадр остаётся непрозрачным под новым, иначе в середине
 * перехода сквозь оба просвечивает фон карточки.
 */
.sm-hero__slide.is-prev {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: none;
}

.sm-hero__slide.is-active {
	position: relative;
	z-index: 2;
	opacity: 1;
	visibility: visible;
}

.sm-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: flex-start;
	/* 590 — это ширина текста в макете, отступ слева задаём полем, а не паддингом. */
	width: 590px;
	max-width: calc(100% - 60px);
	margin: 84px 0 0 60px;
}

.sm-hero__title {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sm-white);
}

.sm-hero__text {
	max-width: 520px;
	font-family: var(--sm-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sm-white);
}

.sm-hero__actions {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 501px;
	max-width: 100%;
}

.sm-hero__btn {
	flex: 1 0 0;
	min-width: 0;
	min-height: 48px;
	font-size: 12px;
	white-space: nowrap;
}

/* --- визуал --- */

/*
 * Визуал. В макете снимок стоит под углом -14.67deg.
 * Добавлено лёгкое объёмное покачивание: наклон по двум осям с перспективой —
 * без фальшивой геометрии, работает на любом снимке из CMS.
 */
.sm-hero__visual {
	position: absolute;
	top: -69px;
	left: 509px;
	z-index: 1;
	width: 776px;
	height: 517px;
	pointer-events: none;
}

/* Пока WebGL не поднялся — виден снимок из макета. */
.sm-hero__fallback {
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: sm-visual-float 7s ease-in-out infinite;
}

.sm-hero__visual.is-live .sm-hero__fallback {
	display: none;
}

.sm-hero__visual canvas {
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes sm-visual-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-14px);
	}
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
	.sm-hero__visual {
		animation: none;
		transform: none;
	}
}

.sm-hero__deco {
	position: absolute;
	top: 358px;
	right: 17px;
	z-index: 1;
	width: 269px;
	pointer-events: none;
}

.sm-hero__deco svg {
	width: 100%;
	height: auto;
}

/* --- индикаторы --- */

.sm-hero__dots {
	position: absolute;
	bottom: 40px;
	left: 60px;
	z-index: 3;
	display: flex;
	gap: 14px;
}

.sm-hero__dot {
	width: 80px;
	height: 4px;
	padding: 0;
	background: rgba(255, 255, 255, 0.33);
	transition: background-color 0.2s ease;
}

.sm-hero__dot.is-active {
	background: var(--sm-white);
}

@media (max-width: 1200px) {
	.sm-hero__visual {
		left: 55%;
		width: 620px;
		height: 420px;
	}


	.sm-hero__deco {
		display: none;
	}


	.sm-hero__body {
		width: 55%;
		margin-left: 40px;
		max-width: calc(100% - 40px);
	}
}