/* ════════════════════════════════════════════════════════════════
   MOHAWK ANIMATIONS — entrance, scroll reveal, film grain, magnetic CTA
   Минимум JS, максимум CSS. Без цирка.
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html { scroll-behavior: smooth; }

/* На mobile отключаем smooth scroll глобально — он триггерит smooth scroll-anchor
   restoration при auto-advance в calc.js (collapse Размер → expand Материал →
   layout shift). Юзер ощущает «принудительный скролл вниз». На mobile тач-скролл
   и так плавный самим устройством — JS smooth не нужен. */
@media (max-width: 640px) {
	html { scroll-behavior: auto; }
}

/* ─── 1. HERO ENTRANCE — staggered fade-up ─── */
@keyframes mhFadeUp {
	from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
	to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* W11 cleanup 2026-05-20: @keyframes mhFadeRight удалён — нигде не использовался. */
@keyframes mhFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Hero на index/usluga/corp — единый printer-pass rhythm (M4-v2 2026-05-24).
   900ms duration + 260ms stagger между элементами. Easing — var(--ease-out-smooth).
   Концепция: «один проход печатной головки», видимый ритм каскада.

   Покрытие двух hero-систем (раньше usluga-зона была без анимации —
   давний баг разных CSS-namespace, фикс вместе с rhythm M4-v2):
   - Home/corp: .mh__hero-eyebrow + .mh__hero-r
   - Usluga:    .mh__usluga-crumbs + .mh__usluga-hero-r */
/* H1 НЕ В СПИСКЕ fade-up — у него своя split-text анимация по словам
   (initSplitText в mohawk-anim.js). Раньше было double-animation:
   mhFadeUp + split-text одновременно → ощущение «булькает быстро».
   Fix 2026-05-24: split-text единственный motion для h1 (более выразительный). */
.mh__hero-eyebrow,
.mh__usluga-crumbs,
.mh__hero-lead,
.mh__hero-cta,
.mh__hero-min {
	opacity: 0;
	animation: mhFadeUp var(--duration-printer) var(--ease-out-smooth) forwards;
}
/* Gap 260ms — видимый каскад как ход печатной машины, не blink.
   M4-v1 с 120ms gap сливалась в один кадр, юзер не ощущал ритм.
   H1 — независимый split-text 410ms delay через CSS variable --d
   (см. initSplitText: каждое слово +180ms между собой). */
.mh__hero-eyebrow,
.mh__usluga-crumbs  { animation-delay:  150ms; }
.mh__hero-lead      { animation-delay:  670ms; }
.mh__hero-cta       { animation-delay:  930ms; }
.mh__hero-min       { animation-delay: 1190ms; }

/* Hero-r фото справа — fade in + медленный zoom-out (zoom = ambient, не stagger).
   Покрывает home (.mh__hero-r) и usluga (.mh__usluga-hero-r). */
.mh__hero-r,
.mh__usluga-hero-r {
	opacity: 0;
	animation: mhFadeIn var(--duration-printer) var(--ease-out-smooth) 300ms forwards;
}
.mh__hero-r img,
.mh__usluga-hero-r img {
	/* 1) Entrance zoom (transform, один раз). 2) После него — вечный idle-drift
	   кадра через object-position (НЕ transform → не конфликтует с zoom и с
	   parallax-translate из mohawk-anim.js, которые оба занимают transform).
	   delay 22.5s = старт drift сразу после окончания zoom (300ms + 22s). */
	animation: mhHeroZoom 22s var(--ease-css-default) 300ms forwards,
	           mhHeroDrift 26s var(--ease-in-out-soft) 22500ms infinite;
}
@keyframes mhHeroZoom {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}
/* Idle-«дыхание» hero: кадр внутри cover-картинки еле-еле плывёт (±2-3%).
   Первый экран не «мёртвый» в покое. Тонко, без перегруза. */
@keyframes mhHeroDrift {
	0%, 100% { object-position: 50% 50%; }
	50%      { object-position: 53% 47%; }
}

/* Hero-strip 4 cells — каскад справа налево после hero-min (закончится на 2090ms),
   180ms gap между cells — быстрее hero (это уже акценты, не главное). */
.mh__hero-strip-cell {
	opacity: 0;
	animation: mhFadeUp var(--duration-printer) var(--ease-out-smooth) forwards;
}
.mh__hero-strip-cell:nth-child(1) { animation-delay: 1450ms; }
.mh__hero-strip-cell:nth-child(2) { animation-delay: 1630ms; }
.mh__hero-strip-cell:nth-child(3) { animation-delay: 1810ms; }
.mh__hero-strip-cell:nth-child(4) { animation-delay: 1990ms; }

/* ─── 2. SCROLL REVEAL — единый printer-pass rhythm (M4 2026-05-24).
   .mh-anim класс на <html> ставится inline-скриптом в <head> до рендера. ─── */
.mh-anim [data-reveal] {
	opacity: 0;
	transform: translateY(80px);
	filter: blur(6px);
	transition: opacity var(--duration-printer) var(--ease-out-smooth),
	            transform var(--duration-printer) var(--ease-out-smooth),
	            filter var(--duration-printer) var(--ease-out-smooth);
	will-change: opacity, transform, filter;
}
.mh-anim [data-reveal].is-revealed {
	filter: blur(0);
}
.mh-anim [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger — printer-pass rhythm. Усилили translateY и добавили blur
   для заметности на больших экранах (раньше 24px было слишком subtle). */
.mh-anim [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(48px);
	filter: blur(4px);
	transition: opacity var(--duration-printer) var(--ease-out-smooth),
	            transform var(--duration-printer) var(--ease-out-smooth),
	            filter var(--duration-printer) var(--ease-out-smooth);
}
.mh-anim [data-reveal-stagger].is-revealed > * { filter: blur(0); }
.mh-anim [data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); }
/* Видимый каскад 180ms gap — карточки появляются «одна за другой» как
   с лотка принтера. M4-v2 2026-05-24 (раньше 80ms — сливался в blink). */
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay:  120ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay:  300ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay:  480ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay:  660ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay:  840ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 1020ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 1200ms; }
.mh-anim [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 1380ms; }

