/* LS Base — анимации. Скрытые состояния действуют только при html.js; prefers-reduced-motion всё отключает. */

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

.js :is(.is-style-reveal, .ls-reveal) {
	transition: opacity .8s var(--ls-ease), transform 1s var(--ls-spring-soft);
	transition-delay: calc(var(--ls-delay, 0) * 1ms);
}

.js :is(.is-style-reveal, .ls-reveal):not(.is-visible) {
	opacity: 0;
	transform: translateY(32px) scale(.985);
}

.js .is-style-reveal-stagger > * {
	transition: opacity .7s var(--ls-ease), transform .9s var(--ls-spring-soft);
	transition-delay: calc(var(--ls-i, 0) * 90ms + 60ms);
}

.js .is-style-reveal-stagger:not(.is-visible) > * {
	opacity: 0;
	transform: translateY(26px);
}

/* Карточки внутри уже видимой группы: подъём при hover не должен ждать задержку появления */
.js .is-style-reveal-stagger.is-visible > .ls-card:hover {
	transition-delay: 0s;
}

/* ---------- Первый экран: появление при загрузке ---------- */

.js .ls-hero-intro > * {
	animation: ls-rise .9s var(--ls-ease) both;
	animation-delay: calc(var(--ls-i, 0) * 110ms + 80ms);
}

.js .ls-hero__art {
	animation: ls-zoom-in 1.1s var(--ls-spring-soft) .25s both;
}

@keyframes ls-rise {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes ls-zoom-in {
	from { opacity: 0; transform: translateY(18px) scale(.94); }
	to { opacity: 1; transform: none; }
}

/* Подчёркивание выделенного слова в заголовке (em) */
.ls-hero h1 em::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -3%;
	right: -3%;
	bottom: .04em;
	height: .3em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ls-secondary) 45%, transparent);
	transform: scaleX(0);
	transform-origin: left;
	animation: ls-underline .9s var(--ls-ease) .75s forwards;
}

.no-js .ls-hero h1 em::after,
html:not(.js) .ls-hero h1 em::after {
	transform: scaleX(1);
}

@keyframes ls-underline {
	to { transform: scaleX(1); }
}

/* ---------- Заголовок по словам (.ls-split) ---------- */

.ls-split .ls-word {
	display: inline-block;
	overflow: clip;
	overflow-clip-margin: .2em;
	vertical-align: top;
	padding-bottom: .06em;
	margin-bottom: -.06em;
}

.ls-split .ls-word__in {
	display: inline-block;
	animation: ls-word-up 1s var(--ls-ease) both;
	animation-delay: calc(var(--ls-w, 0) * 70ms + 120ms);
	animation-play-state: paused;
}

.ls-split.is-visible .ls-word__in {
	animation-play-state: running;
}

@keyframes ls-word-up {
	from { transform: translateY(110%) rotate(4deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/* ---------- Бегущая строка ---------- */

.ls-marquee {
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ls-marquee > * {
	margin: 0 !important;
}

.ls-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0;
	min-width: 100%;
	animation: ls-marquee var(--ls-marquee-speed, 32s) linear infinite;
}

.ls-marquee:hover .ls-marquee__track {
	animation-play-state: paused;
}

@keyframes ls-marquee {
	to { transform: translateX(-100%); }
}

/* ---------- Подсветка за курсором (.ls-spot) ---------- */

.ls-spot {
	--ls-mx: 50%;
	--ls-my: -200px;
}

.ls-spot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--ls-mx) var(--ls-my), color-mix(in srgb, var(--ls-primary) 12%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity .35s ease;
}

.ls-spot:hover::before { opacity: 1; }

.ls-spot > * { position: relative; z-index: 1; }

/* ---------- Линия шагов прорисовывается при прокрутке ---------- */

@media (min-width: 900px) {
	.ls-steps::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 27px;
		left: 28px;
		right: 18%;
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--ls-primary) 0 10px, transparent 10px 18px);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 1.4s var(--ls-ease) .25s;
	}

	.ls-steps.is-visible::before,
	html:not(.js) .ls-steps::before {
		transform: scaleX(1);
	}
}

/* ---------- SVG-сцены: цвета из палитры бренда ---------- */

.ls-scene {
	position: relative;
	width: 100%;
}

