/* ════════════════════════════════════════════════════════════════════
   VG Lookbook · INFINITE FIELD — стили галереи-полотна.
   Статус-бар, nav и шрифты берутся из base.html — здесь только .lb-*.
   ════════════════════════════════════════════════════════════════════ */

/* страница-полотно: фикс-фуллскрин, без прокрутки документа и без футера */
body.lb-page { overflow: hidden; height: 100vh; overscroll-behavior: none; }
body.lb-page > main { margin: 0; }
body.lb-page footer { display: none; }

/* ── STAGE (бесконечный перетаскиваемый холст) ── */
.lb-stage{ position:fixed; top:92px; left:0; right:0; bottom:0; overflow:hidden; background:var(--void);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.lb-stage.dragging{ cursor:grabbing; }

.lb-field{ position:absolute; top:0; left:0; will-change:transform; opacity:1; }

/* film grain + edge vignette — фокус в центр */
.lb-grain{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* виньетка — только во время перемещения (в покое без затенения) */
.lb-vig{ position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(3,3,4,0.85); opacity:0; transition:opacity .45s ease; }
.lb-stage.dragging .lb-vig{ opacity:1; }

/* ── BLOCK + CELL ── */
.lb-block{ position:absolute; top:0; left:0; }
.lb-cell{ position:absolute; overflow:hidden; background:var(--surface); border:1px solid var(--border);
  cursor:pointer; contain:layout paint style; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.lb-cell img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1); }

/* hover: только подъём активного кадра (без затенения соседей) */
.lb-stage:not(.dragging) .lb-cell:hover{ transform:scale(1.02); z-index:6; }
.lb-stage:not(.dragging) .lb-cell:hover img{ transform:scale(1.06); }

/* glitch (CSS-only, без доп. узлов) */
@keyframes lb-glitch{
  0%,100%{ transform:translate(0,0); filter:none; }
  20%{ transform:translate(-3px,1px); filter:drop-shadow(2px 0 0 var(--pink)) drop-shadow(-2px 0 0 var(--cyan)); }
  40%{ transform:translate(3px,-1px); filter:drop-shadow(-2px 0 0 var(--cyan)); }
  60%{ transform:translate(-2px,0); filter:drop-shadow(2px 0 0 var(--pink)); }
  80%{ transform:translate(1px,1px); filter:none; }
}
.lb-stage:not(.dragging) .lb-cell:hover img{ animation:lb-glitch .5s steps(2,end) 1; }

/* scanline sweep */
.lb-cell .lb-scan{ position:absolute; inset:0; pointer-events:none; opacity:0; z-index:2;
  background:linear-gradient(180deg, transparent 0%, rgba(255,61,127,.10) 48%, rgba(255,255,255,.16) 50%, rgba(255,61,127,.10) 52%, transparent 100%);
  transform:translateY(-100%); }
.lb-stage:not(.dragging) .lb-cell:hover .lb-scan{ animation:lb-sweep .85s cubic-bezier(.16,1,.3,1) 1; }
@keyframes lb-sweep{ 0%{opacity:0; transform:translateY(-100%)} 20%{opacity:1} 100%{opacity:0; transform:translateY(100%)} }

/* уголки + тег */
.lb-cell::before, .lb-cell::after{ content:''; position:absolute; width:14px; height:14px; border:1px solid var(--pink); opacity:0; transition:opacity .3s, transform .3s; z-index:3; }
.lb-cell::before{ top:8px; left:8px; border-right:none; border-bottom:none; transform:translate(4px,4px); }
.lb-cell::after{ bottom:8px; right:8px; border-left:none; border-top:none; transform:translate(-4px,-4px); }
.lb-stage:not(.dragging) .lb-cell:hover::before, .lb-stage:not(.dragging) .lb-cell:hover::after{ opacity:1; transform:translate(0,0); }
.lb-tag{ position:absolute; left:10px; bottom:9px; z-index:3; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--white); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; text-shadow:0 1px 6px rgba(0,0,0,.8); }
.lb-tag::before{ content:''; display:inline-block; width:5px; height:5px; background:var(--pink); box-shadow:0 0 6px var(--pink); margin-right:7px; vertical-align:middle; }
.lb-stage:not(.dragging) .lb-cell:hover .lb-tag{ opacity:1; transform:translateY(0); }

/* ── HEADER STRIP + FILTERS (overlay) ── */
.lb-bar{ position:fixed; top:92px; left:0; right:0; z-index:120; padding:18px 60px 22px;
  background:linear-gradient(180deg, rgba(3,3,4,0.92) 0%, rgba(3,3,4,0.7) 60%, transparent 100%);
  pointer-events:none; }
