/* Появление содержимого при прокрутке.
   Общий файл для лендинга и страниц «О бренде», «СМИ», «Состав и наука».

   Всё скрытие спрятано за классом js-anim, который ставит motion.js.
   Так было не всегда: правило `.rv{opacity:0}` стояло безусловно, и если
   разметка загрузилась, а скрипт нет — половина страницы оставалась
   невидимой. Страницу читают поисковые и ИИ-краулеры, и пустая страница
   доставалась бы им. Нет скрипта — страница просто статична.

   Параметры движения взяты с encorefitness.ru и вымерены по их странице:
   кривая cubic-bezier(.7,0,.3,1) на ~0,5 с (у них так работают 168 элементов).
   Она не затухает мягко, а трогается и тормозит резко — отсюда ощущение
   упругости. Первая наша версия ехала 24 px за 0,8 с по затухающей кривой,
   и движение просто не успевало попасть в поле зрения. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-snap: cubic-bezier(.7, 0, .3, 1);      /* их основная кривая */
    --ease-out-far: cubic-bezier(.19, 1, .22, 1); /* их же, для длинных ходов */
  }

  .js-anim .rv {
    opacity: 0;
    transition: opacity .62s var(--ease-snap),
                transform .62s var(--ease-snap),
                filter .62s var(--ease-snap);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  /* 56 px вместо 24: на экране в 900 px короткий ход не читается как движение. */
  .js-anim .rv       { transform: translateY(56px); }
  .js-anim .rv-media { transform: scale(1.07) translateY(40px); filter: blur(10px); }
  .js-anim .rv.in    { opacity: 1; transform: none; filter: none; }


  /* Заголовок выходит по словам. Ход увеличен с .3em до .8em и слова
     начинают из-под собственной строки — так же, как у них. */
  .js-anim .rv-words .rw {
    display: inline-block;
    opacity: 0;
    transform: translateY(.8em);
    transition: opacity .55s var(--ease-snap),
                transform .68s var(--ease-out-far);
    transition-delay: calc(var(--i, 0) * 52ms + var(--d, 0) * 1ms);
  }
  .js-anim .rv-words.in .rw { opacity: 1; transform: none; }
  .js-anim .rv-words.rv     { opacity: 1; transform: none; }

  /* Линия над разделом прочерчивается слева направо. У encorefitness ритм
     страницы держат именно линии, и они не появляются, а прорисовываются. */
  .js-anim .rv-rule::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--ease-out-far);
    transition-delay: 60ms;
  }
  .js-anim .rv-rule.in::before { transform: scaleX(1); }

  /* Карточки внутри блока выходят по одной, а не всей стопкой. */
  .js-anim .rv-stagger > * {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity .6s var(--ease-snap), transform .6s var(--ease-snap);
    transition-delay: calc(var(--j, 0) * 90ms);
  }
  .js-anim .rv-stagger.in > * { opacity: 1; transform: none; }
  .js-anim .rv-stagger.rv     { opacity: 1; transform: none; }

}

/* Кнопка воспроизведения. Появляется только когда браузер запретил
   автозапуск — на iOS это режим энергосбережения. Без неё ролик без
   `controls` невозможно запустить вообще: нажимать не на что.
   Живёт вне @media(prefers-reduced-motion), потому что нужна и тем,
   кто выключил анимацию. */
.vwin, .win, .varch { position: relative; }
.vwin.tap, .win.tap, .varch.tap { cursor: pointer; }
.vwin.tap::after, .win.tap::after, .varch.tap::after {
  content: "";
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: rgba(139, 51, 32, .82) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M2 2l18 10L2 22z' fill='%23F3E6D6'/%3E%3C/svg%3E");
  background-size: 20px 22px;
  background-position: 22px center;
  box-shadow: 0 8px 22px rgba(58, 26, 16, .34);
  pointer-events: none;
}

/* ── Отклик на наведение ───────────────────────────────────────────────
   У encorefitness любая кнопка отвечает на курсор — это половина ощущения
   «живого» сайта. Кривая та же, что у появления блоков, чтобы движение на
   странице было одного характера. */
.btn,.btn2,.navcta,.cartbtn{transition:transform .35s var(--ease-snap,cubic-bezier(.7,0,.3,1)),
  background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.btn:hover,.navcta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(139,51,32,.28)}
.btn2:hover{transform:translateY(-2px);background:rgba(139,51,32,.06)}
.cartbtn:hover{transform:translateY(-1px)}
.btn:active,.btn2:active,.navcta:active,.cartbtn:active{transform:translateY(0)}
/* Карточки товара приподнимаются — тот же язык, что у кнопок. */
.tv,.mcard,.prow{transition:transform .35s var(--ease-snap,cubic-bezier(.7,0,.3,1)),box-shadow .35s ease}
.tv:hover,.mcard:hover{transform:translateY(-4px)}
/* Ссылки в меню подчёркиваются растущей линией, а не сменой цвета рывком. */
.menu>a:not(.navcta){position:relative}
.menu>a:not(.navcta)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .35s cubic-bezier(.7,0,.3,1)}
.menu>a:not(.navcta):hover::after{transform:scaleX(1)}
@media(hover:none){
  /* На касании «наведения» не существует: подсветка залипала бы после нажатия. */
  .btn:hover,.btn2:hover,.navcta:hover,.cartbtn:hover,.tv:hover,.mcard:hover{transform:none;box-shadow:none}
}