/* sferaprint.ru — страница-указатель: прежнее имя компании → новое.
   Фон — шторка «до/после» с двумя фотографиями одного здания, поверх неё контент на плашках.
   Цвета, отступы и движение — из shared/css/tokens.css.

   Базовые стили — это страница без JS: виден новый фасад целиком, заголовок, кнопка.
   Шторку, ручку и подписи включает reveal.js (класс is-live), поэтому смысл страницы
   от скрипта не зависит. */

:root {
  /* Плашка: тёмная подложка под текст. Это --bg-deep с прозрачностью; блюр и линия — из токенов. */
  --plaque-bg: color-mix(in srgb, var(--bg-deep) 80%, transparent);
  --plaque-bg-solid: color-mix(in srgb, var(--bg-deep) 94%, transparent);
  --handle-size: 3.25rem;
  --handle-y: 22dvh; /* ручка в небе: плашки её не закрывают */
  /* Высота экрана без баннера cookie (--cookie-h пишет shared/js/consent.js). На узком экране
     вся вертикаль считается от неё, чтобы главное действие не уходило под баннер. */
  --avail: calc(100dvh - var(--cookie-h, 0px));
}

body {
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--bg);
}

/* ── Фон: шторка «до/после» ────────────────────────────────────────────────── */

.reveal {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  background: var(--bg-deep);
  /* Вертикальный жест пальца остаётся прокруткой страницы, горизонтальный — наш. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.reveal.is-live {
  cursor: ew-resize;
}

.reveal__after {
  position: absolute;
  inset: 0;
}

.reveal.is-live .reveal__after {
  will-change: clip-path;
}

.reveal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Обе фотографии с одного ракурса, поэтому одинаковая обрезка не сбивает совмещение. */
  object-position: 50% 60%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Разделитель: линия во всю высоту кадра с кружком на ней. Двигается только этот элемент —
   по единственному числу --line-x, которое пишет reveal.js. Кружок лежит внутри линии,
   поэтому отстать от неё не может, что бы ни случилось со стилями или порядком загрузки. */
.reveal__split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  display: none;
  background: var(--ink);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bg-deep) 60%, transparent);
  transform: translate3d(var(--line-x, 50vw), 0, 0);
  /* Жесты по фону принимает .reveal, линия их пропускает; кружок свои возвращает. */
  pointer-events: none;
}

.reveal.is-live .reveal__split {
  display: block;
}

.reveal__handle {
  position: absolute;
  top: var(--handle-y);
  left: 1px;
  display: none;
  pointer-events: auto;
  place-items: center;
  width: var(--handle-size);
  height: var(--handle-size);
  margin: calc(var(--handle-size) / -2) 0 0 calc(var(--handle-size) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--asp-navy);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-deep) 40%, transparent),
    0 6px 24px color-mix(in srgb, var(--bg-deep) 55%, transparent);
  cursor: grab;
  z-index: 1;
  touch-action: none;
  transition: scale var(--dur) var(--ease-out-quart);
}

.reveal.is-live .reveal__handle {
  display: grid;
}

.reveal.is-dragging .reveal__handle {
  scale: 1.08;
  cursor: grabbing;
}

.reveal__handle:focus-visible {
  outline: 3px solid var(--asp-teal-light);
  outline-offset: 4px;
}

/* Подписи в углах — каждая над своей половиной. Без JS их нет: там нет и шторки. */
.reveal__tag {
  position: absolute;
  top: var(--space-4);
  display: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  background: var(--plaque-bg);
  backdrop-filter: blur(var(--glass-blur));
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out-quart);
}

.reveal.is-live .reveal__tag {
  display: block;
}

.reveal__tag--before {
  left: var(--space-4);
}

.reveal__tag--after {
  right: var(--space-4);
}

.reveal__tag.is-faded {
  opacity: 0;
}

/* ── Раскладка и плашки ────────────────────────────────────────────────────── */

