/* =====================================================================
   БРЕНДЫ v3 — ПРОТОТИП ?brands=a|b|c (27.09). Без параметра страница показывает прежний вариант B «Обложка» (.vm-houses).
   После выбора заказчика: лишние варианты удалить отсюда, из index.html и js/brands.js.
   Общее: тёмная #161615, имена #EDEDEA, вторичное #A3A39F (7,4:1), сумки — вырезки без подложки (assets/p/cut, tools/brands_cut.py).
   Движение: 1) маска от линии пола/строки 1250 мс при входе; 2) смена сумки (уход в линию 380 мс, подъём 900 мс); 3) наведение.
   ===================================================================== */
.vm-br { display: none; --ease-mask: cubic-bezier(.65, 0, .35, 1); --ease-sink: cubic-bezier(.65, 0, .35, 1); --t-mask: 1250ms; --t-up: 700ms; --t-swap: 380ms; }
html[data-brands="a"] .vm-br--a, html[data-brands="b"] .vm-br--b, html[data-brands="c"] .vm-br--c { display: flex; }
html[data-brands] .vm-houses { display: none; }
.vm-br .vm-grid > * { margin-right: 0; }
.vm-br .vm-grid { min-height: 0; }
.vm-br__h { grid-area: 1 / 1 / 2 / 2; color: var(--c-on-dark-2); }
.vm-br a { color: inherit; text-decoration: none; }
.vm-br img { display: block; }

/* ── A «Витрина» ─────────────────────────────────────────────────────────
   Сцена по всей ширине, ось сумки = ось экрана = центр C3 (сетка QUIET симметрична). Высота сцены --bag-h от экрана:
   1440×900 → 510 px. --s у вырезки — доля высоты сцены (узкая Gucci 1, широкая Celine .665), дно всех сумок на одной линии. */
.vm-bra { --bag-h: clamp(240px, calc(var(--screen) - 390px), 640px); grid-template-rows: auto 1fr auto; row-gap: var(--sp-32); }
.vm-bra__stage { grid-area: 2 / 1 / 3 / -1; align-self: center; display: grid; touch-action: pan-y; }
.vm-bra__item { grid-area: 1 / 1; display: grid; justify-items: center; row-gap: var(--sp-24); color: var(--c-on-dark); visibility: hidden; }
.vm-bra__item.is-on, .vm-bra__item.is-out { visibility: visible; }
.vm-bra__item.is-on { z-index: 1; }
.vm-bra__fig { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: var(--bag-h); }
.vm-bra__fig img { position: relative; height: calc(var(--bag-h) * var(--s)); width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.vm-bra__name { display: block; overflow: clip; padding: .12em 0 .06em; margin-top: -.12em; font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tr-display); white-space: nowrap; }
.vm-bra__name > span { display: block; }
.vm-bra__index { grid-area: 3 / 1 / 4 / -1; display: flex; justify-content: space-between; }
.vm-bra__index button { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body); letter-spacing: -.02em;
  color: var(--c-on-dark-2); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .3s var(--ease-out), transform .16s var(--ease-out); }
