/* ═══════════════════════════════════════════════════════════════
   sections.css — секции главной + калькулятор + формы
   Full-bleed first. Никакого центрированного 1180px-контейнера.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MICRO-BAR — узкая полоса над основным header.
   Слева: status-dot + status-text + часы. Справа: тел + мессенджеры.
   Тон: editorial info-strip, graphite-фон, mono-цифры, без шума.
   ═══════════════════════════════════════════════════════════════ */
.micro-bar {
	background: var(--color-graphite-900);
	color: var(--color-paper);
	font-family: var(--font-mono);
	font-size: var(--text-mono-sm); /* 12px → token */
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(var(--rgb-paper), 0.08);
}
.micro-bar__inner {
	max-width: var(--container-grid);
	margin: 0 auto;
	padding: 0 var(--page-padding-x);
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.micro-bar__status,
.micro-bar__contacts {
	display: inline-flex;
	align-items: center;
	gap: 0;
	white-space: nowrap;
}
.micro-bar__sep {
	opacity: 0.4;
	padding: 0 8px;
}
.micro-bar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 8px;
	flex-shrink: 0;
}
.micro-bar__dot[data-status="working"]  { background: var(--color-status-working); box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0.6); animation: micro-bar-pulse 2.4s ease-out infinite; }
.micro-bar__dot[data-status="vacation"] { background: var(--color-yellow-500); }
.micro-bar__dot[data-status="closed"]   { background: var(--color-yellow-700); }
@keyframes micro-bar-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(var(--rgb-status-working), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0); }
}
.micro-bar__status-text { color: var(--color-paper); }
.micro-bar__hours       { color: rgba(var(--rgb-paper), 0.65); }
.micro-bar__phone,
.micro-bar__messenger {
	color: var(--color-paper);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--duration-fast, 160ms) var(--ease-out, ease);
}
.micro-bar__phone:hover,
.micro-bar__messenger:hover {
	border-bottom-color: var(--color-yellow-500);
}

@media (prefers-reduced-motion: reduce) {
	.micro-bar__dot[data-status="working"] { animation: none; }
}