.pointer {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  min-height: 100dvh;
  /* Сверху — место под подписи и ручку. Снизу — высота баннера cookie: он фиксированный,
     а shared/js/consent.js публикует его высоту в --cookie-h (0px, когда баннера нет). */
  padding: var(--space-9) clamp(1rem, 4vw, 2.5rem) calc(var(--space-9) + var(--cookie-h, 0px));
  text-align: center;
  /* Всё, что не плашка, — это фото: оно должно принимать жесты. */
  pointer-events: none;
}

.plaque {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--plaque-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  pointer-events: auto;
}

@supports not (backdrop-filter: blur(1px)) {
  .plaque,
  .reveal__tag {
    background: var(--plaque-bg-solid);
  }
}

@media (max-width: 1199px) {
  /* Узкий экран: плашки не помещаются поверх здания, поэтому фото занимает верхние 40 % доступной
     высоты (экран без баннера cookie) и уходит в тень под плашкой. Рамка почти по пропорции
     кадра — здание видно целиком.
     Порог — 1200 px: в две колонки ниже этого правая колонка становится теснее 30rem, заголовок
     ломается на четыре строки, а кнопка — на две. */
  :root {
    --handle-y: calc(var(--avail) * 0.14);
  }

  .reveal {
    position: absolute;
    bottom: auto;
    height: calc(var(--avail) * 0.4);
    -webkit-mask-image: linear-gradient(#000 82%, transparent);
    mask-image: linear-gradient(#000 82%, transparent);
  }

  .pointer {
    justify-content: flex-start;
    padding-top: calc(var(--avail) * 0.36);
    min-height: var(--avail);
  }

  .plaque--main {
    padding: var(--space-4);
  }

  /* Логотип и интервалы внутри главной плашки — доли доступной высоты; без баннера значения
     упираются в потолки базовых правил. Селектор длиннее базового .plaque__logo, который
     стоит ниже в файле. */
  .plaque--main .plaque__logo {
    width: min(14rem, 60%, calc(var(--avail) * 0.3));
    margin-bottom: clamp(var(--space-2), calc(var(--avail) * 0.02), var(--space-4));
  }

  .plaque--main .title {
    margin-bottom: clamp(var(--space-2), calc(var(--avail) * 0.02), var(--space-4));
  }

  .plaque--main .lead {
    margin-bottom: clamp(var(--space-3), calc(var(--avail) * 0.03), var(--space-5));
  }
}

@media (min-width: 1200px) {
  /* Две колонки: слева шторка на всю высоту, справа информация на сплошном фоне страницы.
     Ширина колонки с фото — один токен, от него считаются и правая колонка, и подвал. */
  :root {
    /* Фото забирает 60 % ширины, но не настолько, чтобы колонка с текстом стала уже 30rem. */
    --photo-w: min(60vw, calc(100vw - 32rem));
  }

  body {
    background: var(--bg-deep);
  }

  /* Страница 404: шторки нет, колонка не жмётся к краю, а стоит по центру экрана. */
  /* Селектор двойной: ниже в этом же медиазапросе .pointer задаёт ширину и отступ
     под колонку с фото, а здесь их нужно перебить. */
  .pointer.pointer--solo {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    justify-content: center;
  }

  /* Фото — справа, информация — слева. */
  .reveal {
    left: auto;
    width: var(--photo-w);
  }

  .pointer {
    box-sizing: border-box;
    width: calc(100% - var(--photo-w));
    margin-right: var(--photo-w);
    /* Колонка стоит одним блоком от верха: логотип высоко, под ним обращение (заголовок,
       текст, кнопка, телефон), следом направления. Высоту между ними не растягиваем —
       свободное место остаётся внизу. */
    justify-content: flex-start;
    gap: var(--space-6);
    /* Сверху и снизу поровну (снизу ещё высота баннера cookie), чтобы центр был по видимой части. */
    padding: var(--space-7) clamp(1.5rem, 4vw, 4rem) calc(var(--space-7) + var(--cookie-h, 0px));
  }

  .plaque--main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Интервалы внутри групп задаёт gap, поэтому внешние отступы базовых правил обнуляем. */
  /* Логотип стоит отдельно от обращения: поверх gap — ещё один интервал, иначе заголовок
     читается как подпись к знаку. */
  .plaque--main .plaque__logo {
    margin-bottom: var(--space-6);
  }

  .plaque--main .plaque__head .lead {
    margin-bottom: 0;
  }

  .plaque--main .call {
    margin-top: var(--space-4);
  }

  /* Контент лежит на сплошном фоне, а не на фото: плашка с размытием и рамкой ему не нужна.
     Без неё контраст выше (текст на --bg-deep), а колонка спокойнее. Размытие остаётся только
     у подписей на фото. Блок направлений — второстепенный, ему оставляем тонкую рамку. */
  .plaque {
    max-width: 30rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .plaque.dirs {
    padding: var(--space-2);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-lg);
  }

  .foot {
    margin-right: var(--photo-w);
    margin-left: 0;
    max-width: calc(100% - var(--photo-w));
    background: none;
    backdrop-filter: none;
  }
}

@media (min-width: 1200px) and (max-height: 960px) {
  /* Невысокий экран (ноутбук 900 px) с баннером cookie: просторная раскладка не помещается,
     и карточки уехали бы под баннер. Сжимаем то, что не несёт смысла, — поля, промежутки
     и высоту фото; интервалы между группами остаются заметно больше обычных. */
  .pointer {
    gap: var(--space-5);
    padding-top: var(--space-5);
    padding-bottom: calc(var(--space-5) + var(--cookie-h, 0px));
  }

  .plaque--main {
    gap: var(--space-3);
  }
}

.plaque__logo {
  position: relative;
  display: block;
  width: min(14rem, 60%);
  /* Пропорции холста обоих логотипов (560×171): высота контейнера задана, цикл её не меняет. */
  aspect-ratio: 560 / 171;
  margin: 0 auto var(--space-4);
}

.plaque__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Без движения виден только новый логотип. */
.plaque__logo-img--old {
  opacity: 0;
}

/* Превращение: старый держится 2,5 с, переход 0,9 с, новый держится 3,5 с, переход обратно.
   Цикл 7,8 с: 2,5 → 32 %, 0,9 → 11,5 %, 3,5 → 45 %. Оба логотипа перетекают друг в друга
   перекрёстным затуханием с небольшим масштабом: уходящий чуть сжимается, приходящий
   садится на место с небольшого увеличения. */
@media (prefers-reduced-motion: no-preference) {
  .plaque__logo-img {
    animation: 7.8s ease-in-out infinite both;
    will-change: opacity, transform;
  }

  .plaque__logo-img--old {
    animation-name: logo-old;
  }

  .plaque__logo-img--new {
    animation-name: logo-new;
  }
}

/* Старый знак набран тоньше нового и на холсте выглядит легче, поэтому держим его
   чуть крупнее — так два логотипа читаются одного размера. */
@keyframes logo-old {
  0%, 32%    { opacity: 1; transform: scale(1.12); }
  43.5%, 88.5% { opacity: 0; transform: scale(1.05); }
  100%       { opacity: 1; transform: scale(1.12); }
}

@keyframes logo-new {
  0%, 32%    { opacity: 0; transform: scale(1.06); }
  43.5%, 88.5% { opacity: 1; transform: scale(1); }
  100%       { opacity: 0; transform: scale(1.06); }
}

/* ── Текст ─────────────────────────────────────────────────────────────────── */

.title {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.title__old {
  color: var(--ink-2);
}

.title__new {
  display: inline-block;
  color: var(--asp-teal-light);
}

.pointer .lead {
  margin: 0 auto var(--space-5);
  max-width: 34ch;
  color: var(--ink-2);
}

/* ── Главная кнопка ────────────────────────────────────────────────────────── */

.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3.75rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  /* Тот же синий, что у кнопок АСП: белый на нём — 4,9:1. Заметность набираем
     размером и свечением, а не светлым тоном, который не прошёл бы контраст. */
  background: var(--asp-blue-deep);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 18%), 0 10px 36px -6px var(--glow-blue);
  transition: background var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}

.go__host {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 16%);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.go__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease-out-quart);
}

