/* ==========================================================================
   КЕЙСЫ, ДУБЛЬ (#cases-v2) — четыре горизонтальные ленты
   --------------------------------------------------------------------------
   Кадры 10:3, между ними крупные надписи «3 BROTHERS» и «LABS» высотой
   в строку. Верхняя лента едет вправо, вторая — вправо в три раза
   медленнее, третья — влево, четвёртая — снова вправо.
   Ленты собраны дважды, сдвиг на -50% даёт бесшовный цикл.
   ========================================================================== */

.middle--reels{background:var(--paper);overflow-x:clip}
.middle--reels .middle-grid{align-items:center}

/* медиа шире колонки: влево на 20%, вправо — до края экрана */
.middle--reels .middle-text{position:relative;z-index:1}
@media (min-width:1181px){
  .middle--reels .mission-media{
    margin-left:-20%;
    margin-right:calc(-32px - max(0px, (100vw - 1440px) / 2));
  }
}
/* от 1921 px контейнер шире (1800) и padding 40 — пересчитываем вылет */
@media (min-width:1921px){
  .middle--reels .mission-media{
    margin-right:calc(-40px - max(0px, (100vw - 1800px) / 2));
  }
}

.reels{display:flex;flex-direction:column;gap:12px;min-width:0}

.reel{
  position:relative;height:120px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.12) 4%,
    rgba(0,0,0,.34) 9%,
    rgba(0,0,0,.62) 14%,
    rgba(0,0,0,.86) 19%,
    #000 25%,
    #000 75%,
    rgba(0,0,0,.86) 81%,
    rgba(0,0,0,.62) 86%,
    rgba(0,0,0,.34) 91%,
    rgba(0,0,0,.12) 96%,
    transparent 100%);
  mask:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.12) 4%,
    rgba(0,0,0,.34) 9%,
    rgba(0,0,0,.62) 14%,
    rgba(0,0,0,.86) 19%,
    #000 25%,
    #000 75%,
    rgba(0,0,0,.86) 81%,
    rgba(0,0,0,.62) 86%,
    rgba(0,0,0,.34) 91%,
    rgba(0,0,0,.12) 96%,
    transparent 100%);
}
.reel-track{
  display:flex;align-items:stretch;width:max-content;
  will-change:transform;
}
.reel--r .reel-track{animation:reelRight var(--dur,60s) linear infinite}
.reel--l .reel-track{animation:reelLeft var(--dur,60s) linear infinite}
@keyframes reelRight{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes reelLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.reel-item{
  position:relative;flex:none;height:120px;margin-right:12px;
  border-radius:16px;overflow:hidden;
}
.reel-card{width:400px;aspect-ratio:10/3;margin:0 12px 0 0}
.reel-card img{display:block;width:100%;height:100%;object-fit:cover}
.reel-card figcaption{
  position:absolute;left:10px;bottom:10px;z-index:1;
  padding:4px 9px;border-radius:999px;
  background:rgba(10,13,14,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* крупные надписи: высота строки = высота кадра */
.reel-word{
  display:flex;align-items:center;justify-content:center;
  padding:0 34px;white-space:nowrap;
  font-family:var(--display);font-weight:700;
  font-size:96px;line-height:1;letter-spacing:-.055em;text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(180deg,transparent 64%,rgba(18,18,18,.14) 64% 91%,transparent 91%);
}
.reel-word--outline{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  background:none;
}

@media (max-width:1180px){
  .reel,.reel-item{height:104px}
  .reel-card{width:346px}
  .reel-word{font-size:82px;padding:0 26px}
}
@media (max-width:760px){
  .reels{gap:9px}
  .reel,.reel-item{height:78px}
  .reel-card{width:260px}
  .reel-word{font-size:58px;padding:0 18px}
  .reel-item{border-radius:11px}
}

@media (prefers-reduced-motion:reduce){
  .reel-track{animation:none;transform:none}
}