/* ==========================================================================
   Анимации. Всё на CSS-переходах, JS только вешает классы.
   Темп — мягкий и медленный: 0.8 с, сдвиг 24 px, ступенька 70 мс.
   ========================================================================== */

:root{
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --reveal-time:.8s;
}

/* ------------------------------------------------------ появление блоков
   Атрибут задаёт только стартовое состояние. Само движение проигрывает
   anim.js через Web Animations API, а атрибут при этом снимается —
   поэтому «залипнуть невидимым» элемент не может. */
[data-reveal]{opacity:0;transform:translateY(24px)}
[data-reveal-slow]{opacity:0;transform:translateY(34px) scale(1.02)}

/* ------------------------------------------- подсветка текста по скроллу */
.hl-word{
  color:rgba(255,255,255,.22);
  transition:color .28s ease;
}
.hl-word.is-lit{color:inherit}
.salfetka__sub .hl-word.is-lit{color:#fff}
.salfetka__quote .hl-word.is-lit{color:#fff}

/* ------------------------------------------------------------- кнопки */
.btn-swap{
  position:relative;
  overflow:hidden;
}
/* заливка повторяет скругление кнопки — иначе по углам остаются светлые уголки */
.btn-swap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  transform:translateY(101%);
  transition:transform .45s var(--ease-soft);
}
.btn-swap:hover::before,
.btn-swap:focus-visible::before{transform:translateY(0)}

/* текстовый вариант — только перещёлкивание, без заливки и без обрезки */
.btn-swap--text{overflow:visible}
.btn-swap--text::before{display:none}

.btn-swap__label{
  position:relative;
  z-index:1;
  display:grid;
  overflow:hidden;
  line-height:1.15;
}
.btn-swap__label > span{
  grid-area:1/1;
  transition:transform .45s var(--ease-soft);
}
.btn-swap__label > span:nth-child(2){transform:translateY(115%)}
.btn-swap:hover .btn-swap__label > span:nth-child(1),
.btn-swap:focus-visible .btn-swap__label > span:nth-child(1){transform:translateY(-115%)}
.btn-swap:hover .btn-swap__label > span:nth-child(2),
.btn-swap:focus-visible .btn-swap__label > span:nth-child(2){transform:translateY(0)}

/* белая кнопка на тёмном — заливка тёмная, текст белеет */
.btn--white.btn-swap::before{background:#0D0D0D}
.btn--white.btn-swap{transition:color .3s var(--ease-soft),transform .18s ease,box-shadow .18s ease}
.btn--white.btn-swap:hover{color:#fff;transform:none;box-shadow:none}

/* кнопка формы в поп-апе */
.lead__submit.btn-swap::before{background:#0D0D0D}

/* --------------------------------------------- линия прогресса «Салфетки» */
.steps{position:relative}
.steps__line{
  position:absolute;
  top:6px;
  bottom:26px;
  left:196px;
  width:1px;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}
.steps__line i{
  display:block;
  width:100%;
  height:0;
  background:#fff;
  transition:height .18s linear;
}
@media (max-width:959px){
  .steps__line{display:none}
}

/* ------------------------------------------------ прогресс квиза-салфетки */
.nap__count{transition:color .3s ease}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-slow]{opacity:1;transform:none;transition:none}
  .hl-word{color:inherit}
  .btn-swap::before{display:none}
}