/* H2 underline — printer-pass rhythm, появляется к концу reveal */
.mh__h2.display::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--accent);
	margin-top: 14px;
}
.mh-anim [data-reveal] .mh__h2.display::after {
	width: 0;
	transition: width var(--duration-printer) var(--ease-out-smooth) 400ms;
}
.mh-anim [data-reveal].is-revealed .mh__h2.display::after {
	width: 56px;
}

/* ─── 3. FILM GRAIN — тонкий шум для «плёночного» вкуса ─── */
.mh-grain {
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
	background-size: 200px 200px;
	animation: mhGrain 8s steps(8) infinite;
}
@keyframes mhGrain {
	0%   { transform: translate(0,   0); }
	12%  { transform: translate(-5%, -3%); }
	25%  { transform: translate(3%, -2%); }
	37%  { transform: translate(-2%, 4%); }
	50%  { transform: translate(5%, 2%); }
	62%  { transform: translate(-4%, -5%); }
	75%  { transform: translate(2%, 3%); }
	87%  { transform: translate(-3%, 2%); }
	100% { transform: translate(0, 0); }
}

/* ─── 4. MAGNETIC — мягкая магнитная микро-реакция на ВСЕ .mh__btn (JS-driven).
   Fix 2026-05-24: расширили с primary/accent на все варианты. ─── */
.mh__btn {
	transition: transform 520ms var(--ease-out-smooth),
	            background 320ms ease,
	            box-shadow 420ms ease;
	will-change: transform;
}
.mh__btn--accent:hover {
	/* W3/C5: цвет hover-тени синхронизирован с актуальным --accent (yellow-500).
	   Раньше здесь был старый медный из концепта (ADR-021 заменил). */
	box-shadow: 0 14px 28px -10px rgba(var(--rgb-yellow-500), 0.55);
}

/* ─── 5. SPLIT TEXT — h1 по словам из-под маски, плавно ─── */
.mh-split-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
.mh-split-word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform var(--duration-printer) var(--ease-out-smooth);
	will-change: transform;
}
/* Concept-эталон требовал родительский класс .mh-anim на <html> для FOUC-защиты,
   у нас в production такого нет — selector упрощён до прямого матчинга. */
.mh-split-word.is-in > span { transform: translateY(0); }
.mh__h1 .mh-split-word > span { transition-delay: var(--d, 0ms); }

/* ─── 6. MARQUEE — бегущая строка материалов ─── */
.mh-marquee {
	overflow: hidden;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--ink);
	color: var(--paper);
	padding: 14px 0;
}
.mh-marquee__track {
	display: inline-flex;
	gap: 56px;
	white-space: nowrap;
	animation: mhMarquee 55s linear infinite;
	will-change: transform;
}
.mh-marquee__item {
	font-family: var(--font-mh-mono);
	font-size: var(--text-body-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 56px;
}
.mh-marquee__item::after {
	content: "✕";
	color: var(--accent);
	font-size: var(--text-mono-2xs); /* 10px → token */
}
@keyframes mhMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ─── 7. ANIMATED COUNTER на trust facts ─── */
.mh-counter {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
	display: inline-block;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}
.mh-counter-unit {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-sm); /* 12px → token */
	color: rgba(var(--rgb-paper),0.55);
	margin-left: 6px;
	letter-spacing: 0.04em;
	font-weight: 500;
}

/* ─── 8. 3D TILT на service-карточках ─── */
.mh-anim .mh__service {
	transform-style: preserve-3d;
	transition: transform 700ms var(--ease-css-default),
	            box-shadow 700ms ease,
	            border-color 320ms ease;
}
.mh-anim .mh__service.is-tilted {
	box-shadow: 0 18px 38px -16px rgba(var(--rgb-black), 0.18);
}

/* ─── 9. SCROLL PROGRESS BAR (наверху) — толще + ярче для заметности ─── */
.mh-progress {
	position: fixed;
	top: 0; left: 0;
	width: 0%;
	height: 4px;
	background: var(--accent);
	z-index: 9999;
	transition: width 80ms linear;
	box-shadow: 0 0 14px rgba(var(--rgb-yellow-500), 0.85),
	            0 1px 3px rgba(var(--rgb-black), 0.25);
}

