/* Слот сцены, запасной режим, заголовок, метки отделов и облачка реплик.
   Размеры в --u: 1 единица = 1 px на ширине 1920 и меньше на узких. */
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/Montserrat-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --u: min(calc(100vw / 1920), 1px);
  --c-ink: #1d1d1f;
  --c-accent: #23b386; /* цвет бренда: тот же, что BRAND в js/office/kit.js */
  --c-on-accent: #ffffff;
  --c-paper: #ffffff;
  --c-muted: #4b5563;
  --c-page: #ffffff;
}
html, body { margin: 0; background: var(--c-page); font: 16px/1.4 "Inter", system-ui, "Segoe UI", sans-serif; color: var(--c-ink); }

.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.stage__poster, .stage__canvas, .stage__zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__poster { z-index: 1; display: block; object-fit: cover; transition: opacity 400ms ease; }
.stage__canvas { z-index: 2; display: block; background: transparent; opacity: 0; }
.stage__zones { z-index: 3; pointer-events: none; }
/* пока сцена не запустилась, виден постер; запустилась — холст; не смогла — снова постер */
.stage.is-live .stage__poster { opacity: 0; }
.stage.is-live .stage__canvas { opacity: 1; }
.stage.is-fallback .stage__canvas { opacity: 0; }
.stage.is-fallback .stage__poster { opacity: 1; }

/* запасной режим: постер без подписей; ?bare — чистая сцена без текста (для постера и макета) */
.stage.is-fallback .stage__zones, .stage.is-fallback .bubble { display: none; }
.bare .hero-title, .bare .variants, .bare .stage__zones, .bare .bubble, .bare .stage::before { display: none; }

/* при наведении отдел приближается и уходит под заголовок: под текстом проявляется белая дымка */
.stage::before {
  position: absolute; z-index: 2; left: 0; top: 0; width: 62%; height: 46%; content: ""; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
  opacity: 0; transition: opacity 500ms ease;
}
.stage[data-active-zone]:not([data-active-zone=""])::before { opacity: 1; }

/* заголовок первого экрана — слева сверху, поверх сцены */
.hero-title {
  position: absolute; z-index: 4; left: calc(72 * var(--u)); top: calc(54 * var(--u)); margin: 0;
  font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 700;
  font-size: calc(70 * var(--u)); line-height: 1.02; letter-spacing: -0.03em; color: var(--c-ink);
  pointer-events: none;
}
.hero-title__brand { display: block; margin-top: calc(14 * var(--u)); font-size: calc(38 * var(--u)); letter-spacing: -0.02em; color: var(--c-accent); }
.variants { position: absolute; z-index: 5; right: calc(40 * var(--u)); top: calc(32 * var(--u)); display: flex; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); }
.variants a { padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: #f1f3f2; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.variants a[aria-current] { background: var(--c-ink); color: #fff; }

/* метка отдела: якорь (--x, --y, проценты слота) — низ плашки по центру */
.zone { position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); width: 0; height: 0; pointer-events: auto; text-decoration: none; }
.zone__pill {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: calc(9 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u));
  border-radius: 999px; background: var(--c-paper); color: var(--c-ink);
  font-family: "Montserrat", "Inter", system-ui, sans-serif; font-size: calc(17 * var(--u)); font-weight: 600; white-space: nowrap;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(16, 40, 30, 0.14), 0 0 0 1px rgba(16, 40, 30, 0.06);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.zone__pill::before { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--c-accent); content: ""; }
.zone.is-hover .zone__pill, .zone:focus-visible .zone__pill { background: var(--c-ink); color: #fff; transform: translate(-50%, -100%) scale(1.06); }
.zone:focus-visible { outline: none; }
.zone:focus-visible .zone__pill { box-shadow: 0 0 0 calc(3 * var(--u)) var(--c-paper), 0 0 0 calc(5 * var(--u)) var(--c-accent); }
/* этажи: плашка стоит слева от этажа на выносной линии */
.zone--left .zone__pill { transform: translate(calc(-100% - 46 * var(--u)), -50%); }
.zone--left.is-hover .zone__pill, .zone--left:focus-visible .zone__pill { transform: translate(calc(-100% - 46 * var(--u)), -50%) scale(1.06); }
.zone--left::after { position: absolute; right: 0; top: calc(-1 * var(--u)); width: calc(46 * var(--u)); height: calc(2 * var(--u)); background: var(--c-accent); content: ""; }

/* облачко реплики над человеком: якорь (--x, --y) — кончик хвостика */
.bubble {
  position: absolute; z-index: 3; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%);
  padding: calc(11 * var(--u)) calc(18 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--c-paper); color: var(--c-ink);
  font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.25; white-space: nowrap;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(16, 40, 30, 0.18));
  pointer-events: none; opacity: 0; visibility: hidden;
  transform: translate(calc(-28 * var(--u)), calc(-100% - 2 * var(--u))) scale(0.92); transform-origin: calc(28 * var(--u)) 100%;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.bubble.is-visible {
  opacity: 1; visibility: visible;
  transform: translate(calc(-28 * var(--u)), calc(-100% - 12 * var(--u)));
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s;
}
.bubble::after {
  position: absolute; top: calc(100% - 1 * var(--u)); left: calc(19 * var(--u));
  width: calc(18 * var(--u)); height: calc(10 * var(--u));
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); content: "";
}
/* второй собеседник: тёмное облачко, раскрыто влево */
.bubble--b { background: var(--c-ink); color: #fff; transform: translate(calc(-100% + 28 * var(--u)), calc(-100% - 2 * var(--u))) scale(0.92); transform-origin: calc(100% - 28 * var(--u)) 100%; }
.bubble--b.is-visible { transform: translate(calc(-100% + 28 * var(--u)), calc(-100% - 12 * var(--u))); }
.bubble--b::after { right: calc(19 * var(--u)); left: auto; }
.bubble__sub { display: none; }

@media (max-width: 767.98px) {
  /* на телефоне подписи и облачка мельчат: остаются заголовок и сцена, остальное — до своего макета */
  :root { --u: 1px; }
  .stage { aspect-ratio: 3 / 4; }
  .hero-title { left: 20px; top: 20px; font-size: 30px; }
  .hero-title__brand { margin-top: 8px; font-size: 18px; }
  .bubble, .variants { display: none; }
  .zone__pill { padding: 4px 8px 4px 6px; font-size: 10px; gap: 4px; }
  .zone__pill::before { width: 6px; height: 6px; }
  .stage--floors { aspect-ratio: 39 / 62; }
  .zone--left .zone__pill, .zone--left.is-hover .zone__pill { transform: translate(4px, -135%); }
  .zone--left::after { display: none; }
}