/* Движение. Сдержанное: только появление и отклик. Никаких каруселей и параллаксов. */

/* появление при скролле */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
[data-reveal].is-in{opacity:1;transform:none}

/* каскад внутри сетки: каждая карточка на 60 мс позже */
[data-reveal-stagger] > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal-stagger].is-in > *{opacity:1;transform:none}
[data-reveal-stagger].is-in > *:nth-child(1){transition-delay:0ms}
[data-reveal-stagger].is-in > *:nth-child(2){transition-delay:60ms}
[data-reveal-stagger].is-in > *:nth-child(3){transition-delay:120ms}
[data-reveal-stagger].is-in > *:nth-child(4){transition-delay:180ms}
[data-reveal-stagger].is-in > *:nth-child(5){transition-delay:240ms}
[data-reveal-stagger].is-in > *:nth-child(6){transition-delay:300ms}

/* росчерк в логотипе — рисуется один раз при загрузке */
.logo__swash path{
  stroke-dasharray:110;stroke-dashoffset:110;
  animation:draw .9s .25s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* цифры в блоке фактов: появление, затем наведение */
.fact__num{opacity:0;transform:translateY(10px);transition:opacity .6s ease-out, transform .6s ease-out}
.facts.is-in .fact__num{opacity:1;transform:none}
.facts.is-in .facts__grid > div:nth-child(2) .fact__num{transition-delay:120ms}
.facts.is-in .facts__grid > div:nth-child(3) .fact__num{transition-delay:240ms}
/* после появления наведение перехватывает управление (иначе правило выше его гасит) */
.facts.is-in .fact:hover .fact__num{transform:translateY(-6px);transition:transform .45s cubic-bezier(.22,.61,.36,1)}

/* подчёркивание ссылок в тексте — растёт слева */
.link-underline{position:relative;text-decoration:none;color:var(--rust);font-weight:600}
.link-underline::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out;
}
.link-underline:hover::after{transform:scaleX(1)}

/* стрелка в ссылке-кнопке едет вправо */
.btn .arrow{display:inline-block;transition:transform .2s ease-out}
.btn:hover .arrow{transform:translateX(4px)}

/* карточка: линейка сверху проявляется */
.card{position:relative}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rust);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease-out;
}
.card:hover::before{transform:scaleX(1)}

/* этапы: номер подсвечивается и трогается с места */
.step{position:relative;transition:background-color .3s ease}
.step::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.step:hover::before{transform:scaleY(1)}
.step__n{
  position:relative;
  transition:color .25s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.step:hover .step__n{color:var(--rust);transform:translateX(3px)}

/* уважение к настройкам системы */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger] > *,.fact__num{opacity:1 !important;transform:none !important;transition:none !important}
  .step__n,.step::before{transform:none !important;transition:none}
  .logo__swash path{stroke-dashoffset:0;animation:none}
  .card::before,.svc::before,.link-underline::after{transition:none}
  .more__sum::after{transition:none}
  .card--free,.card--free:hover{transform:none !important;box-shadow:none}
  .portrait__img{transform:none !important;transition:filter .3s}
  .portrait__frame::before{transition:none}
  .scale__mine{transform:none !important;transition:none !important}
}

/* шкала цен: ржавая зона вырастает слева направо при появлении */
[data-reveal] .scale__mine,
.scale[data-reveal] .scale__mine{
  transform:scaleX(0);
  transform-origin:260px 51px;
}
.scale[data-reveal].is-in .scale__mine{
  transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,.61,.36,1) .15s;
}
/* после появления hover перехватывает управление */
.scale[data-reveal].is-in:hover .scale__mine{
  transform:scaleX(1) scaleY(1.55);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

/* устройства без курсора: уточнения видны сразу */
@media (hover:none){
  .fact__more p{opacity:1 !important;transform:none !important}
  .fact__num{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .fact__num{transform:none !important;transition:none}
  .fact__more p{opacity:1 !important;transform:none !important;transition:none}
}