/* ============================================================
   OUTFITS BLOCK — скрол-блок «одяг залипає на моделі»
   Усі класи з префіксом .ob__ — не конфліктують зі стилями сайту.
   Всі налаштування — CSS-змінні на кореневому .ob (не в :root).
   ============================================================ */

.ob{
  /* ── НАЛАШТУВАННЯ ─────────────────────────────────────────── */
  --ob-bg:        #ffffff;  /* фон блоку                         */
  --ob-model-h:   84vh;     /* висота моделі (задає масштаб усього) */
  --ob-shift:     0px;      /* зсув моделі та одягу вниз від центру сцени */
  --ob-slot:      46;       /* відстань між луками, у vw (без одиниць) */
  --ob-scroll:    500vh;    /* довжина скролу: більше = плавніша зміна */

  position: relative;
  height: var(--ob-scroll);
  background: var(--ob-bg);
}

/* Липка сцена. ВАЖЛИВО: жоден батьківський елемент не повинен мати
   overflow:hidden/auto або transform/filter — це ламає position:sticky. */
.ob__stage{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Модель — по центру, під одягом */
.ob__model{
  position: absolute;
  left: 50%;
  top: calc(50% + var(--ob-shift));
  transform: translate(-50%, -50%);
  height: var(--ob-model-h);
  width: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Два ряди, що їдуть НАЗУСТРІЧ ────────────────────────────
   tops: рамка ліворуч від центру, звичайний порядок → їде ВЛІВО
   bottoms: рамка праворуч, row-reverse              → їде ВПРАВО  */
.ob__row{
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.ob__row--tops{
  left: calc(50% - var(--ob-slot) * 0.5vw);
  z-index: 4;
}
.ob__row--bottoms{
  right: calc(50% - var(--ob-slot) * 0.5vw);
  z-index: 3;
  flex-direction: row-reverse;
}

.ob__cell{
  position: relative;
  width: calc(var(--ob-slot) * 1vw);
  height: 100%;
  flex: 0 0 auto;
}
.ob__item{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

/* ── РОЗМІРИ ОДЯГУ ───────────────────────────────────────────
   Числа — частки ВИСОТИ МОДЕЛІ, заміряні по її тілу
   (плечі 0.19 / груди 0.30 / стегна 0.47 / щиколотки 0.94).

   Формула для нової речі:
     height : calc(var(--ob-model-h) * <висота_речі>)
     top    : calc(50% - var(--ob-model-h) * 0.5 + var(--ob-model-h) * <верх_речі>)

   Завдяки цьому все масштабується разом із --ob-model-h.        */

.ob__item--jacket{  /* кропнутий жакет: комір біля шиї */
  width:  calc(var(--ob-model-h) * 0.280);
  height: calc(var(--ob-model-h) * 0.361);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.140);
}
.ob__item--blouse{  /* блуза з бантом, оверсайз */
  width:  calc(var(--ob-model-h) * 0.335);
  height: calc(var(--ob-model-h) * 0.393);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.118);
}
.ob__item--sweater{ /* светр зі спущеним плечем */
  width:  calc(var(--ob-model-h) * 0.330);
  height: calc(var(--ob-model-h) * 0.378);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.140);
}
.ob__item--olive{   /* широкі штани з поясом: талія → підлога */
  width:  calc(var(--ob-model-h) * 0.285);
  height: calc(var(--ob-model-h) * 0.585);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.385);
}
.ob__item--shorts{  /* шорти-бермуди карго: талія → під коліно */
  width:  calc(var(--ob-model-h) * 0.294);
  height: calc(var(--ob-model-h) * 0.455);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.385);
}
.ob__item--red{     /* червоні джинси wide-leg */
  width:  calc(var(--ob-model-h) * 0.250);
  height: calc(var(--ob-model-h) * 0.600);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.380);
}
.ob__item--skirt{   /* спідниця-олівець: талія → коліно */
  width:  calc(var(--ob-model-h) * 0.236);
  height: calc(var(--ob-model-h) * 0.320);
  top:    calc(50% + var(--ob-shift) - var(--ob-model-h) * 0.5 + var(--ob-model-h) * 0.383);
}

/* Мобільні: модель менша, речі стоять ближче одна до одної */
@media (max-width: 768px){
  .ob{ --ob-model-h: 62vh; --ob-slot: 78; }
}

/* Доступність: без анімації показуємо перший лук статично */
@media (prefers-reduced-motion: reduce){
  .ob{ height: 100vh; }
}