/* Главная: белый лист, логотип как знак, белые соты читаются только полем вокруг.
   Формулы --lw, --fs (в tokens.css), --pad, --gap те же, что в brandBlock (js/hexlayout.js):
   логотип стоит на месте и без скрипта, и когда скрипт включился. */

.home {
  --pad: clamp(10px, 1.8svh, 24px);
  --gap: max(4px, calc(var(--lw) * .016));
  --word-h: calc(var(--fs) * var(--type-word-lh));
  --logo-h: calc(var(--lw) * .18612);
  --stack-h: calc(2 * var(--word-h) + 2 * var(--gap) + var(--logo-h));
  --stack-top: calc(50svh - var(--stack-h) / 2); /* логотип с четырьмя словами в центре экрана */
  --logo-top: calc(var(--stack-top) + var(--word-h) + var(--gap));
  --low-words: calc(var(--logo-top) + var(--logo-h) + var(--gap));
  --stack-end: calc(var(--low-words) + var(--word-h));
  position: relative;
  height: 100svh; /* всегда один экран, и лёжа на телефоне: элементы ужимаются, а не уезжают */
  overflow: hidden;
  background: var(--paper);
}
.home__logo {
  position: absolute; z-index: 3;
  top: var(--logo-top);
  left: calc(50% - var(--lw) / 2);
  width: var(--lw);
  height: var(--logo-h);
  transition: transform var(--dur-mid) var(--ease-mid);
  pointer-events: none; /* нажимается сам знак, а не коробка заголовка */
}
.home__about { display: block; color: inherit; pointer-events: auto; }
/* Наведение: логотип со словами чуть выдвигается вперёд, как один предмет */
.home.is-forward .home__logo, .home.is-forward .home__word { transform: scale(1.04); }

