/* ============================================================
   Галерея изображений (телефон и десктоп)
   Тап по картинке открывает её поверх страницы. Масштаб живёт
   внутри оверлея: приближение делается transform'ом, а не
   системным пинчем, поэтому оно не влияет на масштаб сайта
   и полностью сбрасывается при закрытии.
   ============================================================ */

/* пока галерея открыта — страница под ней не скроллится */
html.lb-lock,
html.lb-lock body { overflow: hidden; }

/* курсор-подсказка, что картинку можно открыть */
.lb-able { cursor: zoom-in; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 100; /* выше хедера (40) и мобильного меню (39) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  /* все жесты внутри обрабатываем сами */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.lb.is-open { opacity: 1; visibility: visible; }

/* сцена, которую двигаем и масштабируем */
.lb__stage {
  will-change: transform;
  transform-origin: center center;
  max-width: 100%;
  max-height: 100%;
}
.lb__stage.is-animated { transition: transform .28s cubic-bezier(.22, .9, .24, 1); }

.lb__img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}

.lb__close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(20, 23, 28, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #F2F4F6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lb__close:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__stage.is-animated { transition-duration: .01ms; }
}

/* ============================================================
   Десктоп: картинка с полями от краёв экрана, курсор подсказывает,
   что сделает клик — приблизить, отдалить или потащить
   ============================================================ */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .lb__img { max-width: 92vw; max-height: 90vh; border-radius: 12px; }
  .lb { cursor: default; }
  .lb.is-over-img { cursor: zoom-in; }
  .lb.is-zoomed { cursor: zoom-out; }
  .lb.is-zoomed:active { cursor: grabbing; }
  .lb__close { top: 24px; right: 24px; transition: background .2s; }
  .lb__close:hover { background: rgba(40, 44, 52, .9); }
}

/* ============================================================
   Подсказка «можно открыть» — только на телефоне и только
   у кадров внутри кейсов. На главной кладка и так читается
   как галерея, а на десктопе вместо лупы работает курсор.
   ============================================================ */
@media (max-width: 720px), (pointer: coarse) {
  .shot__frame { position: relative; }

  .shot__frame::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(14, 16, 20, .55);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    /* лупа нарисована в самом URL, чтобы не тянуть ещё один файл */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E");
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }

  /* у кадра без подложки лупу прижимаем к самой картинке */
  .shot--bare .shot__frame::after { right: 10px; bottom: 10px; }
}

/* ============================================================
   Скелетоны изображений
   Пока картинка не пришла, на её месте лежит светлая плитка
   с бегущим бликом. Место под неё держат атрибуты width/height,
   поэтому вёрстка при загрузке не прыгает.
   Скелетон — это фон самого <img>: если скрипт не отработает,
   пользователь всё равно увидит картинку, просто без снятия фона.
   ============================================================ */
.skel,
.shot__frame img,
.visual__item img,
.case__media img,
.hero__avatar,
.channel__img img {
  background-color: #E8E8E9;
  background-image: linear-gradient(100deg, #E8E8E9 28%, #F2F2F3 48%, #E8E8E9 68%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: skel-slide 1.5s linear infinite;
}

/* картинка пришла — фон и анимация больше не нужны */
img.is-loaded {
  animation: none;
  background-image: none;
  background-color: transparent;
}

@keyframes skel-slide {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel, .shot__frame img, .visual__item img, .case__media img { animation: none; }
}