/* ============================================================
   IN ACTION — horizontal rail of portrait clips
   ============================================================ */

.action__rail{
  position:relative;
  margin-top:clamp(22px,3.4vw,38px);
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  outline:none;
  height:clamp(340px,62vh,620px);
}
.action__rail:active{cursor:grabbing}
.action__rail:focus-visible{outline:1px dashed rgba(234,246,247,.3);outline-offset:-8px}

.action__track{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  margin:0;
  padding:0;
  height:100%;
  list-style:none;
  will-change:transform;
}

.reel{
  flex:0 0 auto;
  height:100%;
  aspect-ratio:9/16;
  transform-origin:50% 50%;
  transition:opacity .5s var(--ease);
  will-change:transform,opacity;
}
.reel__frame{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#02141a;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  transition:box-shadow .5s var(--ease);
}
/* no centre emphasis — the rail moves continuously */
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel__tag{
  position:absolute;left:12px;bottom:12px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

.action__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(3,13,18,.55);
  border:1px solid rgba(234,246,247,.22);
  color:#eaf6f7;font-size:14px;z-index:3;
  backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s,opacity .3s;
}
.action__nav:hover{background:rgba(37,194,214,.28);border-color:rgba(37,194,214,.6)}
.action__nav--prev{left:clamp(8px,1.4vw,20px)}
.action__nav--next{right:clamp(8px,1.4vw,20px)}

.action__foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:14px;
}
.action__hint{color:rgba(234,246,247,.34);transition:opacity .5s var(--ease)}
.action__hint.is-hidden{opacity:0}
.action__dots{display:flex;gap:7px}
.action__dots .dot{
  width:16px;height:3px;padding:0;border:0;background:rgba(234,246,247,.2);
  transition:background .3s,width .3s;
}
.action__dots .dot[aria-selected="true"]{background:#25c2d6;width:28px}

@media (max-width:720px){
  .action__rail{height:clamp(300px,58vh,460px)}
  .action__nav{display:none}
}