/**
 * LIVING LAYER — «Самодвижец / НАЕКС» (8088)
 * DNA: гидравлическое давление. Скролл = давление, курсор = поток.
 * Правила: без fade-up как дефолта; только transform/opacity/clip-path (CLS=0);
 * скрытие состояний — только под html.js-living и только при prefers-reduced-motion: no-preference.
 */

:root {
	--lv-orange: #ffb703;
	--lv-orange-soft: rgba(255, 183, 3, 0.18);
	--lv-ink: #0f172a;
	--lv-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--lv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--lv-spring: cubic-bezier(0.34, 1.56, 0.42, 1);
}

/* =========================================================================
   1. ГИДРОЛИНИЯ ПРОГРЕССА + МАНОМЕТР ДАВЛЕНИЯ СКРОЛЛА (signature visual)
   ========================================================================= */
.lv-hydroline {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 100020;
	pointer-events: none;
	background: rgba(15, 23, 42, 0.05);
}

.lv-hydroline-fill {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--lv-orange), #ffd043 60%, var(--lv-orange));
	box-shadow: 0 0 14px rgba(255, 183, 3, 0.55);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.lv-gauge {
	position: fixed;
	top: 84px;
	right: 18px;
	z-index: 100010;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 999px;
	padding: 7px 14px 7px 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 0.5s var(--lv-ease), transform 0.5s var(--lv-ease);
	pointer-events: none;
	font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
}

.lv-gauge.is-visible {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 768px) {
	.lv-gauge {
		display: none !important;
	}
}

.lv-gauge-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--lv-orange);
	box-shadow: 0 0 0 3px rgba(222, 190, 31, 0.22);
	animation: lvGaugePulse 2.2s infinite ease-in-out;
}

@keyframes lvGaugePulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(222, 190, 31, 0.22); }
	50% { box-shadow: 0 0 0 6px rgba(222, 190, 31, 0.10); }
}

.lv-gauge-bar {
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: rgba(15, 23, 42, 0.1);
	overflow: hidden;
}

.lv-gauge-bar-fill {
	width: 100%;
	height: 100%;
	background: var(--lv-orange);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.lv-gauge-val {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--lv-ink);
	letter-spacing: 0.4px;
	min-width: 58px;
	text-align: right;
}

/* =========================================================================
   2. HERO ВХОД — хореография давления (line-mask wipe + глубина на десктопе)
   ========================================================================= */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
	html.js-living .s-hero-badge {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transition: opacity 0.6s var(--lv-ease), clip-path 0.7s var(--lv-ease);
		transition-delay: 0.1s;
	}

	html.js-living .s-hero-title {
		clip-path: inset(-5% 100% -5% 0);
		transform: translateX(-14px);
		transition: clip-path 0.9s var(--lv-ease), transform 0.9s var(--lv-ease);
		transition-delay: 0.22s;
	}

	html.js-living .s-hero-lead-wrap {
		clip-path: inset(0 0 0 100%);
		transition: clip-path 0.75s var(--lv-ease);
		transition-delay: 0.5s;
	}

	html.js-living .s-hero-desc {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
		transition: opacity 0.7s var(--lv-ease), clip-path 0.8s var(--lv-ease);
		transition-delay: 0.62s;
	}

	html.js-living .s-hero-actions {
		opacity: 0;
		transform: scale(0.94);
		transform-origin: 0 50%;
		transition: opacity 0.55s var(--lv-ease), transform 0.75s var(--lv-spring);
		transition-delay: 0.78s;
	}

	html.js-living .s-hero-trust-row .s-trust-pill {
		opacity: 0;
		transform: scale(0.8);
		transition: opacity 0.4s var(--lv-ease), transform 0.6s var(--lv-spring);
		transition-delay: calc(0.9s + var(--lv-i, 0) * 0.12s);
	}

	html.js-living .s-hero-visual {
		opacity: 0;
		transform: perspective(1200px) rotateY(9deg) translateX(46px);
		transition: opacity 0.8s var(--lv-ease), transform 1.1s var(--lv-ease);
		transition-delay: 0.34s;
	}

	html.js-living .s-floating-chip {
		opacity: 0;
		transition: opacity 0.5s var(--lv-ease);
	}

	html.js-living .chip-1 { transition-delay: 1.05s; }
	html.js-living .chip-2 { transition-delay: 1.2s; }
	html.js-living .chip-3 { transition-delay: 1.35s; }

	/* Вход сыгран — состояние «в потоке» */
	html.js-living .lv-hero-in .s-hero-badge,
	html.js-living .lv-hero-in .s-hero-title,
	html.js-living .lv-hero-in .s-hero-lead-wrap,
	html.js-living .lv-hero-in .s-hero-desc,
	html.js-living .lv-hero-in .s-hero-actions,
	html.js-living .lv-hero-in .s-trust-pill {
		opacity: 1;
		clip-path: inset(-5% -5% -5% -5%);
		transform: none;
	}

	html.js-living .lv-hero-in .s-hero-visual {
		opacity: 1;
		transform: perspective(1200px) rotateY(0deg) translateX(0);
	}

	html.js-living .lv-hero-in .s-floating-chip {
		opacity: 1;
	}
}

