:root {
	--spring-easing: cubic-bezier(0.34, 1, 0.55, 1);
	--base-duration: 1.2s;      /* Базовая длительность 1.2с */
	--delay-step: 0.1s;          /* Задержка 0.1с между элементами */
	--offset-y: 120px;           /* Смещение 120px */
	--wave-duration: 0.8s;       /* Волна 0.8с */
}

@keyframes titleShow {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes riseUp {
	0% { transform: translateY(var(--offset-y)); }
	100% { transform: translateY(0); }
}

@keyframes revealLeftToRight {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

@keyframes slideInLeft {
	0% { opacity: 0; transform: translateX(40px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
	0% { opacity: 0; transform: translateX(-40px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes gentleFloat {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes btnUp {
	0% {
		transform: translateY(230px) rotate(90deg);
	}
	100% {
		transform: translateY(0) rotate(90deg);
	}
}

/* ===== Анимации для всех заголовков ===== */
/* Исходное состояние для всех заголовков */
.subbrand-supreme__title--main,
.subbrand-supreme__title--develop,
.subbrand-supreme__title--components,
.subbrand-supreme__title--environment {
	opacity: 0;
}
/* Анимация для всех заголовков */
.subbrand-supreme__title--main.animate-title,
.subbrand-supreme__title--develop.animate-title,
.subbrand-supreme__title--components.animate-title,
.subbrand-supreme__title--environment.animate-title {
	animation-name: titleShow;
	animation-duration: var(--base-duration);
	animation-timing-function: var(--spring-easing, cubic-bezier(0.34, 1.2, 0.55, 1));
	animation-fill-mode: forwards;
	animation-delay: var(--delay-step);
}

/* ===== Секция верхняя/Главный блок ===== */
.subbrand-supreme__product-frame,
.subbrand-supreme__label,
.subbrand-supreme__btn--main {
	transform: translateY(var(--offset-y));
}
/* Банка - задержка 0.1s */
.subbrand-supreme__product-frame.animate-rise {
	animation: riseUp var(--base-duration) var(--spring-easing) forwards;
	animation-delay: var(--delay-step);
}
/* Лейбл - задержка 0.2s */
.subbrand-supreme__label.animate-rise {
	animation: riseUp var(--base-duration) var(--spring-easing) forwards;
	animation-delay: calc(var(--delay-step) * 2);
}
/* Кнопка - задержка 0.3s */
.subbrand-supreme__btn--main.animate-rise {
	animation: riseUp var(--base-duration) var(--spring-easing) forwards;
	animation-delay: calc(var(--delay-step) * 3);
}
/* Волна - 0.8s, задержка 0.05s (чуть раньше банки) */
.subbrand-supreme__header-wave.animate-wave::before {
	animation: revealLeftToRight var(--wave-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;
}

/* ===== Секция с большим шаром ===== */
/* Исходное состояние для шара */
.subbrand-supreme__benefit-frame {
	transform: translateY(var(--offset-y));
}
/* Анимация шара — задержка 0.5 секунд */
.subbrand-supreme__benefit-frame.animate-ball {
	animation: riseUp 0.5s var(--spring-easing) forwards;
	animation-delay: 0.5s;
}
/* Бесконечное покачивание шара после появления */
.subbrand-supreme__benefit-frame.animate-ball .subbrand-supreme__ball-wrapper {
	animation: gentleFloat 4s ease-in-out 0.1s infinite;
}
/* Исходное состояние для пунктов списка */
.subbrand-supreme__benefit-item {
	opacity: 0;
}
/* Левые пункты (1,2) — сдвиг вправо */
.subbrand-supreme__benefit-item:nth-child(1),
.subbrand-supreme__benefit-item:nth-child(2) {
	transform: translateX(40px);
}
/* Правые пункты (3,4,5) — сдвиг влево */
.subbrand-supreme__benefit-item:nth-child(3),
.subbrand-supreme__benefit-item:nth-child(4),
.subbrand-supreme__benefit-item:nth-child(5) {
	transform: translateX(-40px);
}
/* Анимация для левых пунктов — задержка 0.5 секунд */
.subbrand-supreme__benefit-item:nth-child(1).animate-item,
.subbrand-supreme__benefit-item:nth-child(2).animate-item {
	animation: slideInLeft 0.5s var(--spring-easing) forwards;
	animation-delay: 0.5s;
}
/* Анимация для правых пунктов — задержка 0.5 секунд */
.subbrand-supreme__benefit-item:nth-child(3).animate-item,
.subbrand-supreme__benefit-item:nth-child(4).animate-item,
.subbrand-supreme__benefit-item:nth-child(5).animate-item {
	animation: slideInRight 0.5s var(--spring-easing) forwards;
	animation-delay: 0.5s;
}
/* Анимация волны */
.subbrand-supreme__benefit.animate-wave::before {
	animation: revealLeftToRight var(--wave-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;  /* Чуть позже появления шара */
}
@media screen and (max-width: 1023px) {
	/* Сбрасываем исходные трансформации */
	.subbrand-supreme__benefit-item {
		opacity: 0;
		transform: translateX(0px) !important; /* Все пункты выезжают слева */
	}
	/* Все пункты используют анимацию slideInLeft */
	.subbrand-supreme__benefit-item.animate-item {
		animation: slideInLeft 0.5s var(--spring-easing) forwards !important;
	}
	/* Поочередное появление */
	.subbrand-supreme__benefit-item.animate-item:nth-child(1) { animation-delay: 0.5s !important; }
	.subbrand-supreme__benefit-item.animate-item:nth-child(2) { animation-delay: 0.55s !important; }
	.subbrand-supreme__benefit-item.animate-item:nth-child(3) { animation-delay: 0.60s !important; }
	.subbrand-supreme__benefit-item.animate-item:nth-child(4) { animation-delay: 0.65s !important; }
	.subbrand-supreme__benefit-item.animate-item:nth-child(5) { animation-delay: 0.70s !important; }
}

/* ===== Волна для секции potential ===== */
/* Анимация волны */
.subbrand-supreme__potential.animate-wave::after {
	animation: revealLeftToRight var(--wave-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;
}

/* ===== Секция компонентов ===== */
/* Исходное состояние для элементов компонентов */
.subbrand-supreme__element {
	transform: translateY(var(--offset-y));
}
/* Анимация подъема для элементов компонентов */
.subbrand-supreme__element.animate-element {
	animation: riseUp var(--base-duration) var(--spring-easing) forwards;
}
/* Пошаговое появление с задержкой */
.subbrand-supreme__element.animate-element:nth-child(1) { animation-delay: 0.1s; }
.subbrand-supreme__element.animate-element:nth-child(2) { animation-delay: 0.15s; }
.subbrand-supreme__element.animate-element:nth-child(3) { animation-delay: 0.2s; }
.subbrand-supreme__element.animate-element:nth-child(4) { animation-delay: 0.25s; }
.subbrand-supreme__element.animate-element:nth-child(5) { animation-delay: 0.3s; }

/* Хаотичное покачивание обертки */
.subbrand-supreme__element-wrap {
	animation: gentleFloat 3s ease-in-out infinite;
}
/* Индивидуальные задержки для хаотичности — плавно и медленно */
.subbrand-supreme__element:nth-child(1) .subbrand-supreme__element-wrap {
	animation-delay: 0s;
	animation-duration: 4s;
}
.subbrand-supreme__element:nth-child(2) .subbrand-supreme__element-wrap {
	animation-delay: 0.6s;
	animation-duration: 5s;
}
.subbrand-supreme__element:nth-child(3) .subbrand-supreme__element-wrap {
	animation-delay: 1.2s;
	animation-duration: 4.5s;
}
.subbrand-supreme__element:nth-child(4) .subbrand-supreme__element-wrap {
	animation-delay: 0.3s;
	animation-duration: 5.5s;
}
.subbrand-supreme__element:nth-child(5) .subbrand-supreme__element-wrap {
	animation-delay: 0.9s;
	animation-duration: 3.8s;
}
/* Фоновая картинка (bg-component) */
.subbrand-supreme__elements::after {
	transform: translateY(var(--offset-y));
}
/* Анимация для фоновой картинки */
.subbrand-supreme__elements.animate-bg::after {
	animation: riseUp var(--base-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;
}
/* Анимация волны */
.subbrand-supreme__components.animate-wave::after {
	animation: revealLeftToRight var(--wave-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;
}
@media screen and (max-width: 1023px) {
	.subbrand-supreme__element,
	.subbrand-supreme__element-wrap,
	.subbrand-supreme__element.animate-element .subbrand-supreme__element-wrap {
		animation: none !important;
		transform: translateY(0) !important;
	}
}

/* ===== Секция environment (слайдер) ===== */
/* Покачивание картинок слайдера */
.supreme-environment-slider--img .supreme-environment-slider__item-img {
	animation: gentleFloat 3s ease-in-out infinite;
}
/* Анимация волны */
.subbrand-supreme__environment.animate-wave::after {
	animation: revealLeftToRight var(--wave-duration) var(--spring-easing) forwards;
	animation-delay: 0.05s;
}
/* Адаптив для мобил - отключаем покачивание */
@media screen and (max-width: 767px) {
	.supreme-environment-slider--img .supreme-environment-slider__item-img {
		animation: none !important;
	}
}

/* ===== Кнопка к продуктовому блоку ===== */
.back-to-products-btn {
	position: fixed;
	right: 20px;
	bottom: 160px;
	z-index: 10;
	width: 52px;
	height: 52px;
	background: #fff;
	border: none;
	border-radius: 100%;
	cursor: pointer;
	box-shadow: 0 3px 7px 0 rgba(155, 124, 73, 0.1), 0 13px 13px 0 rgba(155, 124, 73, 0.09), 0 30px 18px 0 rgba(155, 124, 73, 0.05), 0 53px 21px 0 rgba(155, 124, 73, 0.01), 0 83px 23px 0 rgba(155, 124, 73, 0);
	transition: all 0.3s ease;
	background-image: url('/new/static/brands/nan-supreme-3/images/arrow.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	transform: translateY(230px) rotate(90deg);
	animation: btnUp 1.2s cubic-bezier(0.34, 1, 0.55, 1) 0.3s forwards;
	animation-delay: 0.1s;
}
.back-to-products-btn:hover {
	background-color: #fafaf8;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
	.back-to-products-btn {
		display: none !important;
	}
}