/* ==================================================
   1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
================================================== */

:root {
	/* Высота главного баннера: по умолчанию весь экран */
	/* Высота баннера по умолчанию — весь экран */
	--hero-height: 50vh;

	/* Минимальная высота на случай небольшого экрана */
	--hero-min-height: 0px;

	/* Высота баннера на планшетах */
	--hero-height-tablet: 100svh;

	/* Высота баннера на мобильных */
	--hero-height-mobile: 100svh;

	--odd-start: #ffffff;
	--odd-end: #f5f5f5;
	--odd-angle: 90deg;

	--even-start: #292a2e;
	--even-end: #111216;
	--even-angle: 90deg;

	--odd-text: #202124;
	--even-text: #f5f5f5;

	--content-width: 1200px;
	--section-padding: clamp(64px, 8vw, 120px);

	/* Высота волны */
	--wave-amplitude: clamp(30px, 5vw, 60px);

	/* Перекрытие слоёв маски для устранения шва */
	--wave-mask-overlap: 2px;

	/* Затемнение баннера */
	--hero-overlay-top: rgb(0 0 0 / 25%);
	--hero-overlay-bottom: rgb(0 0 0 / 55%);

	/* Скролбар */
	--scrollbar-track: #171719;
	--scrollbar-thumb: #77736c;
	--scrollbar-thumb-hover: #c7b69a;
	--scroll-offset: 24px;
}


/* ==================================================
   2. СБРОС И БАЗОВЫЕ СТИЛИ
================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 20px;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--odd-text);
	background: var(--odd-start);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
video,
svg {
	max-width: 100%;
}

img,
video {
	display: block;
}

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
}


/* ==================================================
   3. ОБЩИЕ СТИЛИ СЕКЦИЙ
================================================== */

section {
	position: relative;
	width: 100%;
	padding: var(--section-padding) 24px;
	overflow: visible;
}

/* Нечётные секции */
section:nth-of-type(odd) {
	color: var(--odd-text);
	background-color: var(--odd-start);

	background-image: linear-gradient(var(--odd-angle),
			var(--odd-start),
			var(--odd-end));
}

/* Чётные секции */
section:nth-of-type(even) {
	color: var(--even-text);
	background-color: var(--even-start);

	background-image: linear-gradient(var(--even-angle),
			var(--even-start),
			var(--even-end));
}

/* Контейнер содержимого */
.section__inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}

