/* =====================================================================
   KAIJU — мир, блок «Коллекция»: бесконечная канатка (js/world/world-lift.js, ad/REDESIGN-30.md).
   Секция закреплена (data-hold → world.js даёт --hold и класс is-held): .wl-hold высотой «закрепление + экран»
   держит sticky-сцену .wl-stage ровно на время закрепления, а отрицательный нижний отступ оставляет секции
   её собственную высоту (--adv + --hold), так что после закрепления сцена уезжает вместе с картиной 1:1.
   Слои сцены снизу вверх: топоним на снегу → холст вещей и троса → окклюдер станции → бирки-ссылки.
   ===================================================================== */
.ws-col {
  --wt-x: 35%;
  --wt-y: calc(var(--ph, 960px) * 0.295);
  --wt-rz: -4deg;
}

.wl-hold {
  position: relative;
  height: calc(var(--hold, 0px) + 100vh);
  height: calc(var(--hold, 0px) + 100lvh);
  margin-bottom: calc(var(--adv, 100vh) - 100vh);
  margin-bottom: calc(var(--adv, 100lvh) - 100lvh);
  pointer-events: none;
}

.wl-stage {
  --wl-fade: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* пока канатка видна, сцена ловит драг (компьютер) и тап (телефон) */
.wl-stage.is-live { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .wl-stage.is-live { cursor: grab; }
  .wl-stage.is-live.is-over { cursor: pointer; }
  .wl-stage.is-live.is-grabbing,
  .wl-stage.is-live.is-grabbing * { cursor: grabbing; }
}

/* слои в координатах куска картины (сдвиг до и после закрепления ставит скрипт) */
.wl-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}

.wl-pic .wt { z-index: 0; }

.wl-gl {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none; /* драг и тап ловит сама сцена — только в пределах блока */
  width: 100%;
  height: 100%;
  display: block;
}

/* окклюдер: крыша и фасад станции из той же картины — вещи выезжают из-под крыши */
.wl-front img {
  position: absolute;
  display: block;
  max-width: none;
}

/* ------------------------------ бирки ------------------------------ */
.wl-tags {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  opacity: var(--wl-fade);
  will-change: transform;
}

.wl-hang {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.2s;
}

.wl-hang.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}

/* нитка 1 px от плеча вешалки до петли бирки (длина и угол — scaleX/rotate из скрипта) */
.wl-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 1px;
  margin-top: -0.5px;
  background: #fff;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* бирка — кадр col-tags-<тон>: петля со шнурком сверху, рамка-линия; середина тянется под текст.
   Начало координат — верх шнурка (его тянет нитка), бирка висит под ним */
.wl-tag {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: max-content;
  min-width: 140px;
  max-width: 200px;
  margin-left: -70px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  border-style: solid;
  border-width: 94px 18px 18px;
  border-image: var(--tag) 128 26 26 fill / 94px 18px 18px stretch;
  padding: 2px 0 4px;
  color: var(--ink, #353535);
  text-decoration: none;
  transform-origin: 50% 0;
  pointer-events: auto;
  -webkit-user-drag: none;
}

.wl-tag-name {
  font: 600 15px/1.08 "Unbounded", "Montserrat", sans-serif;
  letter-spacing: 0;
  max-width: 164px;
}

.wl-tag-price {
  font: 400 13px/1.2 "Cousine", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.wl-tag-price.is-out { font-size: 12px; opacity: 0.86; }

/* «Смотреть каталог» — графитовая бирка на двух нитках под кольцом крепления */
.wl-cta {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 232px;
  height: 84px;
  margin-left: -116px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  padding: 4px 18px 0 58px;
  background: var(--tag) no-repeat 100% 50% / 122% auto;
  color: #fce8f1;
  font: 600 15px/1.1 "Unbounded", "Montserrat", sans-serif;
  text-decoration: none;
  transform-origin: 116px -26px;
  pointer-events: auto;
  -webkit-user-drag: none;
}

/* две нитки от кольца к верхнему краю бирки (кольцо — начало координат, 26 px над биркой) */
.wl-cta::before,
.wl-cta::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 116px;
  width: 1px;
  height: 75px;
  background: #fff;
  transform-origin: 50% 0;
  transform: rotate(69.6deg);
  pointer-events: none;
}

.wl-cta::after { transform: rotate(-69.6deg); }

.wl-tag:focus-visible,
.wl-cta:focus-visible {
  outline: 2px solid #9d302b;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .wl-tag,
  .wl-cta { transition: filter 0.16s ease; }
  .wl-tag:hover,
  .wl-cta:hover { filter: brightness(1.06); }
}

/* ------------------------------ телефон ------------------------------ */
@media (max-width: 767px) {
  .ws-col {
    --wt-x: 7%;
    --wt-y: calc(var(--ph, 585px) * 0.2);
    --wt-rz: -3deg;
  }
  .wl-tag {
    min-width: 128px;
    max-width: 176px;
    min-height: 140px;
    border-width: 86px 16px 16px;
    border-image-width: 86px 16px 16px;
  }
  .wl-tag-name { font-size: 14px; }
}

@media all {
  .wl-hang,
  .wl-hang.is-on { transition: none; }
}

/* 02.11 Safari: пока канатки нет на экране, её полноэкранный WebGL-слой не участвует в отрисовке */
.wl-stage:not(.is-near) .wl-gl { visibility: hidden; }