/* ===== ЭКРАН 2 — БРЕНДЫ =====
   Макет 1440 × 900 (сетка Тильды 1200 + поля по 120), масштабируется под ширину окна.
   Координаты — в единицах макета: calc(N * var(--v)). При окне 1440 px совпадает с Тильдой пиксель в пиксель. */

.brands {
  /* — настройки — */
  --logo-hover: 1.12;     /* увеличение логотипа при наведении */

  container-type: inline-size;
  position: relative;
  z-index: 1;              /* выше экрана 3: банка с мозгом проходит за логотипами */
  overflow: hidden;
  background: transparent; /* фон страницы тот же — так банку видно за логотипами */
}

.brands__stage {
  --v: calc(100cqw / 1440);
  --u: var(--v); /* курсор и выделение из интро считают размеры в --u */
  position: relative;
  height: calc(900 * var(--v));
}

.brands__stage > *,
.brands__logos > li {
  position: absolute;
  left: calc(var(--x) * var(--v));
  top: calc(var(--y) * var(--v));
  width: calc(var(--w) * var(--v));
  margin: 0;
}

/* гифка с телевизором: наклон −15° и медленное «падение» при скролле (js/parallax.js) */
.brands__tv {
  --x: 6; --y: -38; --w: 534;  /* в Тильде y: 17 — подняли, чтобы не наезжал на подпись */
  height: calc(449 * var(--v));
  object-fit: cover;
  rotate: -15deg;
  translate: 0 var(--ty, 0px); /* «падение» при скролле — js/parallax.js */
  will-change: translate;
}

/* заголовок «Придумываю / Собираю / Реализую» */
.brands__title { --x: 607; --y: 131; --w: 813; height: calc(375 * var(--v)); }
.brands__title img { width: 100%; height: 100%; object-fit: cover; }

.brands__label {
  --x: 46; --y: 553; --w: 400;
  font-weight: 300;
  font-size: calc(20 * var(--v));
  line-height: calc(31 * var(--v));
  color: #C0BFBF;
  white-space: nowrap;
}

/* логотипы: два ряда, позиции — из разметки (--x, --y, --w, --h) */
.brands__logos {
  --x: 0; --y: 0; --w: 1440;
  height: 100%;
  padding: 0;
  list-style: none;
}
.brands__logos > li { height: calc(var(--h) * var(--v)); }
.brands__logos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.2s ease;
}
.brands__logos li:hover img { scale: var(--logo-hover); }

/* подсказка при наведении — как комментарий в Figma */
.brands__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--v));
  padding: calc(7 * var(--v)) calc(12 * var(--v)) calc(7 * var(--v)) calc(8 * var(--v));
  border-radius: calc(12 * var(--v)) calc(12 * var(--v)) calc(12 * var(--v)) calc(3 * var(--v));
  background: rgba(30, 28, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(8 * var(--v)) calc(24 * var(--v)) rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 300;
  font-size: calc(12 * var(--v));
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  translate: -50% calc(6 * var(--v));
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.25s cubic-bezier(.2,.9,.1,1);
  z-index: 2;
}
/* «аватар» автора комментария */
.brands__tip::before {
  content: "";
  flex: none;
  width: calc(14 * var(--v));
  height: calc(14 * var(--v));
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue));
}
.brands__logos li:hover .brands__tip { opacity: 1; translate: -50% 0; }

/* крайние логотипы — подсказка не вылезает за экран */
.brands__tip--start { left: 0; translate: 0 calc(6 * var(--v)); }
.brands__logos li:hover .brands__tip--start { translate: 0 0; }
.brands__tip--end { left: auto; right: 0; translate: 0 calc(6 * var(--v)); }
.brands__logos li:hover .brands__tip--end { translate: 0 0; }

/* ===== ЗАХОД КУРСОРА: слои с логотипами (js/brands.js) ===== */
/* до того как курсор включит слои — логотипов не видно */
.brands.is-pending .brands__logos li { opacity: 0; }
/* последний логотип первого ряда стоит чуть криво — курсор его подравняет */
.brands.is-pending .brands__logos li.is-crooked { transform: translate(calc(5 * var(--v)), calc(-4 * var(--v))); }

/* панель слоёв как в Фотошопе */
.layers {
  --x: 430; --y: 392; --w: 262;
  padding-bottom: calc(6 * var(--v));
  border-radius: calc(7 * var(--v));
  background: #2b2a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 calc(18 * var(--v)) calc(50 * var(--v)) rgba(0, 0, 0, 0.6);
  color: #dcdcdc;
  font-weight: 300;
  font-size: calc(10.5 * var(--v));
  line-height: 1;
  opacity: 0;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 5;
}
.layers__head {
  display: flex;
  justify-content: space-between;
  padding: calc(9 * var(--v)) calc(10 * var(--v));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 400;
}
.layers__dim { color: #8a898f; font-weight: 300; }
.layers__row {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--v));
  height: calc(25 * var(--v));
  padding: 0 calc(10 * var(--v));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.layers__row--sub { padding-left: calc(28 * var(--v)); }
.layers__row.is-picked { background: rgba(13, 153, 255, 0.28); }

/* «глаз» видимости: пустой квадрат — слой скрыт */
.layers__eye {
  flex: none;
  width: calc(14 * var(--v));
  height: calc(10 * var(--v));
  border-radius: calc(2 * var(--v));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.layers__eye.is-on {
  box-shadow: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 1C6.5 1 2.5 5 1 8c1.5 3 5.5 7 11 7s9.5-4 11-7c-1.5-3-5.5-7-11-7z' fill='none' stroke='%23e6e6e6' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='8' r='3.4' fill='%23e6e6e6'/%3E%3C/svg%3E");
}
.layers__caret { color: #8a898f; font-weight: 400; width: calc(7 * var(--v)); }
.layers__folder {
  width: calc(13 * var(--v));
  height: calc(10 * var(--v));
  border-radius: calc(2 * var(--v));
  background: #6f6e75;
}
.layers__type {
  width: calc(13 * var(--v));
  text-align: center;
  font-weight: 700;
  color: #bdbdbd;
}
.layers__thumb {
  width: calc(16 * var(--v));
  height: calc(11 * var(--v));
  border-radius: calc(1.5 * var(--v));
  background: linear-gradient(90deg, #E755AE, #36DDFF);
}
.layers__thumb--tv { background: linear-gradient(135deg, #b46cff, #ff7bd5); }

/* розовая направляющая выравнивания, как «умные направляющие» в Figma */
.brands__guide {
  --x: 10; --y: 683; --w: 1420;
  height: 1px;
  background: var(--pink);
  box-shadow: 0 0 calc(4 * var(--v)) rgba(231, 85, 174, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}