.lb-bar-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; }
.lb-kicker{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--pink); margin-bottom:8px; }
.lb-kicker::before{ content:'// '; }
.lb-title{ font-family:'Bebas Neue',sans-serif; font-size:54px; line-height:.9; letter-spacing:.04em; color:var(--white); }
.lb-title em{ font-family:'Pinyon Script',cursive; font-style:normal; color:var(--pink); font-size:40px; letter-spacing:0; margin-left:8px; }
.lb-meta{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--gray); text-align:right; line-height:1.8; white-space:nowrap; }
.lb-meta b{ color:var(--white); font-weight:400; }
.lb-filters{ display:flex; flex-wrap:wrap; gap:8px; pointer-events:auto; }
.lb-chip{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); background:rgba(3,3,4,0.6); border:1px solid var(--border); padding:9px 16px; cursor:pointer; transition:all .25s; white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lb-chip:hover{ color:var(--white); border-color:var(--gray); }
.lb-chip.active{ color:var(--white); border-color:var(--pink); background:var(--pink-dim); box-shadow:inset 0 0 12px rgba(255,61,127,.08); }
.lb-chip .cnt{ color:var(--gray2); margin-left:7px; }
.lb-chip.active .cnt{ color:var(--pink); }

/* пустое состояние */
.lb-empty{ position:fixed; top:50%; left:0; right:0; transform:translateY(-50%); z-index:110; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; pointer-events:none; }

/* ── HUD снизу ── */
.lb-hud{ position:fixed; left:0; right:0; bottom:0; z-index:120; padding:16px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:linear-gradient(0deg, rgba(3,3,4,0.92) 0%, transparent 100%);
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  pointer-events:none; }
.hud-hint{ color:var(--gray); display:flex; align-items:center; gap:10px; }
.hud-hint .k{ color:var(--pink); }
.hud-hint .drag-ico{ display:inline-block; width:16px; height:16px; border:1px solid var(--pink); position:relative; }
.hud-hint .drag-ico::before,.hud-hint .drag-ico::after{ content:''; position:absolute; background:var(--pink); }
.hud-hint .drag-ico::before{ left:50%; top:2px; bottom:2px; width:1px; transform:translateX(-.5px); }
.hud-hint .drag-ico::after{ top:50%; left:2px; right:2px; height:1px; transform:translateY(-.5px); }
.hud-mid{ color:var(--gray2); }
.hud-mid b{ color:var(--gray); font-weight:400; }
.hud-right{ display:flex; align-items:center; gap:14px; pointer-events:auto; }
.hud-pos{ color:var(--gray2); }
.hud-pos b{ color:var(--cyan); font-weight:400; }
.hud-btn{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); background:rgba(3,3,4,0.6); border:1px solid var(--border); padding:8px 14px; cursor:pointer; transition:all .25s; }
.hud-btn:hover{ color:var(--pink); border-color:var(--pink); }

/* ── курсор-видоискатель ── */
.lb-cursor{ position:fixed; top:0; left:0; z-index:400; width:46px; height:46px; margin:-23px 0 0 -23px; pointer-events:none; opacity:0; transition:opacity .25s; mix-blend-mode:difference; }
.lb-cursor.on{ opacity:1; }
.lb-cursor svg{ width:100%; height:100%; display:block; transition:transform .18s cubic-bezier(.16,1,.3,1); }
.lb-cursor.zoom svg{ transform:scale(1.25); }
.lb-cursor.grab svg{ transform:scale(.7); opacity:.6; }
.lb-cursor .lc-txt{ position:absolute; top:50%; left:54px; transform:translateY(-50%); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.22em; color:#fff; white-space:nowrap; }
@media (hover:none){ .lb-cursor{ display:none !important; } }

/* PhotoSwipe — затемнение под бренд */
.pswp{ --pswp-bg:#030304; }
.pswp__bg{ background:#030304; }

/* ── MOBILE ── */
@media (max-width:992px){
  .lb-stage{ top:64px; }
  .lb-bar{ top:64px; padding:14px 18px 18px;
    background:linear-gradient(180deg, rgba(3,3,4,0.95) 0%, rgba(3,3,4,0.8) 55%, transparent 100%); }
  .lb-title{ font-size:36px; }
  .lb-title em{ font-size:28px; }
  .lb-meta{ display:none; }
  .lb-hud{ padding:12px 18px; }
  .hud-mid{ display:none; }
  /* фильтры — горизонтальный скролл, без переноса */
  .lb-filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .lb-filters::-webkit-scrollbar{ display:none; }
  .lb-chip{ flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .lb-cell img{ transition:none; animation:none !important; }
}