/* ==========================================================================
   Esperanto. Движение.

   Правило одно: за один жест двигаются несколько слоев, каждый со своей
   длительностью и небольшим сдвигом по времени. Тогда отклик читается как
   объемный, а не как переключение состояния.

   Слои в типовом наведении:
     1. заливка - быстрая, задает факт отклика;
     2. смещение текста - основной слой, с упругостью;
     3. мета и указатель - догоняют с задержкой, дают глубину;
     4. линейка - уплотняется последней.

   Длительности и кривые берутся из переменных, см. категорию «Движение».
   Пользователь, попросивший уменьшить анимацию, получает статику:
   глушение стоит в base.css.
   ========================================================================== */

/* --- Заливка, которая наезжает, а не включается -----------------------------
   Псевдоэлемент под содержимым: растет по вертикали от нижней кромки.
   Бумага не мигает, а подливается.
   -------------------------------------------------------------------------- */

.e-cell,
.e-row,
.e-list__item,
.e-fab__item {
  position: relative;
  isolation: isolate;
}

.e-cell::before,
.e-row::before,
.e-list__item::before,
.e-fab__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--e-paper-warm);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--e-dur-base) var(--e-ease-settle);
}

.e-cell:hover::before,
.e-row:hover::before,
.e-list__item:hover::before,
.e-fab__item:hover::before { transform: scaleY(1); }

/* Заливка на ховере больше не нужна: ее делает псевдоэлемент */
.e-cell:hover,
.e-row:hover,
.e-list__item:hover,
.e-fab__item:hover { background: none; }

/* --- Плитка услуги ------------------------------------------------------------
   Четыре слоя: номер, заголовок, текст, и тонкая линия слева, которая
   прочерчивается сверху вниз.
   ---------------------------------------------------------------------------- */

.e-cell::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--e-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--e-dur-slow) var(--e-ease-settle) var(--e-delay-layer);
}
.e-cell:hover::after { transform: scaleY(1); }

.e-cell__num,
.e-cell__title,
.e-cell__text {
  transition:
    transform var(--e-dur-base) var(--e-ease-elastic),
    color var(--e-dur-fast) var(--e-ease-out);
}
.e-cell__title { transition-delay: calc(var(--e-delay-layer) / 2); }
.e-cell__text  { transition-delay: var(--e-delay-layer); }

.e-cell:hover .e-cell__num   { transform: translateX(var(--e-shift)); color: var(--e-accent); }
.e-cell:hover .e-cell__title { transform: translateX(var(--e-shift)); }
.e-cell:hover .e-cell__text  { transform: translateX(calc(var(--e-shift) / 2)); color: var(--e-ink-body); }

/* Тонированная плитка переворачивается в чернила: заливка идет сверху */
.e-cell--tinted::before { background: var(--e-ink); transform-origin: top; }
.e-cell--tinted:hover { color: var(--e-accent-ink); }
.e-cell--tinted::after { display: none; }

/* --- Строка каталога -------------------------------------------------------- */

.e-row__name {
  display: inline-block;
  transition: transform var(--e-dur-base) var(--e-ease-elastic);
}
.e-row:hover .e-row__name { transform: translateX(var(--e-shift)); }

.e-row__value { transition: color var(--e-dur-base) var(--e-ease-out) var(--e-delay-layer); }
.e-row:hover .e-row__value { color: var(--e-ink); }

/* Шапка перечня не подсвечивается и не двигается */
.e-row--head::before { display: none; }
.e-row--head .e-row__name { transform: none; }

/* --- Пункт перечня юрисдикций -------------------------------------------------
   Код страны - второй слой: выезжает и проявляется с задержкой.
   ---------------------------------------------------------------------------- */

.e-list__item .e-row__name { transition: transform var(--e-dur-base) var(--e-ease-elastic); }
.e-list__item:hover .e-row__name { transform: translateX(var(--e-shift)); }

.e-list__item .e-meta--code {
  transition:
    transform var(--e-dur-slow) var(--e-ease-settle) var(--e-delay-layer),
    color var(--e-dur-base) var(--e-ease-out) var(--e-delay-layer);
}
.e-list__item:hover .e-meta--code { transform: translateX(calc(var(--e-shift) * -1)); color: var(--e-brass); }

/* --- Кнопки --------------------------------------------------------------------
   Сплошная приподнимается с перелетом, контурная заливается снизу вверх.
   ------------------------------------------------------------------------------ */

