/* Движение в меру — стандарт лендингов с 11.11.2026 (НДВ Елены, по методу страницы Кожевникова).
   Подключать после stil.css и стилей страницы, вместе с dvizhenie.js. Разметка — data-атрибуты:
     data-dv="foto"   обёртка фото первого экрана: за ним «дышит» свечение, фото проявляется при загрузке
     data-dv          любой элемент: появляется снизу при прокрутке (можно не ставить руками, см. dvizhenie.js)
     data-dv="karta"  карточка: появляется и прорисовывает полоску (ПК — сверху, телефон — слева)
     data-dv-schet    число, которое отсчитывается от нуля, когда попадает в экран: <span data-dv-schet>150</span>
   Цвет берётся из --c-akcent (stil.css); свой можно задать в --dv-cvet. Своих цветов здесь нет. */

:root { --dv-cvet: var(--c-akcent); }

/* 1. Свечение за фото первого экрана, вдох-выдох за 6 с */
[data-dv="foto"] { position: relative; isolation: isolate; }
[data-dv="foto"]::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dv-cvet) 30%, transparent), transparent 70%);
  animation: dv-dyh 6s ease-in-out infinite;
}
@keyframes dv-dyh { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }

/* 2. Фото первого экрана проявляется при загрузке */
.dv-js [data-dv="foto"] img { opacity: 0; transform: scale(1.04); transition: opacity 1.2s, transform 2.2s cubic-bezier(.2,.7,.2,1); }
.dv-js.dv-gotovo [data-dv="foto"] img { opacity: 1; transform: none; }

/* 3. Появление при прокрутке */
.dv-js [data-dv]:not([data-dv="foto"]) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.dv-js [data-dv].dv-in { opacity: 1; transform: none; }

/* 4. Полоска карточки. На телефоне у карточки по конструктору border-left 3px: полоска рисуется поверх него */
[data-dv="karta"] { position: relative; }
[data-dv="karta"]::after {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: var(--dv-cvet); transition: width 1s .25s cubic-bezier(.4,0,.2,1);
}
[data-dv="karta"].dv-in::after { width: 100%; }
@media (max-width: 600px) {
  .dv-js [data-dv="karta"] { border-left-color: transparent; }
  [data-dv="karta"]::after { left: -3px; width: 3px; height: 0; border-radius: 0; transition: height .9s .2s cubic-bezier(.4,0,.2,1); }
  [data-dv="karta"].dv-in::after { width: 3px; height: 100%; }
}

/* Без движения: системная настройка «уменьшить движение» — всё сразу на месте */
@media (prefers-reduced-motion: reduce) {
  [data-dv="foto"]::before { animation: none; }
  .dv-js [data-dv], .dv-js [data-dv="foto"] img { opacity: 1; transform: none; transition: none; }
  [data-dv="karta"]::after { transition: none; }
}