.home__words { position: static; }
.home__word {
  transition: transform var(--dur-mid) var(--ease-mid);
  position: absolute; z-index: 3;
  font-family: var(--font-head);
  font-size: var(--fs);
  line-height: var(--type-word-lh);
  font-weight: var(--type-word-weight);
  letter-spacing: var(--type-word-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.home__word:nth-child(1), .home__word:nth-child(3) { left: calc(50% - var(--lw) / 2 + var(--lw) * .015); --origin-x: calc(var(--lw) * .485); }
.home__word:nth-child(2), .home__word:nth-child(4) { right: calc(50% - var(--lw) / 2 + var(--lw) * .015); --origin-x: calc(100% - var(--lw) * .485); }
.home__word:nth-child(1), .home__word:nth-child(2) { top: var(--stack-top); --origin-y: calc(var(--stack-h) / 2); }
.home__word:nth-child(3), .home__word:nth-child(4) { top: var(--low-words); --origin-y: calc(var(--word-h) - var(--stack-h) / 2); }
.home__word { transform-origin: var(--origin-x) var(--origin-y); }

.home__menu {
  position: absolute; z-index: 3;
  top: var(--stack-end);
  left: calc(50% - 22px);
  --icon-w: clamp(26px, calc(var(--lw) * .07), 40px);
}

/* Языки маленькой строкой справа от значка, значок остаётся по центру */
.home__langs {
  position: absolute; z-index: 3;
  top: var(--stack-end);
  left: calc(50% + 26px);
}

/* Фраза и телефон на главной только в простой странице: живой первый экран их не показывает */
.home__foot { display: none; }
.home__phrase { font-size: var(--type-lead-size); line-height: var(--type-lead-lh); text-wrap: balance; }
.home__tel {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Без скрипта: логотип, слова, ссылки на разделы и телефон читаются простым текстом */
.js-pending .home__field { visibility: hidden; }
/* Скрипт не сработал или поле упало: простой столбик в обычном потоке, ничто ни на что не наезжает,
   страница может прокручиваться. Пока модуль грузится, логотип уже в центре */
html:not(.js-pending) .home:not(.is-live) {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  padding: var(--pad) 0 24px;
}
html:not(.js-pending) .home:not(.is-live) :is(.home__logo, .home__word, .home__langs) { position: static; }
html:not(.js-pending) .home:not(.is-live) .home__logo { flex: none; }
html:not(.js-pending) .home:not(.is-live) .home__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; padding: 0 16px; }
html:not(.js-pending) .home:not(.is-live) .home__foot { display: block; padding: 0 16px; text-align: center; }
.route-other .home { display: none; }
.home:not(.is-live) .home__field {
  position: static;
  width: 100%;
  margin-top: 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px;
  padding: 0 16px;
  text-align: center;
}
.home:not(.is-live) .home__menu { display: none; }
.home:not(.is-live) .big { text-decoration: none; }
.home:not(.is-live) .big__pale { display: block; color: var(--pale); }
.home:not(.is-live) .big__word { display: block; font-size: var(--type-title-size); text-transform: uppercase; }

.home__field { position: absolute; inset: 0; z-index: 1; }
.home.is-live .home__field { pointer-events: none; }
.home__cells { position: absolute; inset: 0; display: block; z-index: 1; }

/* Большой контур дальнего слоя: под сотами, виден в просветах */
.hx-ghost { position: absolute; display: block; pointer-events: none; }
.hx-ghost svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hx-ghost polygon { fill: none; stroke: var(--t2); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---------- Мелкая сота: абсолютно плоская, один цвет, щель между соседями — белый шов ---------- */
.hx {
  position: absolute; display: block;
  pointer-events: none;
  text-decoration: none;
  outline: none;
  contain: layout style;
}
.hx__lift { position: absolute; inset: 0; display: block; scale: var(--k, 1); }
.hx__sheet, .hx__hit, .big__sheet, .big__hit, .big__plate { clip-path: var(--hex); }
.hx__sheet { position: absolute; inset: 0; display: block; }
.hx__hit {
  position: absolute; inset: 0; display: block;
  pointer-events: auto;
  cursor: pointer;
}
.hx--t0 .hx__sheet { background: var(--t0); }
.hx--t1 .hx__sheet { background: var(--t1); }
.hx--t2 .hx__sheet { background: var(--t2); }
.hx--t3 .hx__sheet { background: var(--t3); }
.hx--t4 .hx__sheet { background: var(--t4); }

.hx__photo {
  position: absolute; inset: 0; display: block;
  visibility: hidden;
  background: var(--t1);
}
.hx__photo canvas {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
}

/* Мягкая тень ближней соты: размытая копия формы чуть ниже самой соты. Сначала форма, потом размытие, иначе обрезка съест край */
.hx__shade {
  position: absolute; inset: 0; display: block;
  transform: translateY(calc(var(--r) * .12));
  filter: blur(calc(var(--r) * .14));
  opacity: .26;
  pointer-events: none;
}
.hx__shade-in { position: absolute; inset: 0; display: block; clip-path: var(--hex); background: var(--ink); }

/* Контур фокуса рисуем SVG: clip-path съедает outline */
.ring {
  position: absolute; inset: -5%;
  width: 110%; height: 110%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}
.ring polygon { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.hx:focus-visible { z-index: 2; }
.hx:focus-visible .ring, .big:focus-visible .ring { opacity: 1; }

/* ---------- Большая сота: оба рода слов одной гарнитурой, холст берёт её отсюда ---------- */
.big {
  position: relative; display: block;
  font-family: var(--font-head);
  text-decoration: none;
  outline: none;
  pointer-events: auto;
}
.home.is-live .big {
  position: absolute; z-index: 2;
  pointer-events: none;
}
/* Белая дырка: перекрывает угловые соты по прямой, рамки и тени нет */
.big__plate {
  position: absolute; inset: 0; display: block;
  background: var(--paper);
}
.big__lift {
  position: absolute;
  left: calc(50% - var(--face) * .8660254);
  top: calc(50% - var(--face));
  width: calc(var(--face) * 1.7320508);
  height: calc(var(--face) * 2);
  display: block;
  transition: transform var(--dur-mid) var(--ease-mid);
}
.big.is-hover .big__lift { transform: scale(1.03); }
.big__sheet {
  position: absolute; inset: 0; display: block;
  background: var(--paper);
}
.big__hit {
  position: absolute;
  left: calc(50% - var(--face) * .8660254);
  top: calc(50% - var(--face));
  width: calc(var(--face) * 1.7320508);
  height: calc(var(--face) * 2);
  display: block;
  pointer-events: auto;
  cursor: pointer;
}
.home.is-live .big__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--ink);
}
.big__word {
  display: block;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: var(--type-big-word-weight);
  letter-spacing: var(--type-big-word-track);
  line-height: var(--type-big-word-lh);
}
.home.is-live .big__word { font-size: var(--word); margin: calc(var(--word) * .12) 0; }
.big__pale { display: block; white-space: nowrap; text-transform: uppercase; color: var(--pale); font-weight: var(--type-big-pale-weight); }
.home.is-live .big__pale {
  font-size: var(--type-big-pale-size);
  line-height: var(--type-big-pale-lh);
}

/* ---------- Зелёная сота: единственный цвет интерфейса, своё движение в ритме --cycle-call ---------- */
.phone-cell {
  position: absolute; z-index: 2; display: block;
  pointer-events: none; /* нажимается только сама сота, а не углы её коробки */
  outline: none;
}
.phone-cell--corner {
  position: fixed; z-index: 9;
  right: var(--gut); bottom: clamp(14px, 3vh, 36px);
  width: clamp(56px, 8.4vh, 88px); aspect-ratio: 1 / 1.1547;
}
.phone-cell__lift {
  position: absolute; inset: 0; display: block;
  animation: phone-lift var(--cycle-call) var(--ease-long) infinite;
}
.phone-cell__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  clip-path: var(--hex);
  background: var(--call);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-short);
}
.phone-cell:hover .phone-cell__face { background: var(--call-deep); }
.phone-cell__icon { width: 42%; height: auto; fill: var(--paper); }
.phone-cell__wave {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: phone-wave var(--cycle-call) linear infinite;
}
/* Волна идёт изнутри к краю соты и там гаснет: за контур не выходит, на соседнюю не наезжает */
.phone-cell__wave polygon { fill: none; stroke: var(--paper); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.phone-cell:focus-visible .ring { opacity: 1; }
@keyframes phone-lift {
  0%, 34%, 100% { transform: none; }
  14% { transform: scale(1.03); }
}
@keyframes phone-wave {
  0% { transform: scale(.42); opacity: 0; }
  3% { opacity: .7; }
  40% { transform: scale(.96); opacity: 0; }
  100% { transform: scale(.96); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-cell__lift { animation: none; }
  .phone-cell__wave { display: none; }
  .phone-cell__face { transition: none; }
  .big__lift, .home__logo, .home__word { transition: none; }
  .big.is-hover .big__lift { transform: none; }
}

/* ---------- Живые соты на WebGL: холст под ссылками, ссылки остаются для наведения и клавиатуры ---------- */
.home__gl { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.home.is-gl :is(.hx__sheet, .big__sheet, .big__plate, .hx__shade, .hx-ghost) { visibility: hidden; }
/* Картинка на обороте несёт свою видимость, а поверх холста её быть не должно: оборот рисует холст */
.home.is-gl .hx__photo { visibility: hidden !important; }
.home__logo, .home__word, .home__menu, .home__langs, .phone-cell { transition-property: transform, opacity; }
/* Кадр волны без живого поля: под сотами, открывается вместе с фронтом */