/* Закреплённый блок снимков — только страница MPShine.
   Гасит CSS-стопку из motion-scroll.css. Там анимацию включает
   `html.m-ready .shot-frame:nth-child(1):not(.m-seen)` — это четыре класса
   специфичности, а здесь их три, поэтому порядок подключения файлов ничего
   не решает, а само гашение без `!important` проигрывает. Замерено на живом
   сайте: у кадров оставался `animation-name: shots-left`, крайние разъезжались
   на ±731 px с наклоном 21°, GSAP запекал наклон в inline-трансформ — и он
   оставался навсегда, когда `--sry` уже доехал до нуля. Правый край кадра
   выходил на 1516 px при окне 1440, то есть страница получала
   горизонтальную прокрутку.

   Класс `shots-pinned` ставит скрипт. Без JS, при `prefers-reduced-motion`
   и ниже 901 px ни одно правило отсюда не срабатывает: остаются три кадра
   обычной сеткой, как на других кейсах. */

/* Вся секция вместе с заголовком должна влезать в экран — иначе закреплять
   нечего, человек увидит обрезанный кадр. Поэтому отступы поджаты.
   Все три кадра стоят в одной ячейке сетки: высота блока равна самому
   высокому из них, считать её руками не нужно. Прозрачностью правит GSAP. */
.shots-pinned.shots-section{padding-top:32px;}
.shots-pinned .shots-grid{display:grid;grid-template-columns:1fr;
  grid-template-areas:"stage";margin-top:24px;gap:0;}
/* Все кадры в одной ячейке, поэтому погашенный кадр лежит поверх видимого:
   события мыши снимаем со всех, возвращаем только текущему — иначе клик по
   снимку уходит в невидимый верхний. `z-index:auto` отменяет подъём второго
   кадра из стопки motion-scroll.css, иначе два перехода выглядят по-разному.
   `transition-property:border-color` убирает переход у transform: в styles.css
   он объявлен на .shot-frame ради подъёма по наведению, а здесь transform
   каждый кадр прокрутки пишет GSAP — с переходом сдвиг отстаёт от скролла
   и доезжает уже после остановки. Подсветка рамки остаётся. */
.shots-pinned .shots-grid .shot-frame{grid-area:stage;animation-name:none !important;
  z-index:auto;pointer-events:none;transition-property:border-color;}
.shots-pinned .shots-grid .shot-frame.is-live{pointer-events:auto;}

/* Высота снимка считается от окна, а не задана на глаз. Вычитаем 460 px:
   71 px занимает закреплённая шапка сайта, 355 px — всё, кроме картинки
   (заголовок, подзаголовок, шапка окна, подпись, точки, отступы), и ещё
   34 px остаются воздухом сверху и снизу. Так кадр крупный на большом
   мониторе и при этом ничего не уезжает под шапку. */
/* Снимки сняты 1200×750 и 1200×900, а рамка во всю ширину контента вышла бы
   почти втрое шире своей высоты: картинка висела бы посреди серых полей.
   Поэтому ширину кадра задаёт его же высота по пропорции 1,62 — кадр стоит
   по центру и выглядит окном, а не полосой. Обрезать снимок нельзя: он здесь
   и есть доказательство, что система существует. */
.shots-pinned{--shot-h:min(100vh - 460px,520px);}
.shots-pinned .shots-grid.full .shot-pic{height:var(--shot-h);}
.shots-pinned .shot-frame{width:100%;
  max-width:calc(var(--shot-h) * 1.62);justify-self:center;}
.shots-pinned .shot-frame figcaption{min-height:3.6em;}
.shots-pinned .shots-grid.full figcaption .zoom-hint{display:none;}

/* Три точки под кадром: видно, что шагов ровно три и страница не зависла.
   Разметку создаёт скрипт — в HTML её нет, чтобы без JS не висел мусор. */
.shots-steps{display:flex;justify-content:center;gap:10px;margin-top:22px;}
.shots-steps i{width:7px;height:7px;border-radius:50%;background:#D6DAE0;
  transition:background .18s linear,transform .18s linear;}
.shots-steps i.on{background:var(--lime-deep);transform:scale(1.3);}

/* ---------- Печать ---------- */
/* На бумаге нет ни прокрутки, ни закрепления: ScrollTrigger оставляет
   обёртке высоту в три экрана с пустым полем снизу (замерено на
   mpshine.html: 3224 px при отступе 2430 px — в PDF это были три пустые
   страницы), а второй и третий кадры стоят с inline `opacity:0`.
   Прозрачность и сдвиг пишет GSAP прямо в атрибут style, поэтому только
   `!important`: правило таблицы с ним сильнее inline без него.
   Все три кадра стоят в одной ячейке сетки, так что просто сделать их
   видимыми нельзя — они легли бы друг на друга. Распускаем всё
   закрепление и возвращаем обычный вид сетки снимков: на листе кейс
   выглядит так же, как остальные одиннадцать — и неважно, с какого места
   страницы человек нажал печать. */
@media print{
  .pin-spacer{height:auto !important;padding:0 !important;}
  /* Пока секция реально закреплена, ScrollTrigger держит на ней inline
     `position:fixed` с координатами. Снять только высоту и transform
     недостаточно: распорка схлопывается, а секция остаётся вне потока —
     печать из середины страницы (а это как раз то место, откуда её и захочется
     напечатать) давала девять листов вместо шести, без шапки на первом
     и по одному снимку на лист. Поэтому возвращаем секцию в поток целиком. */
  .shots-pinned.shots-section{height:auto !important;max-height:none !important;
    transform:none !important;position:static !important;
    top:auto !important;left:auto !important;width:auto !important;}
  /* Ширина листа около 717 px, поэтому сетку в одну колонку задаёт правило
     `max-width:900px` из styles.css — как и на остальных одиннадцати кейсах.
     Здесь остаётся только распустить общую ячейку. */
  .shots-pinned .shots-grid{grid-template-areas:none;gap:18px;}
  .shots-pinned .shots-grid .shot-frame{grid-area:auto;max-width:none;
    opacity:1 !important;transform:none !important;}
  .shots-pinned .shots-grid.full .shot-pic{height:200px;}
  .shots-pinned .shot-frame figcaption{min-height:0;}
  .shots-steps{display:none;}
}