/* Экран победителей на поддомене gallery — вариант «Карусель» из макетов
   26.09.2026. Вертикальный монитор 1080×1920, как у киоска, и единица та же:
   1rem — один пиксель макета, подгонку под монитор делает одна строка в :root.

   Экран без касаний: на киоске сломался сенсор, и вместо витрины с
   голосованием на нём крутятся призёры. Текущий — в центре, соседи
   выглядывают по бокам и уезжают за край. */

@font-face { font-family: "Druk Wide Cyr"; src: url("/static/fonts/DrukWideCyr-Heavy.otf") format("opentype");
  font-weight: 900; font-display: block; }

:root {
  /* По меньшей стороне окна: на горизонтальном экране лист не раздует */
  font-size: min(calc(100vw / 1080), calc(100vh / 1920));
  --mint: #aaf4bf;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* Фон на всё окно, а лист по центру: на экране другой пропорции по краям
   остаётся тот же пейзаж, а не чёрные поля. Курсор прячем — трогать нечего */
body { display: flex; align-items: center; justify-content: center; cursor: none;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.82)),
    url("/static/design/hero.jpg") center / cover no-repeat #000;
  color: #fff; font: 900 1rem/1 "Druk Wide Cyr", "Arial Black", sans-serif;
  text-transform: uppercase; }

.stage { position: relative; flex: none; width: 1080rem; height: 1920rem; overflow: hidden; }
.mint { color: var(--mint); }

.title { position: absolute; left: 70rem; top: 96rem; z-index: 5; width: 940rem; margin: 0;
  font: inherit; font-size: 72rem; line-height: 80rem; letter-spacing: -2rem; }

/* Мятный росчерк с постеров — леттеринг Lamoda позади карусели */
.lettering { position: absolute; left: 690rem; top: 300rem; width: 420rem; height: 1450rem;
  opacity: .55; background: url("/static/design/decor_squiggle.svg") center / contain no-repeat; }

/* Все постеры одного размера, стоят в центре; место в карусели задаёт
   сдвиг и масштаб. По умолчанию постер ждёт за правым краем невидимым,
   с классом is-behind — за левым: так новые въезжают справа, а ушедшие
   уезжают влево. Двигаем transform — на мониторе это плавнее, чем left */
.slide { position: absolute; left: 230rem; top: 460rem; z-index: 1; width: 620rem; height: 872rem;
  overflow: hidden; background: #9b9b9b; opacity: 0;
  transform: translateX(1160rem) scale(.71);
  transition: transform .7s ease, opacity .7s ease; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.is-center { z-index: 3; opacity: 1; transform: none; }
.slide.is-right { z-index: 2; opacity: .35; transform: translateX(580rem) scale(.71); }
.slide.is-left { z-index: 2; opacity: .35; transform: translateX(-580rem) scale(.71); }
.slide.is-behind { transform: translateX(-1160rem) scale(.71); }

/* Место — мятная плашка в углу постера, как на киоске */
.badge { position: absolute; left: 0; top: 0; padding: 14rem 20rem 16rem;
  background: var(--mint); color: #000; }
.badge b { display: block; font-weight: inherit; font-size: 72rem; line-height: 64rem; }
.badge span { display: block; margin-top: 6rem; font-size: 18rem; line-height: 20rem; }

/* Подписи лежат стопкой и меняются растворением вместе с постером */
.caption { position: absolute; left: 70rem; top: 1372rem; width: 940rem; text-align: center;
  opacity: 0; transition: opacity .6s ease; }
.caption.is-on { opacity: 1; }
.caption-head { font-size: 56rem; line-height: 60rem; color: var(--mint); }
.caption-line { margin-top: 18rem; font-size: 34rem; line-height: 40rem; }
.caption-votes { margin-top: 10rem; font-size: 34rem; line-height: 40rem; color: var(--mint); }

.soon { position: absolute; left: 70rem; top: 860rem; width: 940rem; margin: 0; text-align: center;
  font-size: 56rem; line-height: 64rem; color: var(--mint); }

.brand { position: absolute; left: 260rem; bottom: 90rem; width: 560rem; }
.brand-name { display: block; width: 560rem; }
.brand-slogan { display: block; width: 280rem; margin: 10rem auto 0; }