/* pamir.kz — motion layer (подключается ПОСЛЕ styles.css).
   Характер: спокойная уверенность — медленные, весомые движения.
   Единая кривая сайта: cubic-bezier(.2,.7,.2,1). Работает во всех браузерах:
   IntersectionObserver + transitions вместо animation-timeline: view().
   Все правила под html.motion — без JS (или при prefers-reduced-motion)
   страница остаётся полностью видимой и статичной. */

/* Отключаем старые scroll-driven анимации — их заменяет motion.js */
html.motion .reveal { animation: none; }
html.motion .hero-copy { animation: none; }
html.motion .process-progress { animation: none; width: 0; transition: width .45s cubic-bezier(.2,.7,.2,1); }

/* --- Базовое появление --- */
html.motion .m-prep { opacity: 0; transform: translateY(26px); }
html.motion .m-prep.m-in {
  opacity: 1; transform: none;
  transition: opacity .95s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1);
}

/* --- Пословное появление заголовков (маска по строке) --- */
html.motion .m-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em; margin: -.1em; }
html.motion .m-wi { display: inline-block; transform: translateY(114%); }
html.motion .m-wi.m-in { transform: none; transition: transform 1.05s cubic-bezier(.2,.7,.2,1); }

/* --- About: медленный наезд (Ken Burns) на активном слайде карусели --- */
html.motion .about-carousel-slide { transition: opacity 1s ease, transform 1.2s ease; will-change: transform, opacity; }
html.motion .about-carousel-slide.is-active { transform: scale(1.055); transition: opacity 1s ease, transform 4.8s linear; }
html.motion .about-carousel picture:nth-child(2) .about-carousel-slide.is-active { transform: scale(1.11); }
html.motion .about-carousel picture:nth-child(3) .about-carousel-slide.is-active { transform: scale(1.09); }
html.motion .about-carousel picture:nth-child(4) .about-carousel-slide.is-active { transform: scale(1.11); }

/* --- Бегущая строка: мягкие края --- */
html.motion .ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* --- Ассортимент: фото внутри карточки медленно «садится» --- */
html.motion .assort-photo img { transform: scale(1.07); }
html.motion .assort-card.m-in .assort-photo img { transform: none; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }

/* --- Производство: активация этапов по мере прогресса --- */
html.motion .process-card { transition: border-color .7s ease; }
html.motion .process-card .card-index { transition: color .5s ease; color: #6f786f; }
html.motion .process-card.m-on { border-color: rgba(198,255,52,.38); }
html.motion .process-card.m-on .card-index { color: var(--lime-2); }

/* --- Мобильное меню: было display:none скачком — теперь плавно --- */
html.motion .mobile-nav {
  display: flex; visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s .4s;
}
html.motion body.menu-open .mobile-nav {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}

/* --- WhatsApp FAB: одноразовый вход с лёгким пружинным выбросом --- */
@keyframes m-fab-in { from { transform: scale(0); opacity: 0; } }
html.motion .whatsapp-fab.m-fab { animation: m-fab-in .8s cubic-bezier(.3,1.4,.45,1) .9s backwards; }

/* --- Карта: имитация доставки из Алматы (маршруты, «посылки», города) --- */
@keyframes kz-flow { to { stroke-dashoffset: -9; } }
html.motion .kz-route {
  fill: none; stroke: rgba(198,255,52,.42); stroke-width: 1.1;
  stroke-dasharray: 3 6; animation: kz-flow 1.1s linear infinite;
  opacity: 0; transition: opacity .7s ease;
}
html.motion .kz-city { fill: var(--lime); opacity: 0; transition: opacity .5s ease; }
html.motion .kz-dot { fill: var(--lime-2); opacity: 0; transition: opacity .6s ease; }
html.motion .kz-net.m-live .kz-route { opacity: 1; }
html.motion .kz-net.m-live .kz-city { opacity: .9; }
html.motion .kz-net.m-live .kz-dot { opacity: 1; }

/* --- Форма: чуть живее фокус, без смены характера --- */
html.motion .field input:focus, html.motion .field textarea:focus {
  background: rgba(255,255,255,.16); border-color: #fff;
}

/* Firefox не поддерживает animation-timeline: view() — без явного фолбэка блок
   может остаться полупрозрачным или сдвинутым. */
@supports not (animation-timeline: view()) {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}