/* Mobile (≤640px): компактнее, status-text может прятаться, оставляем dot+часы+тел */
@media (max-width: 640px) {
	.micro-bar__inner {
		height: auto;
		padding: 8px var(--page-padding-x);
		gap: 12px;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.micro-bar { font-size: var(--text-eyebrow); /* 11px → token */ }
	.micro-bar__status-text { display: none; }   /* экономим место — есть зелёная точка */
	.micro-bar__sep:first-of-type {
		display: none;                              /* убираем сепаратор после скрытого status-text */
	}
}


/* ═══════════════════════════════════════════════════════════════
   MOTION SYSTEM — единая моторика главной.
   4 паттерна: Whisper (micro) · Lift (hover) · Reveal (scroll-entry) · Drift (ambient).
   Принципы: длинный tail (280-700ms), малые distances (~3-6px), без bounce.
   Все patterns отключаются при prefers-reduced-motion.

   Brand: печатная студия → бумажная статичная поверхность с лёгким
   «дыханием» (drift) и плавным появлением блоков (reveal). Без circus.
   ═══════════════════════════════════════════════════════════════ */

/* ─── ON-LOAD ENTRY: hero уже видим при load, scroll-driven не triggers.
   Отдельный animation сразу при page-load — stagger fade-up + slight scale. */
@media (prefers-reduced-motion: no-preference) {
	.hero__copy > * {
		animation: motion-entry-soft 820ms var(--ease-out-smooth) both;
	}
	.hero__copy > *:nth-child(1) { animation-delay: 80ms; }
	.hero__copy > *:nth-child(2) { animation-delay: 200ms; }
	.hero__copy > *:nth-child(3) { animation-delay: 320ms; }
	.hero__copy > *:nth-child(4) { animation-delay: 440ms; }

	/* Hero visual — entire visual fades in slightly later, после copy */
	.hero__visual {
		animation: motion-entry-soft 900ms var(--ease-out-smooth) 560ms both;
	}
}

/* ─── REVEAL: time-based через IntersectionObserver (W6 cleanup 2026-05-19:
   motion.js удалён как orphan — IntersectionObserver-логика теперь
   в mohawk-anim.js). Time-based 800ms даёт consistent visible motion
   независимо от скорости скролла.
   ──────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   PRINTER PASS — единый motion language главной.
   Метафора латексного принтера: каретка проходит секции в разных
   направлениях (left/right/down), но все на одной timing/curve.
   Variation = ритм, не однообразие. Consistency = duration+easing+темп.

   Все элементы используют только translate (X или Y, не оба) или
   только opacity+scale. Не translate+scale одновременно — это даёт
   "мерцающее" feel который user явно отверг.
   ═══════════════════════════════════════════════════════════════ */

/* Base — opacity only (нейтральный для специфичных элементов) */
.is-pre-reveal {
	opacity: 0;
}
.is-pre-reveal.is-revealed {
	opacity: 1;
	transition: opacity var(--duration-printer) var(--ease-printer-pass);
}

/* ─── PASS-LEFT: каретка слева → элемент въезжает translateX -32→0.
   Hero copy, section heads большинства секций, HowTo steps, Contacts. */
.hero__copy > *.is-pre-reveal,
.section__head > *.is-pre-reveal,
.howto__head > *.is-pre-reveal,
.contacts__head.is-pre-reveal,
.howto__step.is-pre-reveal,
.contacts__row.is-pre-reveal {
	translate: -32px 0;
}
.hero__copy > *.is-pre-reveal.is-revealed,
.section__head > *.is-pre-reveal.is-revealed,
.howto__head > *.is-pre-reveal.is-revealed,
.contacts__head.is-pre-reveal.is-revealed,
.howto__step.is-pre-reveal.is-revealed,
.contacts__row.is-pre-reveal.is-revealed {
	translate: 0 0;
	transition:
		opacity var(--duration-printer) var(--ease-printer-pass),
		translate var(--duration-printer) var(--ease-printer-pass);
}

/* ─── PASS-RIGHT: return stroke → элемент въезжает translateX 32→0.
   Works head, Trust head + facts (вариация ритма между секциями). */
.works__head > *.is-pre-reveal,
.trust-facts__head > *.is-pre-reveal,
.trust-facts__row.is-pre-reveal {
	translate: 32px 0;
}
.works__head > *.is-pre-reveal.is-revealed,
.trust-facts__head > *.is-pre-reveal.is-revealed,
.trust-facts__row.is-pre-reveal.is-revealed {
	translate: 0 0;
	transition:
		opacity var(--duration-printer) var(--ease-printer-pass),
		translate var(--duration-printer) var(--ease-printer-pass);
}

/* ─── SETTLE-DOWN: бумага подаётся вниз → translateY 24→0.
   Cards (services), pins (works), FAQ items, contacts coords. */
.service-card.is-pre-reveal,
.works__pin.is-pre-reveal,
.faq-item.is-pre-reveal,
.contacts__coords.is-pre-reveal {
	translate: 0 24px;
}
.service-card.is-pre-reveal.is-revealed,
.works__pin.is-pre-reveal.is-revealed,
.faq-item.is-pre-reveal.is-revealed,
.contacts__coords.is-pre-reveal.is-revealed {
	translate: 0 0;
	transition:
		opacity var(--duration-printer) var(--ease-printer-pass),
		translate var(--duration-printer) var(--ease-printer-pass);
}

/* ─── FADE-EMPHASIS: только opacity + subtle scale (точка акцента).
   CTA-band — финальный «отпечаток», contacts__cta — анкер. */
.cta-band > *.is-pre-reveal,
.contacts__cta.is-pre-reveal {
	scale: 0.96;
}
.cta-band > *.is-pre-reveal.is-revealed,
.contacts__cta.is-pre-reveal.is-revealed {
	scale: 1;
	transition:
		opacity var(--duration-printer) var(--ease-printer-pass),
		scale var(--duration-printer) var(--ease-printer-pass);
}

/* ─── STAGGER: вариативный ритм per section type, единая duration 900ms.
   "Принтер" концепция: cards быстрее (lateral pass), steps медленнее
   (deliberate vertical pass), headers — быстрая шапка перед content. */

/* Section heads — 90ms между eyebrow → h2 → lead (210ms cascade) */
.section__head > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 90ms; }
.section__head > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 180ms; }
.works__head > *:nth-child(2).is-pre-reveal.is-revealed   { transition-delay: 90ms; }
.works__head > *:nth-child(3).is-pre-reveal.is-revealed   { transition-delay: 180ms; }
.howto__head > *:nth-child(2).is-pre-reveal.is-revealed   { transition-delay: 90ms; }
.howto__head > *:nth-child(3).is-pre-reveal.is-revealed   { transition-delay: 180ms; }
.trust-facts__head > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 90ms; }
.trust-facts__head > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 180ms; }

/* Hero copy — 100ms между, 4 elements (300ms cascade) */
.hero__copy > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 100ms; }
.hero__copy > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 200ms; }
.hero__copy > *:nth-child(4).is-pre-reveal.is-revealed { transition-delay: 300ms; }

/* Service cards — 130ms (lateral pass, не slow) */
.service-card:nth-child(2).is-pre-reveal.is-revealed     { transition-delay: 130ms; }
.service-card:nth-child(3).is-pre-reveal.is-revealed     { transition-delay: 260ms; }
.service-card:nth-child(4).is-pre-reveal.is-revealed     { transition-delay: 390ms; }
.service-card:nth-child(5).is-pre-reveal.is-revealed     { transition-delay: 520ms; }

