/* ══════════════════════════════════════
   SHOWCASE — герой: сцена з платформами + док
   ══════════════════════════════════════
   Підключати ПІСЛЯ layout.css. */

/* ══════════════════════════════════════
   SHOWCASE — All products on one screen
   ══════════════════════════════════════ */
.showcase {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Було img/vignette.png — 1.09 МБ РАСТРА заради двоколірного градієнта
     (заміри: суцільна альфа 255, сусідні пікселі різняться на 0.25, тобто
     ані прозорості, ані зерна). Еліпс затемнення від нижнього центру
     відтворено стопами: 0 байт замість найважчого файлу сторінки. */
  background: radial-gradient(
    ellipse 50% 88% at 50% 100%,
    #121111 0%,
    #171616 29%,
    #1b1a1a 43%,
    #1f1e1e 57%,
    #242323 71%,
    var(--c-surface) 100%
  );
}

/* Сцена забирає всю вільну висоту, док — рівно стільки, скільки треба тексту.
   min-height не дає сцені схлопнутись у нуль на низьких екранах. */
.showcase__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  /* Зазор між низом активної платформи й доком. Читає carousel.js. */
  --platform-gap: 60px;
  /* Розміри активної платформи ОДНИМ джерелом: CSS застосовує, JS читає,
     щоб порахувати вісь до перемикання й не смикати картинки після нього. */
  --active-w: 55%;
  --active-max-w: 750px;
}

/* Large background text */
.showcase__bg-text {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 8px;
  text-transform: uppercase;
  z-index: 0;
  transition: opacity 0.4s;
}

/* ══ Product items — always visible ══ */
.showcase__item {
  position: absolute;
  display: flex;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0.5);
}

/* Клас вішає carousel.js після першого заміру осі: доти позиція ще
   попередня, і перехід до неї читався б як стрибок при завантаженні. */
.showcase:not(.showcase--ready) .showcase__item {
  transition: none;
}

/* Коробка .showcase__item має ВИЗНАЧЕНУ висоту (% від сцени) — інакше
   обмежити висоту картинки нічим: на низькому екрані вона вилазила у док.
   Саме зображення — auto + max-* у відсотках коробки: як replaced-елемент
   воно зменшується зі збереженням пропорцій, без letterbox. */
/* <picture> — лише обгортка для <source>; display: contents прибирає її з
   розкладки, щоб flex-елементом лишалось саме зображення і правила нижче
   рахувались від .showcase__item, а не від інлайнового picture. */
.showcase__item picture {
  display: contents;
}

.showcase__item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--platform-max-h, 100%);
  object-fit: contain;
  pointer-events: none;
}

/* ── Active product — center foreground ── */
.showcase__item--active {
  z-index: 5;
  cursor: default;
  /* Активна платформа не клікабельна (cursor: default), а її коробка тепер
     широка — без цього вона перехоплювала б кліки по сусідніх платформах. */
  pointer-events: none;
  /* Тінь під платформою — filter, а не ::after: filter йде за силуетом
     зображення і не від'їжджає, коли висота картинки впирається в ліміт. */
  filter: drop-shadow(0 0 9px rgba(160, 160, 160, 0.15))
          drop-shadow(0 0 2px rgba(160, 160, 160, 0.1))
          drop-shadow(0 14px 12px rgba(0, 0, 0, 0.45));
}

/* ── Inactive hover ── */
.showcase__item:not(.showcase__item--active):hover {
  filter: brightness(0.75);
}

/* ── Home positions: active = center, inactive = fixed spots ── */

/* УСІ платформи позиціонуються ОДНАКОВО: центр коробки на спільній осі
   --platform-axis, горизонталь через left. Різняться лише left і ширина —
   саме це дає рух ПО ПРЯМІЙ.

   Раніше активна була прижата до низу коробки на всю висоту сцени, а
   неактивна центрована через top. Під час перемикання одночасно
   інтерполювались top, bottom, padding-bottom і сам transform, тож
   траєкторія виходила дугою.

   Вісь і стелю висоти рахує carousel.js: вісь ставиться так, щоб низ
   активної платформи був рівно на --platform-gap вище за док. */
.showcase__item {
  top: var(--platform-axis, 50%);
  height: auto;
  align-items: center;
  transform: translate(-50%, -50%);
}

.showcase__item--active {
  left: 50%;
  width: var(--active-w);
  max-width: var(--active-max-w);
}

.showcase__item:not(.showcase__item--active) {
  width: 22%;
  max-width: 320px;
}

/* Product 1 (GORA) */
.showcase__item[data-index="0"]:not(.showcase__item--active) {
  left: 25%;
  transform: translate(-50%, -50%);
}

