/*****************************************************************************
 *  Появление и исчезновение – одно на всех
 *
 *  Здесь собрано то, как приходят и уходят элементы, которых на странице то
 *  нет, то есть: меню языка под глобусом, выбор области поиска (кнопка
 *  «Везде»), список найденного под строкой поиска и кнопка «Сбросить» в базе
 *  знаний. Раньше каждый появлялся по-своему, а точнее никак: переключался
 *  display или атрибут hidden, и элемент возникал мгновенно.
 *
 *  ОТКУДА ЧИСЛА
 *
 *  Из подсказок боковой панели. Они появились на сайте первыми и задали тон:
 *  0.14 секунды, ровная кривая, сдвиг на 4 пикселя от того, что окно открыло.
 *  Подсказка выезжает вбок, от значка наружу, выпадающее окно вниз, от кнопки.
 *  Направление разное, время и кривая одни и те же, поэтому всё вместе
 *  читается как один механизм.
 *
 *  ПОЧЕМУ НЕ DISPLAY
 *
 *  Его нечем анимировать, между none и block нет промежуточных значений.
 *  Поэтому окно всегда в раскладке, а видимость даёт пара opacity и visibility.
 *
 *  visibility переключается мгновенно, но при закрытии с задержкой ровно на
 *  время ухода, иначе окно исчезало бы раньше, чем успеет погаснуть. Она же, в
 *  отличие от одной прозрачности, убирает закрытое окно из обхода клавишей
 *  табуляции и от чтения с экрана – ровно то, что раньше делал display.
 *
 *  Переходы выписаны в обоих правилах целиком: transition это сокращение, и
 *  короткая строка в .on снесла бы остальные слои.
 *
 *  КАК ДОБАВИТЬ НОВОЕ
 *
 *  Дописать селектор в оба правила ниже и в правило для уменьшенного движения.
 *  В самой странице оставить только вид и место, а display и hidden не трогать
 *  вовсе: правило отсюда их не переопределит, потому что стили страницы идут
 *  ниже по документу и выигрывают при равном весе, а hidden это и вовсе
 *  атрибут, то есть display:none поверх всего.
 *
 *  Элемент в потоке, вроде кнопки «Сбросить», при этом продолжает занимать своё
 *  место и когда его не видно. Для неё это правильно: она стоит у правого края
 *  строки, соседи от её появления не двигаются. Если однажды понадобится
 *  скрывать что-то в середине строки, место всё же придётся освобождать, и это
 *  будет уже другая задача, с анимацией раскладки.
 *****************************************************************************/

.lang-menu, .smenu, .sresults, .tp-reset{
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.lang-menu.on, .smenu.on, .sresults.on, .tp-reset.on{
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear 0s;
}

/* Тем, кто просил меньше движения, остаётся только проявление. */
@media (prefers-reduced-motion: reduce){
  .lang-menu, .smenu, .sresults, .tp-reset{
    transform: none;
    transition: opacity .14s ease, visibility 0s linear .14s;
  }
  .lang-menu.on, .smenu.on, .sresults.on, .tp-reset.on{
    transform: none;
    transition: opacity .14s ease, visibility 0s linear 0s;
  }
}