/* ============================================================
   ГБС — лайтбокс (§4 дизайн-кода). Пара к public/js/lightbox.js.

   Жил в feed.css, пока просмотр был только на «Ленте». Подключается
   в layouts/app.blade.php, потому что лайтбокс общий для вьюх.
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
}
.lb[hidden] { display: none; }

.lb-stage {
  /* Точка отсчёта для слоя лиц: он кладётся по offsetLeft/Top картинки.
     z-index: 0 здесь обязателен — он замыкает шкалу слоя внутри сцены.
     Без него рамка лица (z-index: 2) всплыла бы над кнопками хрома. */
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lb-stage img,
.lb-stage video {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  transition: opacity var(--slow) var(--ease);
}
.lb-stage img { cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lb-stage img.is-zoomed { cursor: grab; }
.lb-stage img.is-panning { cursor: grabbing; transition: none; }

.lb-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--s6);
  color: var(--text-1);
}

.lb-chrome { transition: opacity var(--base) var(--ease); }
/* visibility, а не только opacity: прозрачная кнопка остаётся в обходе табом,
   и Tab уводил бы фокус на невидимый «Закрыть». */
.lb.is-idle .lb-chrome { opacity: 0; visibility: hidden; pointer-events: none; }

.lb-close,
.lb-nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, .08);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, .18); }
.lb-nav:disabled { opacity: .25; pointer-events: none; }

.lb-close { top: var(--s4); right: var(--s4); width: 40px; height: 40px; }
.lb-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.lb-prev { left: var(--s4); }
.lb-next { right: var(--s4); }

.lb-actions {
  position: fixed;
  top: var(--s4);
  left: var(--s4);
  display: flex;
  flex-wrap: wrap;
  /* Кнопок стало больше («Лица», «Отметить лицо»), и в один ряд они
     на узком экране не помещаются — переносим, а не режем. */
  max-width: calc(100vw - var(--s8) - var(--s5));
  gap: var(--s2);
}
.lb-act {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-ui);
  background: rgba(255, 255, 255, .08);
  color: var(--text-1);
  font-size: var(--t-meta);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lb-act:hover { background: rgba(255, 255, 255, .18); }
.lb-act-danger:hover { background: var(--alarm); color: var(--ground); }
.lb-act[aria-pressed="true"] svg { fill: currentColor; }

/* Подпись: отдельные элементы с отступом, не склейка через « · » (§6). */
.lb-caption {
  position: fixed;
  inset: auto 0 var(--s5) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
  padding: 0 var(--s5);
  color: var(--text-2);
  font-size: var(--t-meta);
  text-align: center;
  pointer-events: none;
}

/* ============================================================
   Телефон: лента кадров (§20)

   На сенсорном экране просмотр листается пальцем, а не стрелками в углах:
   те же прилипающие кадры во весь экран, что в «Рандоме» (§18). Стрелки
   в этом режиме скрыты — их работу делает смахивание.
   ============================================================ */

.lb-feed {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-feed::-webkit-scrollbar { display: none; }
.lb-feed[hidden] { display: none; }

.lbs {
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  /* Кадр показывается целиком или не показывается: пролистнуть два за раз
     одним махом здесь некуда — это лента, а не список. */
  scroll-snap-stop: always;
}

/* Подложка — тот же кадр, размытый и притушенный: /micro весит 4.5 КБ,
   поэтому появляется мгновенно и заодно держит экран, пока едет превью. */
.lbs-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-color: var(--void);
  filter: blur(32px) brightness(.45) saturate(.85);
  transform: scale(1.25);
}

.lbs-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Двойное касание лайкает — браузеру оно ни к чему (иначе зум). */
  touch-action: pan-y;
}

.lbs-img,
.lbs-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.lbs-img {
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.lbs-img.is-ready { opacity: 1; }

/* Сердце в центре кадра — ответ на двойное касание, и больше ничего. */
.lbs-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  color: var(--text-1);
  opacity: 0;
  pointer-events: none;
}
.lbs-burst svg { width: 100%; height: 100%; fill: currentColor; }
.lbs-burst.is-on { animation: lb-pop 620ms var(--ease); }

@keyframes lb-pop {
  0%   { opacity: 0; transform: scale(.4); }
  25%  { opacity: 1; transform: scale(1.08); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* Затемнение под подписью: она должна читаться и поверх снега на солнце.
   На большом экране его нет — там кадр не во весь экран. */
.lb-shade { display: none; }

@media (max-width: 768px) {
  .lb-nav { display: none; }

  /* Действия уезжают вниз, под кадр: сверху они лезли под крестик («Удалить»
     буквально ложилось на него), а большой палец держит низ экрана, а не
     верхний угол. Цель касания — 44 px, как требует §7. */
  .lb-actions {
    top: auto;
    left: var(--s3);
    right: var(--s3);
    bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    justify-content: center;
  }
  .lb-act { height: 44px; padding: 0 var(--s4); font-size: var(--t-body); }
  .lb-close { width: 44px; height: 44px; }

  .lb-shade {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, .86));
  }

  .lb-caption { bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 768px) {
  .lb-close, .lb-nav { background: rgba(255, 255, 255, .14); }
}