/* Product 2 (VALKYRIE) */
.showcase__item[data-index="1"]:not(.showcase__item--active) {
  left: 75%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* Product 3 (future) */
.showcase__item[data-index="2"]:not(.showcase__item--active) {
  top: 25%;
  left: 8%;
  transform: translate(0, -50%);
}

/* ══ Info panels — бічні спец-картки ══
   Анкеряться до низу ГЕРОЯ (inset: 0 від .showcase), а не до сцени: картки
   мають стояти врівень з плашкою опису й обрамляти її. Всередині сцени вони
   злітали на її нижній край — у середину екрана. */
.showcase__info {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 6;
}

.showcase__info--active {
  opacity: 1;
}

/* Spec cards */
.showcase__specs {
  position: absolute;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}

.showcase__specs--left { left: 40px; }
.showcase__specs--right { right: 40px; }

.showcase__spec-card {
  background: #ffb700;
  color: #0f0f0f;
  border-radius: 12px;
  padding: 14px 20px;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.showcase__spec-val {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: #0f0f0f;
  line-height: 1.2;
}

.showcase__spec-key {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-surface);
  margin-top: 4px;
}

/* ══ Док — назва, перемикачі, опис. Звичайний потік ══ */
.showcase__dock {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px 15px;
}

/* Обидві платформи лежать в ОДНІЙ клітинці грида: висоту задає більша з них,
   перемикання не смикає розкладку, кросфейд лишається як був. */
.showcase__labels,
.showcase__descs {
  display: grid;
  width: 100%;
  justify-items: center;
  /* align-items: end — щоб коротша плашка НЕ розтягувалась під вищу.
     Без цього опис GORA займав 214px при своїх 157: 57px порожнечі всередині
     бурштинової плашки. Тепер зайва висота лишається прозорою над нею. */
  align-items: end;
}

.showcase__labels > *,
.showcase__descs > * {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.showcase__label--active,
.showcase__desc-box--active {
  opacity: 1;
  pointer-events: auto;
}

/* Label */
.showcase__label {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
}

/* Статус платформи прямо в назві: окремим рядком він роздував док і тягнув
   за собою всю композицію вгору. Тут — той самий рядок, нуль зайвої висоти. */
.showcase__label-status {
  margin-left: 12px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 205, 0, 0.45);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-accent);
  vertical-align: middle;
  white-space: nowrap;
}

/* Description box */
.showcase__desc-box {
  background: #ffb700;
  color: #0f0f0f;
  border-radius: 12px;
  padding: 16px 24px;
  max-width: 780px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.showcase__desc-title {
  font-family: var(--font-display);
  font-size: 15.4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 8px;
  position: relative;
}

.showcase__desc-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0f0f0f 30%, #0f0f0f 70%, transparent);
}

/* Дисплейний шрифт — свідоме рішення дизайну героя, повернуто після заміни
   на Inter: у макеті опис платформи набраний саме ним. */
.showcase__desc-text {
  font-family: var(--font-display);
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--c-surface);
}

/* Dots */
.showcase__dots {
  display: flex;
  gap: 8px; /* мінімальний проміжок між сусідніми тач-цілями */
  /* Кнопки лишаються 44x44 для пальця, але в РОЗКЛАДЦІ займають ~10px, як на
     релізі. Інакше ряд крапок з'їдав 34px висоти дока, а разом з ним і платформа
     піднімалась вище за релізну. Від'ємні поля не чіпають область натискання:
     вона рахується від намальованої коробки, а не від внеску в потік. */
  margin-top: -17px;
  margin-bottom: -17px;
}

/* Кнопка 44×44 з крапкою 12px усередині: візуально та сама крапка, але
   тач-ціль відповідає мінімуму (було 10×10 — промах на дотик гарантований). */
.showcase__dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.showcase__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--c-muted);
  background: transparent;
  transition: background var(--transition), border-color var(--transition);
}

.showcase__dot:hover::before { border-color: var(--c-accent); }

.showcase__dot.active::before {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Scroll hint */
.showcase__scroll-hint {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: var(--c-muted);
  opacity: 0.5;
  animation: bounceDown 2s infinite;
  z-index: 3;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Showcase на вузьких екранах ── */
@media (max-width: 768px) {
  .showcase__specs { display: none; }

  /* Зазор між платформою і доком: на вузькому екрані висоти обмаль */
  .showcase__stage { --platform-gap: 20px; }

  /* Активна платформа була ~190px завширшки і 100px заввишки —
     герой переставав бути героєм. */
  .showcase__stage { --active-w: 78%; }

  .showcase__item:not(.showcase__item--active) {
    width: 20%;
    max-width: 160px;
  }

  .showcase__label {
    font-size: 18px;
    letter-spacing: 4px;
  }

  .showcase__dock {
    gap: 8px;
    padding: 0 12px 12px;
  }

  .showcase__desc-box {
    padding: 12px 16px;
  }

  .showcase__desc-title { font-size: 13px; }

  .showcase__desc-text {
    font-size: 12.5px;
    line-height: 1.5;
  }
}