/* На мобильных устройствах весь контент Hero отображается моментально и на 100% */
@media (max-width: 860px) {
	html.js-living .s-hero-badge,
	html.js-living .s-hero-title,
	html.js-living .s-hero-lead-wrap,
	html.js-living .s-hero-desc,
	html.js-living .s-hero-actions,
	html.js-living .s-hero-trust-row .s-trust-pill,
	html.js-living .s-hero-visual {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
		visibility: visible !important;
	}
}

/* =========================================================================
   3. ЗАГОЛОВКИ СЕКЦИЙ — line-mask wipe (не fade-up)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	html.js-living .s-section-head .s-badge-pill {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transition: opacity 0.45s var(--lv-ease), clip-path 0.6s var(--lv-ease);
	}

	html.js-living .s-section-head .s-section-title {
		clip-path: inset(-8% 100% -8% 0);
		transition: clip-path 0.8s var(--lv-ease);
		transition-delay: 0.08s;
	}

	html.js-living .s-section-head .s-section-desc {
		opacity: 0;
		clip-path: inset(-8% 0 -8% 100%);
		transition: opacity 0.5s var(--lv-ease), clip-path 0.7s var(--lv-ease);
		transition-delay: 0.18s;
	}

	html.js-living .s-section-head.lv-in .s-badge-pill,
	html.js-living .s-section-head.lv-in .s-section-desc {
		opacity: 1;
		clip-path: inset(-8% -8% -8% -8%);
	}

	html.js-living .s-section-head.lv-in .s-section-title {
		clip-path: inset(-8% -8% -8% -8%);
	}
}

/* =========================================================================
   4. REVEAL-ОБЁРТКИ КАРТОЧЕК — направленный stagger (каждая секция своя)
   ========================================================================= */
.lv-reveal {
	--lv-i: 0;
	display: flex;
}

.lv-reveal > * {
	flex: 1 1 auto;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html.js-living .lv-reveal.lv-dir-left > * {
		opacity: 0;
		transform: translateX(-34px) rotate(-1.2deg);
		transition: opacity 0.5s var(--lv-ease), transform 0.75s var(--lv-ease-out);
		transition-delay: calc(var(--lv-i) * 75ms);
	}

	html.js-living .lv-reveal.lv-dir-right > * {
		opacity: 0;
		transform: translateX(34px) rotate(1.2deg);
		transition: opacity 0.5s var(--lv-ease), transform 0.75s var(--lv-ease-out);
		transition-delay: calc(var(--lv-i) * 75ms);
	}

	html.js-living .lv-reveal.lv-pop > * {
		opacity: 0;
		transform: scale(0.9);
		transition: opacity 0.45s var(--lv-ease), transform 0.7s var(--lv-spring);
		transition-delay: calc(var(--lv-i) * 90ms);
	}

	html.js-living .lv-reveal.lv-clip > * {
		clip-path: inset(100% 0 0 0);
		transform: translateY(26px);
		transition: clip-path 0.7s var(--lv-ease), transform 0.7s var(--lv-ease);
		transition-delay: calc(var(--lv-i) * 80ms);
	}

	html.js-living .lv-reveal.lv-in.lv-dir-left > *,
	html.js-living .lv-reveal.lv-in.lv-dir-right > *,
	html.js-living .lv-reveal.lv-in.lv-pop > * {
		opacity: 1;
		transform: none;
	}

	html.js-living .lv-reveal.lv-in.lv-clip > * {
		clip-path: inset(0 0 0 0);
		transform: none;
	}

	/* После завершения reveal убираем will-change и задержки,
	   чтобы hover-состояния карточек работали без конфликтов */
	html.js-living .lv-reveal.lv-done > * {
		transition-delay: 0ms;
		will-change: auto;
	}

	/* SELF-варианты: reveal на самом элементе (фильтруемые карточки, баннеры) */
	html.js-living .lv-self.lv-hide-l {
		opacity: 0;
		transform: translateX(-34px) rotate(-1deg);
	}

	html.js-living .lv-self.lv-hide-r {
		opacity: 0;
		transform: translateX(34px) rotate(1deg);
	}

	html.js-living .lv-self.lv-hide-pop {
		opacity: 0;
		transform: scale(0.86);
	}

	html.js-living .lv-self.lv-hide-clip {
		clip-path: inset(0 100% 0 0);
	}

	html.js-living .lv-self.lv-hide-clip.lv-alt {
		clip-path: inset(0 0 0 100%);
	}

	html.js-living .lv-self {
		transition: opacity 0.55s var(--lv-ease), transform 0.8s var(--lv-ease-out), clip-path 0.9s var(--lv-ease);
		transition-delay: calc(var(--lv-i, 0) * 70ms);
	}

	html.js-living .lv-self.lv-in {
		opacity: 1;
		transform: none;
		clip-path: inset(0 0 0 0);
	}

	html.js-living .lv-self.lv-done {
		transition-delay: 0ms;
		will-change: auto;
	}
}