.ls-scene svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ls-scene .f-p { fill: var(--ls-primary); }
.ls-scene .f-ps { fill: var(--ls-primary-soft); }
.ls-scene .f-s { fill: var(--ls-secondary); }
.ls-scene .f-w { fill: #fff; }
.ls-scene .f-t { fill: var(--ls-text); }
.ls-scene .f-m { fill: var(--ls-muted); }
.ls-scene .f-b { fill: var(--ls-border); }
.ls-scene .f-base { fill: var(--ls-base); }
.ls-scene .f-a { fill: var(--ls-accent); }
.ls-scene .f-ok { fill: #16a34a; }
.ls-scene .f-amber { fill: #f5b83d; }
.ls-scene .f-none { fill: none; }
.ls-scene .s-p { stroke: var(--ls-primary); }
.ls-scene .s-s { stroke: var(--ls-secondary); }
.ls-scene .s-w { stroke: #fff; }
.ls-scene .s-b { stroke: var(--ls-border); }
.ls-scene .s-t { stroke: var(--ls-text); }
.ls-scene .s-ok { stroke: #16a34a; }
.ls-scene .st-p { stop-color: var(--ls-primary); }
.ls-scene .st-s { stop-color: var(--ls-secondary); }
.ls-scene .st-w { stop-color: #fff; }
.ls-scene .shadow { filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .12)) drop-shadow(0 2px 4px rgba(15, 23, 42, .06)); }
.ls-scene text { font-family: Manrope, system-ui, sans-serif; }

.ls-scene .a-float { animation: ls-float 6s ease-in-out infinite; transform-box: fill-box; }
.ls-scene .a-float-2 { animation: ls-float 7.5s ease-in-out -2s infinite; transform-box: fill-box; }
.ls-scene .a-float-3 { animation: ls-float 5.2s ease-in-out -1s infinite; transform-box: fill-box; }
.ls-scene .a-bob { animation: ls-bob 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ls-scene .a-spin { animation: ls-spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.ls-scene .a-dash { stroke-dasharray: 6 8; animation: ls-dash 1.6s linear infinite; }
.ls-scene .a-pulse { animation: ls-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ls-scene .a-twinkle { animation: ls-twinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ls-scene .a-press { animation: ls-press 6s var(--ls-ease) infinite; transform-box: fill-box; transform-origin: center; }
.ls-scene .a-flip { animation: ls-flip 5s var(--ls-ease) infinite; transform-box: fill-box; transform-origin: left center; }
.ls-scene .a-grow { animation: ls-grow 6s var(--ls-ease) infinite; transform-box: fill-box; transform-origin: left center; }
.ls-scene .d-1 { animation-delay: -.8s; }
.ls-scene .d-2 { animation-delay: -1.6s; }
.ls-scene .d-3 { animation-delay: -2.4s; }

/* Статус: «обрабатывается» → «подтверждён», по кругу */
.ls-scene .a-state-wait { animation: ls-state-a 6s steps(1, end) infinite; }
.ls-scene .a-state-done { animation: ls-state-b 6s steps(1, end) infinite; }
.ls-scene .a-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ls-check 6s var(--ls-ease) infinite; }

@keyframes ls-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes ls-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(-3deg); }
}

@keyframes ls-spin {
	to { transform: rotate(360deg); }
}

@keyframes ls-dash {
	to { stroke-dashoffset: -28; }
}

@keyframes ls-pulse {
	0% { transform: scale(.85); opacity: .7; }
	80%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes ls-twinkle {
	0%, 100% { transform: scale(.6) rotate(0deg); opacity: .35; }
	50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

@keyframes ls-press {
	0%, 18%, 26%, 100% { transform: scale(1); }
	22% { transform: scale(.94); }
}

@keyframes ls-flip {
	0%, 35% { transform: scaleX(1); }
	55%, 100% { transform: scaleX(-1); }
}

@keyframes ls-grow {
	0% { transform: scaleX(.15); }
	45%, 100% { transform: scaleX(1); }
}

@keyframes ls-state-a {
	0% { opacity: 1; }
	50% { opacity: 0; }
}

@keyframes ls-state-b {
	0% { opacity: 0; }
	50% { opacity: 1; }
}

@keyframes ls-check {
	0%, 52% { stroke-dashoffset: 30; }
	68%, 100% { stroke-dashoffset: 0; }
}

/* Сцена за пределами экрана стоит на паузе (класс ставит motion.js) */
.ls-scene:not(.is-playing) * {
	animation-play-state: paused !important;
}

/* Наклон за курсором */
[data-tilt] {
	transform: perspective(1000px) rotateX(var(--ls-rx, 0deg)) rotateY(var(--ls-ry, 0deg));
	transition: transform .5s var(--ls-ease);
	will-change: transform;
}

/* ---------- Уменьшение движения ---------- */

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.js :is(.is-style-reveal, .ls-reveal):not(.is-visible),
	.js .is-style-reveal-stagger:not(.is-visible) > * {
		opacity: 1;
		transform: none;
	}

	.ls-hero h1 em::after,
	.ls-steps::before {
		transform: scaleX(1) !important;
	}

	[data-tilt] { transform: none !important; }

	.ls-marquee { -webkit-mask-image: none; mask-image: none; }
	.ls-marquee__track { flex-wrap: wrap; min-width: 0; animation: none !important; }
	.ls-marquee__track[data-cloned][aria-hidden="true"] { display: none; }
}