.go:hover {
  background: var(--asp-navy-calm);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 30%), 0 12px 44px -4px var(--glow-teal);
}

.go:hover .go__arrow {
  transform: translateX(4px);
}

.go:active {
  transform: scale(0.98);
}

.go:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.call {
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-base);
}

/* Телефон и почта стоят в строку и переносятся вместе, если места мало. */
.call a + a {
  margin-left: var(--space-3);
}

.call a {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Направления: второстепенно по весу ────────────────────────────────────── */

.dirs {
  padding: var(--space-4);
}

.dirs__label {
  margin: 0 0 var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Четыре карточки в две колонки: фото невысокое (2:1), под ним название и домен. */
.dirs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dirs__list a {
  /* Карточка как на остальных сайтах: фото во всю ширину, под ним название и домен.
     Пропорция кадра постоянная — сюжет не сплющивается на низких экранах. */
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out-quart);
}

.dirs__list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dirs__name {
  display: block;
  padding: var(--space-2) var(--space-3) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dirs__host {
  display: block;
  padding: 0 var(--space-3) var(--space-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.dirs__list a:hover {
  border-color: var(--asp-teal);
}

/* ── Подвал и cookie ───────────────────────────────────────────────────────── */

.foot {
  position: relative;
  z-index: var(--z-raised);
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto var(--space-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--plaque-bg);
  backdrop-filter: blur(var(--glass-blur));
  text-align: center;
}

.foot__link {
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}

.foot__link:hover {
  color: var(--ink);
}

.cookie {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-toast);
  padding: var(--space-4) clamp(1rem, 4vw, 2.5rem);
  background: rgb(11 17 31 / 96%);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(var(--glass-blur));
  text-align: left;
}

.cookie[hidden] {
  display: none;
}

.cookie__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
}

.cookie__text {
  flex: 1 1 22rem;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.cookie__text a {
  color: var(--asp-teal-light);
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie__btn {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.cookie__btn:hover {
  border-color: var(--asp-teal);
}

.cookie__btn--main {
  border-color: transparent;
  background: var(--asp-blue-deep);
  color: #fff;
}

.cookie__btn--main:hover {
  background: var(--asp-navy-calm);
}

.cookie__btn--quiet {
  border-color: transparent;
  color: var(--ink-2);
}

.cookie__tune {
  max-width: var(--container);
  margin: var(--space-4) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.cookie__tune[hidden] {
  display: none;
}

.cookie__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

.cookie__row input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.cookie__note {
  margin: var(--space-3) 0;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

@media (max-width: 640px) {
  .go {
    width: 100%;
    max-width: 24rem;
    padding-inline: var(--space-5);
  }

  .cookie__actions .cookie__btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  /* Адрес дублирует надпись на кнопке и не помещается: оставляем стрелку. */
  .go__host {
    display: none;
  }
}

/* ── Без движения: без подсказки-жеста (в reveal.js) и без переходов ───────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal__handle,
  .reveal__tag,
  .go,
  .go__arrow {
    transition: none;
  }
}

/* ── Страница политики (PersonalData/) ─────────────────────────────────────── */

.doc__top {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-5) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.doc__logo img {
  display: block;
  width: 9rem;
  height: auto;
}

.doc__back {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.doc__back:hover {
  color: var(--asp-teal-light);
}

.doc__main {
  position: relative;
  z-index: var(--z-raised);
  max-width: 52rem;
  margin-inline: auto;
  /* Снизу запас под баннер cookie: он фиксированный. */
  padding: var(--space-6) clamp(1.25rem, 4vw, 2.5rem) var(--space-8);
}

.doc__title {
  margin-bottom: var(--space-6);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

.legal h2 {
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.legal p,
.legal li {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.legal p {
  margin: 0 0 var(--space-4);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.legal strong {
  color: var(--ink);
}

.legal a {
  color: var(--asp-teal-light);
}

.legal__center {
  text-align: center;
}

.legal__right {
  text-align: right;
}

.legal__table {
  margin: 0 0 var(--space-5);
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal th,
.legal td {
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}

.legal th {
  color: var(--ink);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
}

/* Подвал страницы-указателя: ссылка на политику стоит рядом с кнопкой cookie. */
a.foot__link[aria-current] {
  text-decoration: none;
}