/* =========================================================================
   5. ИЗОБРАЖЕНИЯ — crop-reveal (clip + scale 1.12 → 1)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	html.js-living .lv-img-reveal {
		clip-path: none;
	}

	html.js-living .lv-img-reveal.lv-alt {
		clip-path: none;
	}

	html.js-living .lv-img-reveal.lv-in {
		clip-path: none;
	}

	html.js-living .lv-img-reveal img.lv-img-inner {
		transform: none;
		transition: transform 0.4s ease;
	}

	html.js-living .lv-img-reveal.lv-in img.lv-img-inner {
		transform: none;
	}

	/* После завершения возвращаем hover-эффекты темы */
	html.js-living .lv-img-reveal.lv-done img.lv-img-inner {
		transform: none;
		transition: transform 0.4s ease;
		will-change: auto;
	}
}

/* =========================================================================
   6. SPOTLIGHT НА КАРТОЧКАХ (pointer layer, --lv-mx/--lv-my из JS)
   ========================================================================= */
.lv-spotlight {
	position: relative;
}

.lv-spotlight::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		260px circle at var(--lv-mx, 50%) var(--lv-my, 50%),
		rgba(222, 190, 31, 0.12),
		transparent 65%
	);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 1;
}

.lv-spotlight.lv-lit::after {
	opacity: 1;
}

.lv-spotlight > * {
	position: relative;
	z-index: 2;
}

/* =========================================================================
   7. МАГНИТНЫЕ CTA
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	.lv-magnetic {
		will-change: transform;
		transition: transform 0.16s var(--lv-ease-out);
	}

	.lv-magnetic.lv-returning {
		transition: transform 0.55s var(--lv-spring);
	}

	.s-btn .s-btn-arrow {
		display: inline-block;
		transition: transform 0.3s var(--lv-ease-out);
	}

	.s-btn:hover .s-btn-arrow {
		transform: translateX(5px);
	}
}

/* =========================================================================
   8. СКРОЛЛ-ПАРАЛЛАКС МЕДИА (JS пишет --lv-py, мы применяем)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	.lv-parallax {
		translate: 0 var(--lv-py, 0px);
		will-change: translate;
	}
}

/* =========================================================================
   9. ГИДРОЛИНИЯ WORKFLOW — линия-связка наполняется со скроллом
   ========================================================================= */
.lv-workflow-line {
	position: absolute;
	top: 38px;
	left: 6%;
	right: 6%;
	height: 3px;
	border-radius: 2px;
	background: rgba(15, 23, 42, 0.07);
	pointer-events: none;
	z-index: 0;
}

.lv-workflow-line-fill {
	width: 100%;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--lv-orange), #f5dc47);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* =========================================================================
   10. AMBIENT — лёгкое дыхание фокальных объектов
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	.lv-breathe {
		animation: lvBreathe 7s infinite ease-in-out;
	}

	@keyframes lvBreathe {
		0%, 100% { box-shadow: var(--s-shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.12)); }
		50% { box-shadow: 0 26px 64px rgba(15, 23, 42, 0.17), 0 0 0 1px rgba(222, 190, 31, 0.12); }
	}
}

/* =========================================================================
   11. REDUCED MOTION — полная страховка
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.lv-hydroline,
	.lv-gauge,
	.lv-workflow-line {
		display: none;
	}

	.lv-parallax {
		translate: none !important;
	}

	.lv-gauge-dot {
		animation: none;
	}
}

/* =========================================================================
   12. МОБИЛЬНАЯ АДАПТАЦИЯ — концепция сохраняется, курсорное убирается
   ========================================================================= */
@media (max-width: 900px) {
	.lv-gauge {
		top: auto;
		bottom: 14px;
		right: 12px;
	}

	.lv-spotlight::after {
		display: none;
	}

	.lv-workflow-line {
		display: none;
	}
}