/* Страница катушки: плёнка лежит полосами и проявляется под курсором */

/* «проявить всю плёнку» живёт в строке заголовка и дрожит на наведении */
/* «проявить» — то же действие, что и ссылки рядом: стиль берёт из .lead__action */
.develop-all {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.develop-all:hover,
.develop-all:focus-visible { color: var(--dim); opacity: 1; }
.develop-all[disabled] { color: var(--dim); cursor: default; opacity: 1; }

/* ───────── полоса плёнки ───────── */

.strips {
  display: flex;
  flex-direction: column;
  gap: 54px;
  padding-bottom: 90px;
}

.fstrip {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 26px 10px;
  background: var(--negative-base, #2a1a10);
  width: 100%;              /* лента на всю полосу, поля 70 держит страница */
}
/* перфорация: ряды светлых прямоугольников сверху и снизу */
.fstrip::before,
.fstrip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 12px;
  background-image: repeating-linear-gradient(90deg,
    var(--paper) 0 11px, transparent 11px 25px);
  background-size: 25px 12px;
}
.fstrip::before { top: 7px; }
.fstrip::after { bottom: 7px; }

.fstrip__edge {
  position: absolute;
  left: 12px; right: 12px;
  top: 0;
  height: 7px;
  overflow: hidden;
  font-size: 6px;
  line-height: 7px;
  letter-spacing: .18em;
  white-space: nowrap;
  color: #e8a05a;
  opacity: .9;
}

/* полоса вытягивается слева направо по ходу скролла: правый край обрезки
   едет вперёд, а сама лента подтягивается. Назад — тем же порядком */
.strips.is-reveal .fstrip {
  --reveal: 0;
  clip-path: inset(0 calc((1 - var(--reveal)) * 100%) 0 0);
  transform: translate3d(calc((var(--reveal) - 1) * 90px), 0, 0);
  will-change: clip-path, transform;
}

.frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
  aspect-ratio: 3 / 2;
  background: #1b1008;
  cursor: grab;
  overflow: hidden;
}
/* пустое поле плёнки в начале и в хвосте — чтобы полосы были одной длины */
.frame--blank { background: none; cursor: default; }
/* снимок не пришёл: кадр остаётся засвеченным полем, а не ждёт проявки */
.frame--lost { background: #6c3a1b; cursor: default; }
.frame img {
  display: block;
  transition: visibility 0s;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.frame canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  touch-action: pan-y;          /* пальцем вдоль плёнки — проявляем, вниз — листаем страницу */
  transition: opacity .55s var(--ease);
}
.frame__no {
  position: absolute;
  left: 4px; bottom: -22px;
  font-size: 7px;
  letter-spacing: .1em;
  color: #e8a05a;
}
.frame.is-rubbing { cursor: grabbing; }
.frame.is-developed { cursor: pointer; }

/* проявка всей плёнки: кадр засвечивается, и из засветки выходит снимок */
.viewer__media.is-flash::after,
.frame.is-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff3e2;
  pointer-events: none;
  animation: flash .95s cubic-bezier(.12, .7, .3, 1) forwards;
}
@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: .95; }
  34%  { opacity: .8; }
  100% { opacity: 0; }
}

/* на узком экране лента тоже по ширине полосы: кадров в ней меньше,
   зато ни один не уезжает за край */
@media (max-width: 1023px) {
  .strips { gap: 32px; }
  .fstrip { padding: 18px 8px; gap: 6px; }
  .frame { max-width: 200px; }
  /* лента и так во всю ширину: сдвиг при выкате увёл бы её за край экрана */
  .strips.is-reveal .fstrip { transform: none; }
  .fstrip::before, .fstrip::after { height: 9px; background-size: 18px 9px;
    background-image: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 18px); }
}



/* вертикальный снимок на плёнке лежит повёрнутым — показываем, как есть.
   Доли вместо пикселей: кадр растягивается вместе с лентой */
.frame--portrait img {
  position: absolute;
  left: 50%; top: 50%;
  width: 66.667%; height: 150%;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ───────── полка: плёнки по годам ───────── */


.shelf-year { border-top: 1px solid var(--ink); padding: 28px 0 28px; }
.shelf-year__body { display: flex; gap: 40px; }
.shelf-year__mark { flex: 0 0 280px; }
.shelf-year__num { margin: 0; font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -.03em; }
.shelf-year__count { margin: 12px 0 0; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.02em; color: var(--dim); }
.shelf-year__grid {
  flex: 1 1 auto;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 285px));
  gap: 32px 32px;
}

.shelf-roll { display: block; color: var(--ink); }
.shelf-roll__pic {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%; max-width: 285px; height: 200px;
}
.shelf-roll__can {
  display: block;
  width: 184px; height: 184px;
  background-repeat: no-repeat;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.shelf-roll:hover .shelf-roll__can { transform: translateY(-8px) scale(1.05); }
.shelf-roll__name { display: block; margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 24px; }
.shelf-roll:hover .shelf-roll__name { }
.shelf-roll__line { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.02em; color: var(--dim); }

@media (max-width: 1023px) {
  .shelf-year__body { flex-direction: column; gap: 24px; }
  .shelf-year__mark { flex: none; display: flex; justify-content: space-between; align-items: baseline; }
  .shelf-year__num { font-size: 28px; line-height: 30px; }
  .shelf-year__count { margin: 0; }
  .shelf-year__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .shelf-roll__pic { width: 100%; height: 150px; }
  .shelf-roll__can { width: 136px; height: 136px; }
  /* на телефоне название плёнки часто в две строки: кегль меньше десктопного,
     межстрочник плотный, иначе строки разъезжаются и лезут на период */
  .shelf-roll__name { font-size: 16px; line-height: 18px; }
  .shelf-year { padding-bottom: 48px; }
}

/* ───────── подборки ───────── */

/* кадры альбома: та же ровная сетка квадратов, что у обложек на главной */
.set-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 0 90px;
}
.set-cell { margin: 0; }
.set-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  backface-visibility: hidden;
}
.set-cell img:hover { transform: translateY(-8px) scale(1.02); }

@media (max-width: 1023px) {
  .set-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 40px; }
}

@media (max-width: 560px) {
  .set-grid { grid-template-columns: repeat(2, 1fr); }
}