/* =====================================================================
   bobrstroi.by - слой движения (ветка motion-2026). Подключается последним; поведение - js/motion.js.
   Режим: html.mo-full ставит скрипт в head. Анимируем только transform / opacity / clip-path.
   Акцент - жёлтый #F5C518; на светлом фоне жёлтым только линии и полосы, не текст.
   ===================================================================== */
:root {
  --mo-ease: cubic-bezier(.2, .7, .2, 1);
  --mo-ease-out: cubic-bezier(.16, .84, .3, 1);
  --mo-ease-io: cubic-bezier(.65, 0, .35, 1);
  --mo-yellow: #F5C518;
}

/* только from: конечное состояние берётся из CSS элемента (у hero-decoration opacity .8) */
@keyframes mo-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-word { from { transform: translateY(110%); } to { transform: none; } }
@keyframes mo-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-settle { from { transform: scale(1.06); } }
@keyframes mo-wipe-bar {
  0% { transform: scaleX(0); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: left center; }
  50.1% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes mo-wipe-text { 0%, 50% { color: transparent; } }
@keyframes mo-cur { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-zoom-in { from { transform: scale(1.12); } }
@keyframes mo-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .6); } 100% { box-shadow: 0 0 0 16px rgba(245, 197, 24, 0); } }

/* ---------- 1. Шапка: уходит при прокрутке вниз, возвращается вверх; линия прогресса чтения ---------- */
/* transform на шапке делает её containing block для fixed-меню (.nav) - меню уезжает в прокручиваемую область и мобильный браузер
   расширяет вьюпорт вдвое; overflow-x: clip этого не допускает (в открытом состоянии шапка не прячется, меню от клипа не страдает) */
.header { transition: transform .35s var(--mo-ease); overflow-x: clip; }
.mo-full .header.mo-hidden { transform: translateY(-100%); }
.mo-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mo-yellow);
  transform: scaleX(var(--mo-read, 0)); transform-origin: left center; pointer-events: none;
}

/* ---------- 2. Заголовки секций: жёлтая шторка, текст проявляется за ней ---------- */
.mo-full [data-mo-wipe] { position: relative; width: fit-content; max-width: 100%; opacity: 1; transform: none; transition: none; }
.mo-full .section-title[data-mo-wipe] { margin-left: auto; margin-right: auto; }
.mo-full [data-mo-wipe]::after {
  content: ''; position: absolute; inset: -.06em -.15em; background: var(--mo-yellow);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.mo-full [data-mo-wipe].mo-wait { color: transparent; }
.mo-full [data-mo-wipe].mo-go { animation: mo-wipe-text 1.1s linear backwards; }
.mo-full [data-mo-wipe].mo-go::after { animation: mo-wipe-bar 1.1s cubic-bezier(.19, 1, .22, 1) backwards; }

/* ---------- 3. Фото: шторка сверху вниз + лёгкий зум ----------
   Ожидание - ТОЛЬКО opacity (clip-path до нуля скрыл бы элемент от IntersectionObserver); clip-path живёт только внутри анимации. */
.mo-full .mo-cur.mo-wait { opacity: 0; }
.mo-full .mo-cur.mo-go { animation: mo-cur .95s var(--mo-ease-io) backwards; }
.mo-full .fnd-img.mo-go img, .mo-full .work-grid a.mo-go img { animation: mo-zoom-in 1.3s var(--mo-ease-out) backwards; }

/* ---------- 4. Цифры: жёлтая линия под числом (в зазоре под числом, раскладку не меняет) ---------- */
.stat-number { position: relative; }
.stat-number::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 56px; height: 3px; margin-left: -28px;
  background: var(--mo-yellow); transform-origin: left center;
}
.mo-full .stats-grid.mo-wait .stat-number::after { transform: scaleX(0); }
.mo-full .stats-grid.mo-go .stat-number::after { animation: mo-line .9s var(--mo-ease) backwards; }
.mo-full .stats-grid.mo-go .stat-item:nth-child(1) .stat-number::after { animation-delay: .3s; }
.mo-full .stats-grid.mo-go .stat-item:nth-child(2) .stat-number::after { animation-delay: .42s; }
.mo-full .stats-grid.mo-go .stat-item:nth-child(3) .stat-number::after { animation-delay: .54s; }
.mo-full .stats-grid.mo-go .stat-item:nth-child(4) .stat-number::after { animation-delay: .66s; }

/* ---------- 5. Кнопки: один мягкий импульс (вечной пульсации нет) ---------- */
.mo-full .btn-yellow.mo-pulse { animation: mo-pulse 1.3s ease-out 1; }

/* ---------- 6. Главный экран ---------- */
/* фон (то же фото) оседает; слой .hero::before описан в blocks.css */
.mo-full .hero::before { animation: mo-settle 1.6s var(--mo-ease-out) backwards; }
.hero h1.mo-split .mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em .06em .14em; margin: -.1em -.06em -.14em; }
.hero h1.mo-split .mo-w > span { display: inline-block; animation: mo-word .78s var(--mo-ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 80ms); }
.mo-full .hero-decoration { animation: mo-fade .6s ease .05s backwards; }
.mo-full .hero-subtitle { animation: mo-rise .7s var(--mo-ease) .75s backwards; }
.mo-full .hero .btn-yellow { animation: mo-rise .7s var(--mo-ease) .95s backwards, mo-pulse 1.3s ease-out 1.9s 1; }
.mo-full .hero-trust-item { animation: mo-rise .6s var(--mo-ease) backwards; }
.mo-full .hero-trust-item:nth-child(1) { animation-delay: 1.15s; }
.mo-full .hero-trust-item:nth-child(2) { animation-delay: 1.25s; }
.mo-full .hero-trust-item:nth-child(3) { animation-delay: 1.35s; }
.mo-full .hero-trust-item:nth-child(4) { animation-delay: 1.45s; }