/* ════════════════════════════════════════════════════════════════════
   VG · Home lookbook strip — тизер-лента лукбука на главной.
   Токены/шрифты — из base.html. Здесь только .ls*.
   ════════════════════════════════════════════════════════════════════ */

.ls{ position:relative; background:var(--void); padding:64px 0 70px; overflow:hidden; }
.ls::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,61,127,0.05) 0%, transparent 70%); }

.ls-head{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; max-width:1500px; margin:0 auto 30px; padding:0 60px; }
.ls-head > div{ min-width:0; }
.ls-kicker{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--pink); margin-bottom:10px; }
.ls-kicker::before{ content:'// '; }
.ls-title{ font-family:'Bebas Neue',sans-serif; font-size:44px; line-height:1; letter-spacing:.04em; color:var(--white); white-space:nowrap; }
.ls-title em{ font-family:'Pinyon Script',cursive; font-style:normal; color:var(--pink); font-size:34px; line-height:1; margin-left:8px; }
.ls-sub{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--gray); margin-top:16px; }

.ls-cta{ flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white); text-decoration:none; border:1px solid var(--border); padding:13px 22px; display:inline-flex; align-items:center; gap:12px;
  transition:all .3s; background:rgba(3,3,4,.4); }
.ls-cta:hover{ border-color:var(--pink); color:var(--pink); }
.ls-cta .arr{ transition:transform .3s; }
.ls-cta:hover .arr{ transform:translateX(5px); }

/* viewport ленты */
.ls-view{ position:relative; z-index:1; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.ls-view.dragging{ cursor:grabbing; }
/* мягкие края */
.ls-view::before, .ls-view::after{ content:''; position:absolute; top:0; bottom:0; width:90px; z-index:3; pointer-events:none; }
.ls-view::before{ left:0; background:linear-gradient(90deg, var(--void), transparent); }
.ls-view::after{ right:0; background:linear-gradient(270deg, var(--void), transparent); }

.ls-track{ display:inline-flex; gap:14px; will-change:transform; padding:6px 0; }
/* одиночный кадр у́же вьюпорта: показываем статично по центру, без петли/драга */
.ls-track.ls-track--static{ display:flex; width:100%; justify-content:center; cursor:default; }
.ls-view:has(.ls-track--static){ cursor:default; }

.ls-item{ position:relative; flex:0 0 auto; height:300px; background:var(--surface); border:1px solid var(--border);
  overflow:hidden; cursor:pointer; }
.ls-item img{ height:100%; width:100%; object-fit:cover; display:block; pointer-events:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1); }
.ls-item:hover img{ transform:scale(1.05); }

/* glitch на hover (css-only) */
@keyframes ls-glitch{
  0%,100%{ transform:translate(0,0); filter:none; }
  25%{ transform:translate(-2px,1px); filter:drop-shadow(2px 0 0 var(--pink)) drop-shadow(-2px 0 0 #22d3ee); }
  55%{ transform:translate(2px,-1px); filter:drop-shadow(-2px 0 0 #22d3ee); }
  80%{ transform:translate(-1px,0); filter:none; }
}
.ls-item:hover img{ animation:ls-glitch .5s steps(2,end) 1; }

/* уголки + индекс */
.ls-item::before, .ls-item::after{ content:''; position:absolute; width:13px; height:13px; border:1px solid var(--pink); opacity:0; transition:opacity .3s, transform .3s; z-index:3; }
.ls-item::before{ top:9px; left:9px; border-right:none; border-bottom:none; transform:translate(4px,4px); }
.ls-item::after{ bottom:9px; right:9px; border-left:none; border-top:none; transform:translate(-4px,-4px); }
.ls-item:hover::before, .ls-item:hover::after{ opacity:1; transform:translate(0,0); }
.ls-idx{ position:absolute; right:9px; top:8px; z-index:3; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em; color:var(--white); opacity:0; transition:opacity .3s; text-shadow:0 1px 4px #000; }
.ls-item:hover .ls-idx{ opacity:.85; }
/* «увеличить» подсказка по центру на hover */
.ls-zoom{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; pointer-events:none; }
.ls-zoom span{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.22em; color:#fff; border:1px solid rgba(255,255,255,.6); padding:7px 12px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); background:rgba(3,3,4,.3); }
.ls-view:not(.dragging) .ls-item:hover .ls-zoom{ opacity:1; }

/* статус-строка ленты */
.ls-foot{ position:relative; z-index:2; max-width:1500px; margin:22px auto 0; padding:0 60px;
  display:flex; align-items:center; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray2); }
.ls-foot .dot{ width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 6px var(--pink); }
.ls-foot .run{ color:var(--gray); }
.ls-foot .hint{ margin-left:auto; color:var(--gray2); }

.pswp{ --pswp-bg:#030304; } .pswp__bg{ background:#030304; }

@media (max-width:992px){
  .ls{ padding:44px 0 50px; }
  .ls-head{ flex-direction:column; align-items:flex-start; padding:0 20px; margin-bottom:22px; }
  .ls-title{ font-size:32px; white-space:normal; }
  .ls-title em{ font-size:25px; }
  .ls-item{ height:220px; }
  .ls-foot{ padding:0 20px; } .ls-foot .hint{ display:none; }
  .ls-view::before,.ls-view::after{ width:40px; }
}
@media (prefers-reduced-motion:reduce){ .ls-item img{ animation:none !important; } }