/* ============================================================
   ДВИЖЕНИЕ · появление при скролле
   Всё скрытое состояние живёт под .js-motion — класс ставит
   скрипт. Если JS не отработал, страница остаётся видимой.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

  /* --- базовое появление --- */
  .js-motion [data-reveal]{
    opacity:0;
    transform:translate3d(0, 28px, 0);
    transition:opacity .44s cubic-bezier(.16,.84,.28,1),
               transform .48s cubic-bezier(.16,.84,.28,1);
    will-change:opacity, transform;
  }
  .js-motion [data-reveal].is-in{
    opacity:1;
    transform:none;
  }

  /* карточки выезжают чуть заметнее, с лёгким масштабом */
  .js-motion [data-reveal="card"]{
    transform:translate3d(0, 30px, 0) scale(.98);
  }
  .js-motion [data-reveal="card"].is-in{transform:none;}

  /* картинки — глубже и медленнее */
  .js-motion [data-reveal="art"]{
    opacity:0;
    transform:translate3d(0, 38px, 0) scale(.97);
    transition:opacity .48s cubic-bezier(.16,.84,.28,1),
               transform .54s cubic-bezier(.16,.84,.28,1);
  }
  .js-motion [data-reveal="art"].is-in{opacity:1;transform:none;}

  /* заголовок приезжает слева */
  .js-motion [data-reveal="head"]{
    transform:translate3d(-16px, 10px, 0);
  }
  .js-motion [data-reveal="head"].is-in{transform:none;}

  /* --- маркер под заголовком дорисовывается --- */
  .js-motion .marker::after{
    transform-origin:left center;
    transform:scaleX(0);
    transition:transform .4s cubic-bezier(.16,.84,.28,1) .14s;
  }
  .js-motion .is-in .marker::after,
  .js-motion .marker.is-in::after{transform:scaleX(1);}

  /* --- цифры в карточках статистики подпрыгивают --- */
  .js-motion [data-reveal="stat"] b{
    display:block;
    transform:translate3d(0, 18px, 0) scale(.9);
    opacity:0;
    transition:opacity .36s cubic-bezier(.16,.84,.28,1) .08s,
               transform .44s cubic-bezier(.2,1.5,.4,1) .08s;
  }
  .js-motion [data-reveal="stat"].is-in b{opacity:1;transform:none;}

  /* шапки при скролле не касаемся: тень под ней спорила
     с обводкой и читалась как вторая линия */

  /* --- почерк дописывается --- */
  .js-motion .hand{
    opacity:0;
    transform:rotate(-4deg) translate3d(0,10px,0) scale(.92);
    transition:opacity .36s ease .1s, transform .44s cubic-bezier(.2,1.4,.4,1) .1s;
  }
  .js-motion .hand.is-in{opacity:1;transform:rotate(-4deg);}
}

/* при отключённой анимации ничего не прячем и не двигаем */
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal],
  .js-motion [data-reveal="art"]{opacity:1 !important;transform:none !important;}
}