/* o11-army — shop port of the Studio "choose your colour" army. Shop only. */
.o11army-sec{padding-bottom:64px}
.o11army-sec .sh{margin-bottom:22px}
.o11styles{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.o11styles button{
  appearance:none;border:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.7);
  font-family:Barlow,sans-serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;
  height:40px;padding:0 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s
}
.o11styles button:hover{border-color:rgba(255,255,255,.55);color:#fff}
.o11styles button.on, .o11styles button[aria-selected=true]{background:#fff;color:#111;border-color:#fff}
.o11styles button:focus-visible{outline:2px solid #ff1a1a;outline-offset:3px}

.o11army{position:relative;width:100%;max-width:100%;background:#000;overflow:hidden}
.o11stage{position:relative;isolation:isolate;height:min(62vh,640px);min-height:420px;overflow:hidden}
.o11wrap{position:relative;height:100%;display:flex;flex-direction:column;isolation:isolate}
.o11scroller{
  position:relative;z-index:1;flex:1 1 auto;min-height:0;height:100%;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%)
}
.o11scroller::-webkit-scrollbar{display:none}
.o11track{display:flex;align-items:flex-end;height:100%;width:max-content;gap:0;padding:28px 6vw 32px;box-sizing:border-box;overflow:visible}

.o11suit{
  position:relative;flex:0 0 auto;height:100%;aspect-ratio:400/810;margin:0 -56px;padding:0;
  border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;
  overflow:visible;z-index:1;transform:none;transition:transform .25s ease;
  box-shadow:none;filter:none
}
.o11suit img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  background:transparent;padding:0;box-sizing:border-box;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
  opacity:0;transition:opacity .35s
}
.o11suit img.ld{opacity:1}
.o11suit:hover, .o11suit:focus-visible{
  transform:translateY(-4%);z-index:1;outline:none;box-shadow:none;filter:none
}
.o11lab{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.7);
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.8)
}
.o11suit:hover .o11lab, .o11suit:focus-visible .o11lab{opacity:1;color:#fff}

.o11arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;z-index:30;opacity:.55;transition:opacity .2s;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px)
}
.o11arrow:hover{opacity:1}
.o11arrow:disabled{opacity:0;pointer-events:none}
.o11arrow:focus-visible{outline:2px solid #ff1a1a;outline-offset:2px;opacity:1}
.o11prev{left:14px}.o11next{right:14px}

.o11hint{flex:0 0 auto;text-align:center;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.06em;padding:10px 16px 16px;text-transform:uppercase;margin:0}
.o11hint-touch{display:none}

/* foot light slit, section-relative */
@keyframes o11slitPulse{0%,100%{opacity:.84}50%{opacity:1}}
.o11stage::before, .o11stage::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:0}
.o11stage::before{
  bottom:calc(28px - 26vh);height:52vh;
  background:radial-gradient(ellipse 72% 58% at 50% 100%,
    rgba(255,255,255,.50) 0%,
    rgba(255,255,255,.22) 26%,
    rgba(255,255,255,.07) 52%,
    transparent 74%);
  animation:o11slitPulse 7.5s ease-in-out infinite
}
.o11stage::after{
  bottom:28px;height:2px;
  background:linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,.45) 28%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.45) 72%,
    rgba(255,255,255,0) 92%,
    transparent 100%);
  box-shadow:
    0 0 6px 1px rgba(255,255,255,.95),
    0 0 16px 4px rgba(255,255,255,.70),
    0 0 42px 14px rgba(255,255,255,.38),
    0 0 88px 30px rgba(255,255,255,.16);
  animation:o11slitPulse 7.5s ease-in-out infinite
}

@media (hover:none), (pointer:coarse){
  .o11hint-mouse{display:none}
  .o11hint-touch{display:block}
  .o11arrow{width:44px;height:44px;font-size:22px;opacity:.8}
  .o11styles button{min-height:44px;height:44px;padding:0 18px}
}
@media (max-width:980px){
  .o11army-sec{padding-bottom:40px}
  .o11stage{height:min(58vh,520px);min-height:380px}
  .o11track{padding:36px 10vw 28px}
  .o11suit{margin:0 -40px}
  .o11prev{left:6px}.o11next{right:6px}
}
@media (max-width:820px){
  .o11suit{margin:0 -36px}
  .o11lab{opacity:0} /* still on hover/focus; tap shows :focus */
  .o11scroller{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%)
  }
}
@media (max-width:480px){
  .o11stage{height:min(54vh,460px);min-height:340px}
  .o11army-sec .sh{margin-bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  .o11suit, .o11suit img, .o11styles button, .o11arrow, .o11lab{transition:none!important}
  .o11stage::before, .o11stage::after{animation:none!important;opacity:.9}
  .o11suit:hover, .o11suit:focus-visible{transform:none}
}