.vm-bra__index button:active { transform: scale(.97); }
.vm-bra__index button[aria-pressed="true"] { color: var(--c-on-dark-strong); }
@media (hover: hover) and (pointer: fine) {
  .vm-bra__index button:hover { color: var(--c-on-dark); }
  .vm-bra__item:hover .vm-bra__name { opacity: .7; }
}
.vm-bra__name { transition: opacity .3s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-bra__fig img { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-swap) var(--ease-sink); }
  .rv .vm-bra__name > span { transform: translateY(110%); transition: transform var(--t-swap) var(--ease-sink); }
  .rv .vm-bra.is-in .vm-bra__item.is-on img { clip-path: inset(0); transition: clip-path var(--t-up) var(--ease-mask) 120ms; }
  .rv .vm-bra.is-in .vm-bra__item.is-on .vm-bra__name > span { transform: none; transition: transform var(--t-up) var(--ease-mask) 200ms; }
  .rv .vm-bra.is-first .vm-bra__item.is-on img { transition-duration: var(--t-mask); transition-delay: 0ms; }
  .rv .vm-bra.is-first .vm-bra__item.is-on .vm-bra__name > span { transition-duration: var(--t-mask); transition-delay: 150ms; }
}
@media (prefers-reduced-motion: reduce) {
  .vm-bra__item { opacity: 0; transition: opacity 200ms ease-out; }
  .vm-bra__item.is-on { opacity: 1; }
}
@media (max-width: 767px) {
  .vm-bra { --bag-h: clamp(220px, 44svh, 420px); row-gap: var(--sp-24); }
  .vm-bra__index { flex-wrap: wrap; justify-content: flex-start; column-gap: var(--sp-16); }
  .vm-bra__index button { font-size: 15px; }
}

/* ── B «Натюрморт» ───────────────────────────────────────────────────────
   Три дома на одной линии пола, три масштаба: Gucci C2 во всю высоту, Prada C4 — .72, LV C1 — ширина колонки.
   C3 и C5 пустые — пауза. Имена кеглем h3 от левого края своей колонки. Остальные восемь — строкой L2–L6. */
.vm-brb { --floor-h: clamp(260px, calc(var(--screen) - 390px), 640px); grid-template-rows: auto 1fr auto; }
.vm-brb__it { grid-row: 2; align-self: end; display: grid; justify-items: start; row-gap: var(--sp-16); color: var(--c-on-dark); }
.vm-brb > .vm-brb__it { margin-right: var(--gut); }
.vm-brb__it--lv { grid-column: 1; }
.vm-brb__it--gucci { grid-column: 2; }
.vm-brb__it--prada { grid-column: 4; }
.vm-brb__fig { display: block; width: 100%; overflow: clip; }
.vm-brb__fig img { width: 100%; height: calc(var(--floor-h) * var(--k, 1)); object-fit: contain; object-position: 0 100%;
  transition: transform var(--t-hover) var(--ease-card); }
.vm-brb__it--gucci { --k: 1; }
.vm-brb__it--prada { --k: .72; }
.vm-brb__it--lv { --k: .34; }
.vm-brb__name { display: block; overflow: clip; font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--tr-h3); }
.vm-brb__name > span { display: block; }
.vm-brb__rest { grid-area: 3 / 2 / 4 / -1; display: flex; justify-content: space-between; margin: var(--sp-48) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-body); letter-spacing: -.02em; }
.vm-brb__rest a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-on-dark-2); transition: color .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .vm-brb__it:hover img { transform: translateY(-8px); }
  .vm-brb__rest a:hover { color: var(--c-on-dark-strong); }
}
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-brb__it[data-reveal] { opacity: 1; transform: none; }
  .rv .vm-brb__fig { -webkit-mask: linear-gradient(#000, #000) 0 100% / 101% 0% no-repeat; mask: linear-gradient(#000, #000) 0 100% / 101% 0% no-repeat; }
  .rv .vm-brb__it.is-in .vm-brb__fig { -webkit-mask-size: 101% 101%; mask-size: 101% 101%;
    transition: -webkit-mask-size var(--t-mask) var(--ease-mask) var(--d, 0ms), mask-size var(--t-mask) var(--ease-mask) var(--d, 0ms); }
  .rv .vm-brb__name > span { transform: translateY(110%); }
  .rv .vm-brb__it.is-in .vm-brb__name > span { transform: none; transition: transform var(--t-mask) var(--ease-mask) calc(var(--d, 0ms) + 200ms); }
}
/* телефон: общий сброс home.css (body .vm-sec .vm-grid > *:nth-child(n) → вся ширина) перебиваем той же формой селектора */
@media (max-width: 767px) {
  .vm-brb { --floor-h: 36svh; grid-template-rows: auto auto auto auto; row-gap: var(--sp-32); }
  body .vm-br .vm-brb > .vm-brb__it--gucci:nth-child(n) { grid-area: 2 / 1 / 3 / -1; }
  body .vm-br .vm-brb > .vm-brb__it--lv:nth-child(n) { grid-area: 3 / 1 / 4 / 2; margin-right: 10px; --k: .4; }
  body .vm-br .vm-brb > .vm-brb__it--prada:nth-child(n) { grid-area: 3 / 2 / 4 / 3; margin-left: 10px; --k: .4; }
  body .vm-br .vm-brb > .vm-brb__rest:nth-child(n) { grid-area: 4 / 1 / 5 / -1; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--sp-16); margin: 0; font-size: 15px; }
  body .vm-br .vm-brc > .vm-brc__list:nth-child(n) { grid-row: 3; }
}