/* HowTo steps — 200ms (deliberate vertical pass, по очереди как 4 шага) */
.howto__step:nth-child(2).is-pre-reveal.is-revealed     { transition-delay: 200ms; }
.howto__step:nth-child(3).is-pre-reveal.is-revealed     { transition-delay: 400ms; }
.howto__step:nth-child(4).is-pre-reveal.is-revealed     { transition-delay: 600ms; }

/* Trust facts — 170ms (вариация, чуть быстрее steps) */
.trust-facts__row:nth-child(2).is-pre-reveal.is-revealed   { transition-delay: 170ms; }
.trust-facts__row:nth-child(3).is-pre-reveal.is-revealed   { transition-delay: 340ms; }
.trust-facts__row:nth-child(4).is-pre-reveal.is-revealed   { transition-delay: 510ms; }

/* FAQ items — 140ms */
.faq-item:nth-child(2).is-pre-reveal.is-revealed     { transition-delay: 140ms; }
.faq-item:nth-child(3).is-pre-reveal.is-revealed     { transition-delay: 280ms; }
.faq-item:nth-child(4).is-pre-reveal.is-revealed     { transition-delay: 420ms; }
.faq-item:nth-child(5).is-pre-reveal.is-revealed     { transition-delay: 560ms; }

/* Contacts rows — 110ms */
.contacts__row:nth-child(2).is-pre-reveal.is-revealed     { transition-delay: 110ms; }
.contacts__row:nth-child(3).is-pre-reveal.is-revealed     { transition-delay: 220ms; }
.contacts__row:nth-child(4).is-pre-reveal.is-revealed     { transition-delay: 330ms; }

/* CTA-band — 120ms между title → lead → CTA */
.cta-band > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 120ms; }
.cta-band > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 240ms; }

/* Header section: eyebrow → h2 → lead → cta — 80ms stagger */
.section__head > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 80ms; }
.section__head > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 160ms; }
.section__head > *:nth-child(4).is-pre-reveal.is-revealed { transition-delay: 240ms; }

.works__head > *:nth-child(2).is-pre-reveal.is-revealed   { transition-delay: 80ms; }
.works__head > *:nth-child(3).is-pre-reveal.is-revealed   { transition-delay: 160ms; }

.howto__head > *:nth-child(2).is-pre-reveal.is-revealed   { transition-delay: 80ms; }
.howto__head > *:nth-child(3).is-pre-reveal.is-revealed   { transition-delay: 160ms; }

.trust-facts__head > *:nth-child(2).is-pre-reveal.is-revealed { transition-delay: 80ms; }
.trust-facts__head > *:nth-child(3).is-pre-reveal.is-revealed { transition-delay: 160ms; }

.cta-band > *:nth-child(2).is-pre-reveal.is-revealed      { transition-delay: 100ms; }
.cta-band > *:nth-child(3).is-pre-reveal.is-revealed      { transition-delay: 200ms; }

/* Trust parallax удалён по user feedback — parallax нужен только на HowTo. */

/* ─── HOWTO + TRUST — PIN & SCROLL-TIE PATTERN ────────────────────────
   Section "залипает" в viewport через position: sticky, пока user скроллит
   через высокий .howto-pin / .trust-pin wrapper. За этот scroll progress
   шаги/факты материализуются один за другим (CSS scroll-driven с named
   scroll-timeline на pin-wrapper'е). После того как все 4 элемента appeared,
   user продолжает скролл — section "отлипает" и идёт дальше.

   Mobile: pin-pattern отключается (на телефоне 4x scroll = pizdec) —
   sticky убран, section flows normally, шаги через IO long-stagger. */

@media (prefers-reduced-motion: reduce) {
	.is-pre-reveal,
	.is-pre-reveal.is-revealed {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		transition: none !important;
	}
}

/* Entry для hero (без scroll, on-load) — fade + slight scale + translateY */
@keyframes motion-entry-soft {
	from { opacity: 0; translate: 0 var(--motion-reveal-y, 32px); scale: 0.98; }
	to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* W6 cleanup 2026-05-19: блок .hv-layer-* drift анимаций удалён.
   Это были legacy-стили от старого hero-дизайна (banner/holst/tablichka/plenka
   plates), который заменён на Mohawk concept (.mh__hero). Соответствующие
   keyframes motion-drift-* и hover-pause удалены вместе. */

/* ─── REDUCED MOTION: отключаем reveal/decorative animation ──── */
@media (prefers-reduced-motion: reduce) {
	.hero__copy > *,
	.hero__visual,
	.section__head > *,
	.works__head > *,
	.howto__head > *,
	.trust-facts__head > *,
	.contacts__head,
	.service-card,
	.works__pin,
	.howto__step,
	.trust-facts__row,
	.faq-item,
	.contacts__coords,
	.contacts__row,
	.contacts__cta,
	.cta-band > * {
		animation: none !important;
		translate: 0 0 !important;
		scale: 1 !important;
		opacity: 1 !important;
	}
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}