/* ---------- Шрифты (встроены в сайт) ---------- */
@font-face {
  font-family: "Abyssinica SIL";
  src: url("../fonts/AbyssinicaSIL-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Цвета кейса ----------
 * --bg (фон), --fg (текст и линии) и --invert (инверсия белого логотипа) задаются на <html>
 * из данных кейса (поля BG и FG в админке Keystatic).
 */

/* ---------- Геометрия (из макета Case) ---------- */
:root {
  --w: 607px;      /* ширина колонки с изображениями */
  --top: 45px;     /* отступ колонки сверху */
  --gap: 10px;
  --line: color-mix(in srgb, var(--fg) 30%, transparent);
}
@media (max-width: 1399px) { :root { --w: 520px; --top: 112px; } }
@media (max-width: 768px)  { :root { --w: min(520px, calc(100vw - 40px)); --top: 77px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg, #000); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: none; }

/* Клик по свободному фону закрывает кейс */
.backdrop { position: fixed; inset: 0; z-index: 0; cursor: pointer; }

/* ---------- Шапка ---------- */
.header { position: fixed; left: 0; top: 0; width: 100%; height: 0; z-index: 5; color: var(--fg); font-family: "Abyssinica SIL", Georgia, serif; }
.header__logo, .header__name, .header__contacts { position: absolute; overflow: hidden; }
.header__logo { left: 60px; top: 45px; width: 84px; height: 42px; }
.header__logo .hl { display: block; width: 84px; height: 42px; filter: invert(var(--invert, 0)); }
/* Две копии имени для ховера по логотипу (header-hover.js) */
.hn { position: relative; display: block; }
.hn__copy { display: block; }
.hn__copy + .hn__copy { position: absolute; left: 0; top: 0; }
.header__name { left: 160px; top: 71px; height: 21px; margin: 0; font-size: 16px; line-height: 21px; white-space: nowrap; }
.header__contacts { right: 60px; top: 71px; height: 21px; font-size: 16px; line-height: 21px; white-space: nowrap; }
@media (max-width: 1399px) {
  .header { height: calc(var(--top) - 10px); background: var(--bg); }
}
/* Мобильная шапка — с ширины 768px и уже */
@media (max-width: 768px) {
  .header__logo { left: 20px; top: 20px; width: 64px; height: 32px; }
  .header__logo .hl { width: 64px; height: 32px; }
  .header__name { left: 100px; top: 36px; }
  .header__contacts { right: 20px; top: 36px; }
}

/* ---------- Галерея ---------- */
.case { position: relative; z-index: 1; }
.gallery {
  list-style: none;
  margin: 0 auto;
  padding: var(--top) 0 45px;
  width: var(--w);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.gallery > li { margin: 0; }
.shot {
  aspect-ratio: 590 / 787;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Заголовок кейса, теги и описание ---------- */
.case-info { display: block; padding: 10px 0; }
.case-title { margin: 0; font: 700 29px/1.45 "Inter", sans-serif; text-transform: capitalize; }
.case-line { margin: 20px 0; border: 0; border-top: 1px solid var(--line); height: 0; }
.case-tags { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.case-desc { margin: 20px 0 0; font-size: 14px; line-height: 1.45; }
.case-line--end { display: block; }

@media (min-width: 1400px) {
  .case-info { display: contents; }
  .case-head, .case-desc { position: fixed; bottom: 60px; width: 296px; z-index: 2; }
  .case-head { left: 60px; }
  .case-desc { right: 60px; margin: 0; }
  .case-line--end { display: none; }
}

/* ---------- Обложка: общий элемент перехода ---------- */
.cover {
  position: fixed;
  left: 50%;
  top: var(--top);
  width: var(--w);
  aspect-ratio: 590 / 787;
  margin-left: calc(var(--w) / -2);
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.is-on { opacity: 1; view-transition-name: case-cover; }
.cover.is-on.is-fading { opacity: 0; view-transition-name: none; transition: opacity 0.5s ease; }

/* ---------- Появление контента после открытия ---------- */
.shot { opacity: 0; transition: opacity 0.6s ease; }
.case-head, .case-desc {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.case-desc { transition-delay: 0.12s; }
.is-ready .shot { opacity: 1; }
.is-ready .case-head, .is-ready .case-desc { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .shot, .case-head, .case-desc { transition: none; transform: none; }
}

/* ---------- Кнопка закрытия кейса (ButtonClose) ---------- */
/* Mobile=Off: 50×50, иконка 24. Mobile=On: 58×58 (padding 14), иконка 28 — включается по ховеру и на мобильном. */
.close {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 6;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  display: grid;
  place-items: center;
  border: 1px solid #fcfcfc;
  border-radius: 1000px;
  background: #fff;
  box-shadow: 0 8px 6.5px rgba(0, 0, 0, 0.13);
  view-transition-name: case-close;
  /* до открытия кейса кнопка спрятана под нижним краем экрана */
  transform: translateY(calc(100% + 40px));
  pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.15s linear, height 0.15s linear, margin-left 0.15s linear, bottom 0.15s linear;
  -webkit-tap-highlight-color: transparent;
}
.close__icon { grid-area: 1 / 1; transition: opacity 0.125s linear; }
.close__icon--off { width: 24px; height: 24px; opacity: 1; }
.close__icon--on  { width: 28px; height: 28px; opacity: 0; }

.is-ready .close { transform: none; pointer-events: auto; transition-delay: 0.35s, 0s, 0s, 0s, 0s; }

/* Ховер: переход в состояние Mobile=On */
@media (hover: hover) {
  .close:hover, .close:focus-visible { width: 58px; height: 58px; margin-left: -29px; bottom: 16px; }
  .close:hover .close__icon--off, .close:focus-visible .close__icon--off { opacity: 0; }
  .close:hover .close__icon--on,  .close:focus-visible .close__icon--on  { opacity: 1; }
}
/* Широкий макет (Case, Wide) и мобильный (Case, Mobile) — кнопка выше на 10 px */
@media (min-width: 1920px) { .close { bottom: 30px; } .close:hover, .close:focus-visible { bottom: 26px; } }
@media (max-width: 768px) {
  .close, .close:hover { width: 58px; height: 58px; margin-left: -29px; bottom: 30px; }
  .close__icon--off { opacity: 0 !important; }
  .close__icon--on  { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) { .close { transition: none; } }

/* ---------- Закрытие, шаг 1 (обратный порядок открытия) ----------
   Текст и кнопка уходят вниз с фейдом, лента изображений гаснет, обложка проявляется.
   Шаг 2 — переход на главную (View Transition: обложка возвращается в список). */
.is-closing .shot { opacity: 0; transition: opacity 0.5s ease; }
.is-closing .case-head,
.is-closing .case-desc,
.is-closing .close {
  opacity: 0;
  transform: translateY(48px);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.5, 0, 1, 1), transform 0.55s cubic-bezier(0.4, 0, 0.7, 0.6);
  transition-delay: 0s;
}
.is-closing .close { transform: translateY(calc(100% + 40px)); }
.is-closing .cover { opacity: 1; view-transition-name: case-cover; transition: opacity 0.5s ease; }

/* Активная зона ховера логотипа и имени (header-hover.js) */
html.hl-hot, html.hl-hot * { cursor: pointer; }