.e-btn {
  position: relative;
  isolation: isolate;
  transition:
    transform var(--e-dur-base) var(--e-ease-elastic),
    color var(--e-dur-fast) var(--e-ease-out),
    background-color var(--e-dur-fast) var(--e-ease-out);
}
.e-btn:hover  { transform: translateY(calc(var(--e-lift) * -1)); }
.e-btn:active { transform: translateY(0); transition-duration: var(--e-dur-fast); }

.e-btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--e-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--e-dur-base) var(--e-ease-settle);
}
.e-btn--ghost:hover::before { transform: scaleY(1); }
.e-btn--ghost:hover { background: none; }

/* --- Ссылка-указатель -----------------------------------------------------------
   Линейка под текстом перечеркивается заново, слева направо, уже акцентом.
   -------------------------------------------------------------------------------- */

.e-link { position: relative; }
.e-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--e-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--e-dur-base) var(--e-ease-settle);
}
.e-link:hover::after { transform: scaleX(1); }

/* --- Поля формы ------------------------------------------------------------------ */

.e-form__field input,
.e-form__field textarea,
.e-form__field select {
  transition:
    border-color var(--e-dur-fast) var(--e-ease-out),
    box-shadow var(--e-dur-base) var(--e-ease-settle),
    background-color var(--e-dur-fast) var(--e-ease-out);
}
.e-form__field input:focus,
.e-form__field textarea:focus {
  box-shadow: inset 0 -2px 0 0 var(--e-accent);
}

.e-form__field .e-label {
  transition: color var(--e-dur-base) var(--e-ease-out), transform var(--e-dur-base) var(--e-ease-elastic);
  transform-origin: left;
}
.e-form__field:focus-within .e-label { color: var(--e-accent); transform: translateX(2px); }

/* --- Подтверждение отправки --------------------------------------------------------
   Разворачивается по высоте без замера в JS: 0fr -> 1fr.
   ---------------------------------------------------------------------------------- */

.e-form-sent {
  display: grid;
  grid-template-rows: 1fr;
  animation: e-unfold var(--e-dur-slow) var(--e-ease-settle) both;
}
.e-form-sent > * { min-height: 0; }

@keyframes e-unfold {
  from { grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); }
  to   { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
}

/* --- Раскрытия: FAQ, выпадающие меню, панель виджета --------------------------------
   Контейнеру ставится .e-disclosure, содержимому .e-disclosure__body.
   Открытое состояние - атрибут data-open="true" на контейнере.
   ----------------------------------------------------------------------------------- */

.e-disclosure__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--e-dur-base) var(--e-ease-swing),
    opacity var(--e-dur-fast) var(--e-ease-out);
}
.e-disclosure__body > * { overflow: hidden; min-height: 0; }

.e-disclosure[data-open="true"] .e-disclosure__body {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--e-dur-base) var(--e-ease-swing),
    opacity var(--e-dur-base) var(--e-ease-out) var(--e-delay-layer);
}

.e-disclosure__marker {
  transition: transform var(--e-dur-base) var(--e-ease-elastic);
}
.e-disclosure[data-open="true"] .e-disclosure__marker { transform: rotate(45deg); }

/* --- Панель плавающего виджета ------------------------------------------------------- */

.e-fab__panel {
  transform-origin: bottom right;
  animation: e-pop var(--e-dur-base) var(--e-ease-elastic) both;
}
@keyframes e-pop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.e-fab__toggle {
  transition:
    transform var(--e-dur-base) var(--e-ease-elastic),
    background-color var(--e-dur-fast) var(--e-ease-out),
    box-shadow var(--e-dur-slow) var(--e-ease-settle);
}
.e-fab__toggle:hover { transform: translateY(calc(var(--e-lift) * -1)); box-shadow: 0 10px 30px rgba(22, 19, 15, .24); }

/* --- Появление при прокрутке ------------------------------------------------------------
   Начальное состояние ставится только если работает JS: класс на <html>
   вешает инлайновый скрипт в шапке. Без JS содержимое видно сразу.
   --------------------------------------------------------------------------------------- */

.e-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--e-dur-reveal) var(--e-ease-settle),
    transform var(--e-dur-reveal) var(--e-ease-settle);
  transition-delay: calc(var(--e-i, 0) * var(--e-delay-layer));
}
.e-js [data-reveal].is-in { opacity: 1; transform: none; }

/* Надзаголовок секции прочерчивается: линейка растет слева, растр проявляется */
.e-js [data-reveal] .e-raster { opacity: 0; transition: opacity var(--e-dur-slow) var(--e-ease-out) var(--e-dur-base); }
.e-js [data-reveal].is-in .e-raster { opacity: 1; }