/* Главная — кнопка Telegram на мобильном (наряд «Дизайн-56», ТЗ [С] 17.10
   10:27: «Вернуть кнопку Телеграм на главной странице — чтобы она плавно
   исчезала и плавно появлялась — только в мобильной вёрстке — с момента
   Генеративный поиск (fade in fade out) — очень плавное появление — у нас
   уже это было реализовано ранее, можешь вернуть»).

   Вернута реализация наряда «Дизайн-39» (коммит 483a42a, до «Дизайн-45»):
   до 767 px кнопки на первом экране нет — она плавно появляется, когда
   надстрочник «Генеративный поиск» второго экрана поднимается до уровня
   самой кнопки, и так же плавно исчезает при обратной прокрутке выше этой
   линии. Единственное отличие от Д-39 — длительность: ТЗ просит «очень
   плавное появление», поэтому взят --t-menu (400 ms) вместо --t-hover
   (240 ms); оба — токены tokens.css, своих значений нет.

   От 768 px (планшет, десктоп) правила ниже не действуют — приклейка к
   линии из «Дизайн-45» снята вместе с ней, поведение на планшете и
   десктопе прежнее. Класс .tg-js ставит home-tg.js: без JS кнопка видна
   всегда. Общий компонент .tg в components.css не изменён. */

@media (max-width:767px){
  /* стартовое состояние до первой отрисовки: кнопки нет и она не мигает */
  .tg-boot .tg{
    opacity:0;
    transform:translateY(10px) scale(.92);
    pointer-events:none;
    transition:none;
  }
  .tg-js .tg{
    --tg-rise:10px;                /* лёгкий подъём при появлении */
    transition:opacity var(--t-menu) var(--ease),
               transform var(--t-menu) var(--ease);
    will-change:opacity,transform;
  }
  .tg-js .tg.tg--off{
    opacity:0;
    transform:translateY(var(--tg-rise)) scale(.92);
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .tg-js .tg{transition:none;will-change:auto}
  .tg-js .tg.tg--off,.tg-boot .tg{transform:none}
}