/* ── C «Оглавление» ──────────────────────────────────────────────────────
   Одиннадцать домов сплошным набором L1–L6 у нижней линии (кегль 5,556vw: 80 px на 1440, 4 строки). Имена не переносятся внутри
   («Louis Vuitton», «Miu Miu» целиком), разделитель «/» серым в конце строки. Активная сумка стоит над набором на верхней линии
   заглавных первой строки, ось — центр наведённого имени (JS ставит --x/--y/--cap). По умолчанию Gucci. Пока курсор над набором, прочие имена серые. */
.vm-brc { --fs-c: clamp(40px, 5.556vw, 107px); --bag-h: clamp(180px, 50svh, 520px); position: relative; grid-template-rows: auto 1fr auto; }
.vm-brc__list { grid-area: 3 / 1 / 4 / -1; position: relative; margin: 0; padding: 0; list-style: none;
  font-weight: 400; font-size: var(--fs-c); line-height: .96; letter-spacing: var(--tr-display); color: var(--c-on-dark); }
.vm-brc__list li { display: inline-block; }   /* имя и его «/» — одно целое: разделитель не уходит в начало строки */
.vm-brc__list li:not(:last-child)::after { content: "/" / ""; padding-left: .12em; color: var(--c-on-dark-2); }
.vm-brc__list a { display: inline-block; vertical-align: top; overflow: clip; padding: .12em 0 .06em; margin-top: -.12em;   /* верх: точки Ï не срезаются маской */ transition: color .3s var(--ease-out); }
.vm-brc__list a > span { display: block; }
.vm-brc.is-hover .vm-brc__list li:not(.is-on) a { color: var(--c-on-dark-2); }
.vm-brc__pics { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vm-brc__pics img { position: absolute; left: var(--x, 0); top: var(--y, 0); height: min(calc(var(--bag-h) * var(--s)), var(--cap, 100vh)); width: auto; transform: translate(-50%, -100%); visibility: hidden; }
.vm-brc__pics img.is-on, .vm-brc__pics img.is-out { visibility: visible; }
.vm-brc__pics img.is-on { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-brc__pics img { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-swap) var(--ease-sink); }
  .rv .vm-brc.is-in .vm-brc__pics img.is-on { clip-path: inset(0); transition: clip-path var(--t-up) var(--ease-mask) 60ms; }
  .rv .vm-brc.is-first .vm-brc__pics img.is-on { transition-duration: var(--t-mask); transition-delay: 450ms; }
  .rv .vm-brc__list a > span { transform: translateY(110%); }
  .rv .vm-brc.is-in .vm-brc__list a > span { transform: none; transition: transform var(--t-mask) var(--ease-mask) var(--d, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .vm-brc__pics img { opacity: 0; transition: opacity 200ms ease-out; }
  .vm-brc__pics img.is-on { opacity: 1; }
}
@media (max-width: 767px) {
  .vm-brc { --fs-c: 40px; --bag-h: clamp(180px, 34svh, 320px); }
}