*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { --zoom: 1; background: var(--bg); }
body {
  min-height: calc(100vh / var(--zoom)); /* vh не учитывает zoom — делим, иначе под страницей пустота */
  background: var(--bg);
  color: var(--white);
  font-family: var(--f-verano);
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
button { cursor: pointer; }
p { white-space: normal; }

/* ---------- Layout ---------- */
.views { position: relative; }
.view {
  display: none;
  position: relative;
  width: 100%;
  height: var(--h);
  overflow: hidden;
}
.view.is-active { display: block; }
/* Оранжевый круг #FF4400 — разбавляет фиолетовые свечения, плавает так же, как они */
.view::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(100% - 400px); /* у правого края, за пределами контентной колонки: не просвечивает сквозь стеклянные плашки */
  top: 260px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 68, 0, 0.06) 0%, rgba(255, 68, 0, 0.02) 40%, transparent 70%); /* приглушён: только фон, не спорит с текстом и плашками */
  pointer-events: none;
  animation: glow-drift-b 22s ease-in-out -6s infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .view::before { animation: none; } }

/* Контентная колонка: в макете x = 273px (сайдбар 245 + 28), справа 40px, ширина 1127 при 1440 */
.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-w) + max(28px, (100% - var(--sidebar-w) - var(--content-max) - 12px) / 2));
  width: min(var(--content-max), calc(100% - var(--sidebar-w) - 68px));
}
.view .content > * { position: absolute; }

/* Фоны и свечения стоят в координатах кадра 1440px; на сверхшироких экранах кадр центрируется */
.glow { --fx: max(0px, (100% - 1440px) / 2); position: absolute; pointer-events: none; z-index: 0; }
.glow img { position: absolute; left: 0; top: 0; }

/* Фоновые свечения медленно «дышат» и плавают по кругу. alternate + ease-in-out даёт бесшовный цикл;
   разные длительности и задержки, чтобы круги не двигались синхронно. Фото и тёмные подложки не трогаем. */
.glow:not(.ab-hero):not(.ab-rect) {
  will-change: transform;
  animation: glow-drift-a var(--glow-dur, 16s) ease-in-out var(--glow-delay, 0s) infinite alternate;
}
.glow:nth-of-type(n+4):not(.ab-hero):not(.ab-rect) { --glow-delay: -8s; }
.glow:nth-of-type(2n):not(.ab-hero):not(.ab-rect) { --glow-dur: 20s; --glow-delay: -5s; animation-name: glow-drift-b; }
.glow:nth-of-type(3n):not(.ab-hero):not(.ab-rect) { --glow-dur: 24s; --glow-delay: -12s; }
@keyframes glow-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(90px, -60px) scale(1.04); }
  66%  { transform: translate(-45px, 75px) scale(0.97); }
  100% { transform: translate(60px, 40px) scale(1.02); }
}
@keyframes glow-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-80px, 55px) scale(0.97); }
  66%  { transform: translate(70px, 90px) scale(1.04); }
  100% { transform: translate(-40px, -60px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none !important; }
}
.view > .content { z-index: 1; }

/* Кадрирование картинок как в Figma: обёртка + img в процентах */
.crop { position: absolute; overflow: hidden; }
.crop > img { position: absolute; }
.flip-x { transform: scaleX(-1); }

/* ---------- Typography ---------- */
.t-crumb { font: 900 14px/normal var(--f-verano); letter-spacing: 0.7px; text-transform: uppercase; opacity: 0.5; --o: 0.5; white-space: nowrap; }
.t-title { font: 800 20px/normal var(--f-onest); letter-spacing: 1px; white-space: nowrap; }
.t-body { font: 400 18px/normal var(--f-verano); letter-spacing: 0.9px; }
.t-small { font: 400 14px/normal var(--f-verano); letter-spacing: 0.7px; }
.t-fet { font-family: var(--f-fet); font-weight: 400; color: var(--accent); }
.dim { opacity: 0.5; --o: 0.5; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh / var(--zoom));
  background: var(--sidebar-bg);
  overflow: hidden;
}
.sidebar__logo { position: absolute; left: 24px; top: 31px; display: block; width: 190px; height: 32px; }
.sidebar__mark { left: 0; top: 0; width: 51.692px; height: 27.077px; }
.sidebar__mark img { left: -26.19%; top: -28.33%; width: 147.62%; height: 156.66%; }
.sidebar__name { position: absolute; left: 58px; top: 0; font: 400 14px/normal var(--f-pirulen); letter-spacing: 0.7px; text-transform: uppercase; white-space: nowrap; }
.sidebar__tag { position: absolute; left: 58px; top: 18px; width: 126px; height: 11px; font-size: 10px; letter-spacing: 0.5px; opacity: 0.5; white-space: nowrap; }

.nav-group { position: absolute; left: 20px; right: 20px; display: flex; flex-direction: column; }
.nav-group--studio { top: 116px; gap: 17px; }
.nav-group--info { top: 384px; gap: 15px; }
.nav-group__label { font: 900 10px/normal var(--f-verano); letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.5; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 12px 18px;
  border-radius: 11px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
/* Отступ иконки слева = отступу сверху/снизу: (39 − 22) / 2 = 8.5px от внешнего края, минус обводка */
.nav-item { justify-content: flex-start; padding: 0 7.5px; }.nav-item__inner { display: flex; align-items: center; gap: 10px; }
/* Иконка в своей стеклянной плашке — отделена от подписи */
.nav-item__icon {
  position: relative; flex: none; width: 22px; height: 22px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 0.5px solid var(--glass-border);
  transition: background var(--t-hover), border-color var(--t-hover);
}
.nav-item.is-active .nav-item__icon { background: rgba(199, 112, 249, 0.15); border-color: var(--accent-border); }
.nav-item__icon img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity var(--t-hover), filter var(--t-hover); }
.nav-item__icon .is-on { opacity: 0; }
.nav-item__label { position: relative; top: 1.5px; /* прописные Verano Sans сидят выше центра строки — опускаем в центр кнопки */ font: 900 14px/normal var(--f-verano); letter-spacing: 0.7px; white-space: nowrap; opacity: 0.5; transition: opacity var(--t-hover), color var(--t-hover); }
.nav-item.is-active { background: var(--accent-tint); border: 0.5px solid var(--accent-border); }
.nav-item.is-active .nav-item__label { color: var(--accent); opacity: 1; }
.nav-item.is-active .is-on { opacity: 1; }
.nav-item.is-active .is-off { opacity: 0; }

/* Инфо-плашка: та же ширина и стекло, что у пунктов меню; без общей прозрачности — текст читается */
.sidebar__info {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 580px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.sidebar__info-title { display: flex; align-items: flex-start; gap: 9px; font: 400 13px/1.45 var(--f-verano); letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.85); }
.sidebar__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(199, 112, 249, 0.8); margin-top: 6.5px; }
.sidebar__info-meta { margin-top: 11px; padding: 10px 0 0 15px; /* 15 = точка 6 + отступ 9: текст встаёт по началу заголовка */border-top: 1px solid var(--glass-border); font: 400 12px/1.45 var(--f-verano); letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.5); }