/* «Другие наши проекты», вариант 2: лента. Кадры 16:9 из частиц идут в ряд до края экрана; кадр
   собирается из пыли, когда въезжает в экран, и рассыпается у края. Листается мышью, тачем, стрелками. */
.mv2 {
  /* продолжение блока кейсов: подтянута в пустой низ последнего кейса, без разделительной линии.
     z-index — чтобы сцена кейса (z 1) не легла поверх заголовка */
  position: relative; z-index: 2;
  margin-top: calc(var(--vh, 1vh) * -9 + 8px);
}
.mv2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); }
.mv2__title { font-size: clamp(26px, 2.3vw, 36px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; color: #fff; }
.mv2__nav { display: flex; gap: 10px; }
.mv2__arr {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.8);
  font: 300 17px/1 inherit; cursor: pointer;
  transition: border-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}
.mv2__arr:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.mv2__arr:active { transform: scale(.94); }
.mv2__arr[disabled] { opacity: .3; cursor: default; }

.mv2__view { position: relative; }
.mv2__view > canvas {
  position: absolute; top: -48px; bottom: 0; left: calc(-1 * var(--pad, 0px)); width: calc(100% + 2 * var(--pad, 0px)); height: calc(100% + 48px);
  display: block; pointer-events: none; z-index: 0;
}
.mv2__track {
  position: relative; z-index: 1;
  display: flex; gap: clamp(20px, 2vw, 32px);
  /* лента во всю ширину экрана, первый кадр — по левому краю текста (--pad ставит more-v2.js) */
  margin-inline: calc(-1 * var(--pad, 0px)); padding-inline: var(--pad, 0px);
  scroll-padding-inline: var(--pad, 0px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  cursor: grab;
}
.mv2__track::-webkit-scrollbar { display: none; }
.mv2__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mv2__track.is-drag .mv2__it { pointer-events: none; }
.mv2__it {
  flex: 0 0 clamp(272px, 24vw, 370px); scroll-snap-align: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; align-content: start;
  padding: 9px 9px 18px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.012);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  color: #fff; text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease;
  -webkit-user-drag: none; user-select: none;
}
.mv2__pic { grid-column: 1 / -1; display: block; position: relative; aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: 13px; overflow: hidden; background: rgba(255,255,255,.012); }
.mv2__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.mv2.no-gl .mv2__pic img { opacity: .85; }
.mv2__n { padding-left: 9px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px; color: rgba(255,255,255,.32); }
.mv2__name { padding-right: 9px; font-size: clamp(19px, 1.45vw, 22px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.15; color: rgba(255,255,255,.88); transition: color .3s ease; }
.mv2__line { grid-column: 2; padding-right: 9px; font-size: 14px; font-weight: 300; letter-spacing: -0.012em; line-height: 1.45; color: rgba(255,255,255,.42); transition: color .3s ease; }
.mv2__it i { display: none; }
.mv2__it:hover { border-color: rgba(255,255,255,.22); background-color: rgba(255,255,255,.025); }
.mv2__it:hover .mv2__name, .mv2__it:focus-visible .mv2__name { color: #fff; }
.mv2__it:hover .mv2__line { color: rgba(255,255,255,.7); }
.mv2__it:focus-visible { outline: none; }
.mv2__it:focus-visible { border-color: rgba(255,255,255,.4); }

@media (max-width: 900px) { .mv2 { margin-top: 24px; } }
@media (max-width: 720px) {
  .mv2 { margin-top: 12px; }
  .mv2__head { margin-bottom: 22px; }
  .mv2__title { font-size: 28px; }
  .mv2__nav { display: none; }
  .mv2__track { gap: 16px; cursor: auto; }
  .mv2__it { flex-basis: 74vw; border-radius: 18px; padding: 8px 8px 16px; }
  .mv2__pic { margin-bottom: 12px; border-radius: 11px; }
  .mv2__name { font-size: 19px; }
  .mv2__line { font-size: 14px; }
}