/* Заголовки */
section h1,
section h2,
section h3 {
	margin-top: 0;
	line-height: 1.1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

section h1 {
	font-size: clamp(2.5rem, 7vw, 6rem);
}

section h2 {
	margin-bottom: 28px;
	font-size: clamp(2rem, 4.5vw, 4rem);
}

section h3 {
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

/* Основной текст */
section p {
	max-width: 70ch;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
}

section p:last-child {
	margin-bottom: 0;
}


/* ==================================================
   4. ПЕРВЫЙ ЭКРАН — БАННЕР С ПАРАЛЛАКСОМ
================================================== */

section:first-of-type {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: grid;
	place-items: center;

	height: var(--hero-height);
	min-height: var(--hero-min-height);

	padding: 32px 24px;

	color: #ffffff;
	text-align: center;

	background-color: #171719;
	background-image: none;
}


/* ========================================
   RESPONSIVE HERO HEIGHT
======================================== */

/* Планшеты */
@media (min-width: 701px) and (max-width: 1100px) {
	.hero {
		height: var(--hero-height-tablet);
	}
}

/* Мобильные устройства */
@media (max-width: 700px) {
	.hero {
		height: var(--hero-height-mobile);
	}
}

/* Фоновое изображение — дальний план */
.hero__picture {
	position: absolute;
	z-index: 0;
	inset: -30% -5%;

	display: block;
	pointer-events: none;
}

/* Изображение баннера */
.hero__background {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform:
		translate3d(0, var(--hero-bg-shift, 0px), 0) scale(1.08);

	transform-origin: center center;
	will-change: transform;
}

/* Затемнение поверх баннера */
section:first-of-type::before {
	content: "";

	position: absolute;
	z-index: 1;
	inset: 0;

	background: linear-gradient(180deg,
			var(--hero-overlay-top),
			var(--hero-overlay-bottom));

	pointer-events: none;
}

/* Контент переднего плана */
.hero__content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 1000px;

	gap: clamp(20px, 3vh, 36px);

	transform:
		translate3d(0, var(--hero-content-shift, 0px), 0) scale(var(--hero-content-scale, 1));

	transform-origin: center center;
	will-change: transform;
	margin: 0 auto;
}

/* Ссылка вокруг логотипа */
.hero__content>a:has(.hero__logo) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

/* Логотип */
.hero__logo {
	display: block;

	width: clamp(160px, 28vw, 360px);
	max-width: 80%;
	max-height: 35svh;

	object-fit: contain;
}

/* Текстовый логотип */
.hero__logo-text {
	margin: 0;
	color: #ffffff;

	font-size: clamp(3rem, 10vw, 8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.07em;
}

/* Слоган */
.hero__tagline {
	max-width: 760px;
	margin: 0;

	color: #ffffff;

	font-size: clamp(1rem, 2.2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.015em;

	text-wrap: balance;
}

/* Кнопка */
.hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 14px 28px;

	border-radius: 999px;

	text-align: center;
	text-decoration: none !important;

	transition:
		opacity 0.5s ease;
	opacity: 0.9 !important;
}

.hero__button:hover {
	opacity: 1 !important;
}

section:nth-of-type(even) .hero__button {
	background-image: linear-gradient(var(--odd-angle),
			var(--odd-start),
			var(--odd-start));
	color: var(--odd-text) !important;
}

section:nth-of-type(odd) .hero__button {
	background-image: linear-gradient(var(--even-angle),
			var(--even-start),
			var(--even-start));
	color: var(--even-text) !important;
}


/* ==================================================
   5. ОТСТУПЫ ПЕРЕД ВОЛНАМИ
================================================== */

/*
   Оставляем место под волну в нижней части секции.
   Это не позволяет контенту приблизиться к границе.
*/

section:nth-of-type(n + 2):not(:last-of-type) {
	padding-bottom:
		calc(var(--section-padding) + var(--wave-amplitude));
}


/* ==================================================
   6. ВОЛНЫ — ИСПРАВЛЕННЫЙ СТЫК МАСКИ
================================================== */

/*
   Секции начиная с третьей получают волнистую
   верхнюю границу.

   Градиент остаётся фоном самой секции.
   SVG используется только как маска.

   Исправление горизонтального шва:
   прямоугольный слой маски перекрывает нижний край
   SVG-маски на 2 px.
*/

section:nth-of-type(n + 3) {
	/* Сдвигаем секцию под предыдущую */
	margin-top: calc(0px - var(--wave-amplitude));

	/* Компенсируем сдвиг для положения контента */
	padding-top:
		calc(var(--section-padding) + var(--wave-amplitude));

	/* Первый слой — основная часть секции.
       Второй — волнистая верхняя граница. */

	-webkit-mask-image:
		linear-gradient(#ffffff 0 0),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 498 60' preserveAspectRatio='none'%3E%3Cpath d='M498 29C349 -71 149 129 0 29V60H498V29Z' fill='%23ffffff'/%3E%3C/svg%3E");

	mask-image:
		linear-gradient(#ffffff 0 0),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 498 60' preserveAspectRatio='none'%3E%3Cpath d='M498 29C349 -71 149 129 0 29V60H498V29Z' fill='%23ffffff'/%3E%3C/svg%3E");

	/*
       ВАЖНО:
       первый слой увеличен по высоте на 2 px.
       Благодаря этому между слоями нет тонкой щели.
    */

	-webkit-mask-size:
		100% calc(100% - var(--wave-amplitude) + var(--wave-mask-overlap)),
		100% var(--wave-amplitude);

	mask-size:
		100% calc(100% - var(--wave-amplitude) + var(--wave-mask-overlap)),
		100% var(--wave-amplitude);

	-webkit-mask-position:
		center bottom,
		center top;

	mask-position:
		center bottom,
		center top;

	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;

	/* Объединение слоёв маски */
	-webkit-mask-composite: source-over;
	mask-composite: add;
}


/* ==================================================
   10. ПОДВАЛ
================================================== */

.site-footer {
	padding: 24px;

	color: #cccccc;
	background: #171719;

	text-align: center;
}

.site-footer p {
	max-width: none;
	margin: 0;

	font-size: 0.875rem;
}


/* ==================================================
   11. АДАПТИВНОСТЬ — ПЛАНШЕТЫ
================================================== */

@media (max-width: 1100px) {
	.hero__logo {
		width: clamp(150px, 35vw, 300px);
		max-height: 30svh;
	}
}

@media (max-width: 768px) {
	:root {
		--section-padding: 64px;
	}

	section {
		padding-inline: 20px;
	}

	section:first-of-type {
		padding-inline: 20px;
	}

	.hero__content {
		gap: 24px;
	}

	.services__grid,
	.portfolio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ==================================================
   12. АДАПТИВНОСТЬ — СМАРТФОНЫ
================================================== */

@media (max-width: 700px) {
	.hero {
		padding-inline: 16px;
	}

	.hero__logo {
		width: clamp(140px, 55vw, 240px);
		max-width: 80%;
		max-height: 25svh;
	}

	.hero__tagline {
		max-width: 320px;
	}

	.hero__button {
		width: 100%;
		max-width: 320px;
	}
}

@media (max-width: 480px) {
	:root {
		--section-padding: 48px;
	}

	section {
		padding-inline: 16px;
	}

	section:first-of-type {
		padding-inline: 16px;
	}

	.services__grid,
	.portfolio__grid {
		grid-template-columns: 1fr;
	}

	.portfolio__grid {
		gap: 16px;
	}
}


/* ==================================================
   13. ДОСТУПНОСТЬ
================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================
   14. PREMIUM SCROLL
========================================== */

/* Плавная прокрутка к якорям */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--scroll-offset);

	/* Firefox и современные браузеры */
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

html::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 999px;
	border: 1px solid var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

/* Убираем стрелки скроллбара */
html::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

/* Учитываем настройки доступности */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ========================================
   CINEMATIC REVEAL
======================================== */

:root {
	--reveal-distance: 32px;
	--reveal-duration: 1s;
	--reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Начальное состояние */
.reveal {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--reveal-easing),
		transform var(--reveal-duration) var(--reveal-easing);
	will-change: opacity, transform;
}

/* Элемент появился в области просмотра */
.reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Последовательное появление элементов */
.reveal-delay-1 {
	transition-delay: 100ms;
}

.reveal-delay-2 {
	transition-delay: 200ms;
}

.reveal-delay-3 {
	transition-delay: 300ms;
}

.reveal-delay-4 {
	transition-delay: 400ms;
}

/* Для пользователей, отключивших анимацию */
@media (prefers-reduced-motion: reduce) {

	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}