/* ─── 10. HOVER GLOW на feature-card (mouse-tracked) ─── */
.mh-anim .mh__service--feature {
	--mx: 50%;
	--my: 50%;
}
.mh-anim .mh__service--feature::before {
	transition: background 200ms ease;
}
.mh-anim .mh__service--feature.is-hovered::before {
	background:
		radial-gradient(circle 320px at var(--mx) var(--my), rgba(var(--rgb-yellow-500), 0.28) 0%, transparent 60%),
		linear-gradient(to top, rgba(var(--rgb-graphite-900), 0.70) 0%, rgba(var(--rgb-graphite-900), 0.30) 40%, rgba(var(--rgb-graphite-900), 0.05) 100%);
}

/* ─── 11. SECTION DIVIDER — линия растёт между секциями ─── */
.mh__section + .mh__section,
.mh__trust + section,
.mh__canvas + section,
section + .mh__final {
	position: relative;
}
.mh-anim [data-reveal] .mh-section-divider {
	display: block;
	width: 0;
	height: 1px;
	background: var(--accent);
	margin: 0 auto 32px;
	max-width: 1328px;
	transition: width var(--duration-printer) var(--ease-out-smooth) 200ms;
}
.mh-anim [data-reveal].is-revealed .mh-section-divider { width: 100%; }

/* ─── 12. PARALLAX HERO photo (transform управляется JS scroll) ─── */
.mh-parallax { will-change: transform; }

/* Hover lift на карточках — плавный */
.mh__service,
.mh__case,
.mh__canvas-case,
.uc-calc__size,
.uc-calc__mat,
.uc-calc__opt {
	transition: transform 520ms var(--ease-css-default),
	            border-color 320ms ease,
	            background 320ms ease,
	            box-shadow 520ms ease;
}
.mh__service:hover,
.mh__case:hover,
.mh__canvas-case:hover {
	transform: translateY(var(--motion-lift-y-lg));
}

/* Service feature card overlay — лёгкий «оживляющий» drift на mural */
@keyframes mhMuralDrift {
	0%, 100% { transform: scale(1.02) translateY(0); }
	50%      { transform: scale(1.04) translateY(-1%); }
}
.mh__service--feature .mh__service-img img {
	animation: mhMuralDrift 18s ease-in-out infinite;
}

/* Кейсы / canvas-case — image breathe (плавно) */
.mh__case-img img,
.mh__canvas-case-img img {
	transition: transform 1200ms var(--ease-css-default);
}
.mh__case:hover .mh__case-img img,
.mh__canvas-case:hover .mh__canvas-case-img img {
	transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════
   DELIGHT 2026-05-29 — «дыхание» + «неожиданные повороты».
   Все под глобальным guard prefers-reduced-motion (строка 6 — глушит *).
   Принцип: предельно тонко, без перегруза. Транзишены НЕ на transform
   где работает magnetic JS (конфликт inline-style) — только box-shadow/clip.
   ════════════════════════════════════════════════════════════════ */

/* — Дыхание: жёлтый CTA мягко пульсирует свечением (не transform — magnetic-safe) */
@keyframes mhAccentBreath {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow-500), 0); }
	50%      { box-shadow: 0 0 0 6px rgba(var(--rgb-yellow-500), 0.16); }
}
.mh-anim .mh__btn--accent {
	animation: mhAccentBreath 4.5s var(--ease-in-out-soft) infinite;
}
/* На hover дыхание выключаем — там своя реакция, чтобы не дробить */
.mh-anim .mh__btn--accent:hover { animation: none; }

/* — Поворот: marquee-тикер ускоряется при наведении (55s → 22s) */
.mh-marquee:hover .mh-marquee__track {
	animation-duration: 22s;
}
.mh-marquee__track { transition: none; } /* duration меняется скачком — это ок для linear */

/* — Поворот: «краска подтекает» на карточке услуги (ink-spread снизу).
   Жёлтая подложка растёт снизу за контентом. .mh__service уже overflow:hidden. */
.mh__service { position: relative; }
.mh__service::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 0;
	background: var(--accent);
	opacity: 0.14;
	z-index: 0;
	transition: height 460ms var(--ease-out-smooth);
	pointer-events: none;
}
.mh__service:hover::after { height: 100%; }
.mh__service > * { position: relative; z-index: 1; }

/* — Поворот: жёлтая «капля» в конце underline заголовка секции.
   К существующему h2.display::after (underline width-reveal) добавляем
   точку-каплю, которая «стекает» после прорисовки линии. */
.mh-anim [data-reveal] .mh__h2.display { position: relative; }
.mh-anim [data-reveal] .mh__h2.display::before {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	transform: translateY(-4px) scale(0.6);
	transition: opacity 320ms var(--ease-out-smooth) 760ms,
	            transform 480ms var(--ease-out-smooth) 760ms;
}
.mh-anim [data-reveal].is-revealed .mh__h2.display::before {
	opacity: 1;
	transform: translateY(2px) scale(1);
}