/* ════════════════════════════════════════════════════════════
   ВАРИАНТ 02 · ДОСЬЕ — 4 ПОДАЧИ МЕДИА
   Левая колонка (объект) одна и та же; меняется правая витрина.
   ════════════════════════════════════════════════════════════ */

.d-wrap{min-height:100vh;display:flex;flex-direction:column;}

/* ── шапка страницы ── */
.d-top{border-bottom:1px solid var(--av-line-soft);padding:clamp(16px,2.4vw,26px) 0;}
.d-top-in{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.d-kick{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--av-signal);}
.d-kick::before{content:"[ ";color:var(--av-muted);} .d-kick::after{content:" ]";color:var(--av-muted);}
.d-h1{font-family:var(--font-d);font-weight:600;font-size:clamp(22px,2.6vw,34px);text-transform:uppercase;line-height:1.04;letter-spacing:-.01em;margin-top:9px;}
.d-h1 .sig{color:var(--av-signal);}
.d-back{font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--av-body);border:1px solid var(--av-line);padding:9px 16px;transition:all .2s var(--ease);white-space:nowrap;}
.d-back:hover{color:var(--av-snow);border-color:var(--av-snow);}

.d-main{padding-block:clamp(20px,3vw,38px);}
.d-lead{color:var(--av-body);font-size:14.5px;line-height:1.62;max-width:74ch;margin-top:14px;text-wrap:pretty;}
.d-lead strong{color:var(--av-snow);font-weight:400;}

/* ── РЕЕСТР: общий выбор объекта для всех четырёх подач ── */
.d-rail{margin-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--av-line-soft);border-bottom:1px solid var(--av-line-soft);padding-block:14px;position:sticky;top:0;z-index:40;background:rgba(4,7,10,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.d-rail-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;}
.d-rail-hd .lbl{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--av-muted);}
.d-rail-hd .lbl b{color:var(--av-snow);font-weight:500;}
.d-rail-hd .hint{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-signal);display:flex;align-items:center;gap:7px;}
.d-rail-track{display:flex;gap:9px;overflow-x:auto;padding-bottom:7px;scrollbar-width:thin;scrollbar-color:var(--av-line) transparent;}
.d-rail-track::-webkit-scrollbar{height:6px;}
.d-rail-track::-webkit-scrollbar-track{background:var(--av-line-soft);}
.d-rail-track::-webkit-scrollbar-thumb{background:var(--av-line);}
.d-chip{flex:none;width:182px;display:flex;align-items:center;gap:11px;text-align:left;padding:8px 11px;border:1px solid var(--av-line-soft);background:var(--av-void);transition:all .2s var(--ease);position:relative;}
.d-chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--av-signal);transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease);}
.d-chip:hover{border-color:var(--av-line);background:var(--av-panel);}
.d-chip.on{background:var(--av-steel);border-color:var(--av-line);}
.d-chip.on::before{transform:scaleY(1);}
.d-chip img{flex:none;width:50px;height:38px;object-fit:cover;border:1px solid var(--av-line-soft);filter:grayscale(.4) brightness(.85);}
.d-chip img.is-draw{object-fit:contain;padding:3px;filter:invert(1) contrast(1.05);mix-blend-mode:screen;background:var(--av-panel);}
.d-chip.on img{filter:grayscale(0) brightness(1);border-color:var(--av-signal);}
.d-chip.on img.is-draw{filter:invert(1) contrast(1.1);}
.d-chip .m{min-width:0;}
.d-chip .nm{font-family:var(--font-d);font-weight:500;font-size:12px;text-transform:uppercase;line-height:1.12;color:var(--av-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-chip.on .nm,.d-chip:hover .nm{color:var(--av-snow);}
.d-chip .sub{font-family:var(--font-m);font-size:9.5px;letter-spacing:.04em;color:var(--av-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ════════ БЛОК ПОДАЧИ ════════ */
.d4-block{margin-top:clamp(34px,5vw,64px);}
.d4-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.d4-tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--av-void);background:var(--av-signal);padding:5px 12px;white-space:nowrap;}
.d4-tname{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,2vw,26px);text-transform:uppercase;letter-spacing:-.01em;line-height:1;}
.d4-tdesc{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;color:var(--av-muted);line-height:1.55;max-width:62ch;flex:1 1 260px;text-transform:none;}
.d4-tdesc b{color:var(--av-body);font-weight:500;}

/* баннер: инфо слева / витрина справа */
.dossier{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:1px;background:var(--av-line-soft);border:1px solid var(--av-line);
  min-width:0;max-width:100%;
}
@media (max-width:900px){ .dossier{grid-template-columns:1fr;} }

/* ── левая колонка — контекст объекта ── */
.d-info{background:var(--av-void);display:flex;flex-direction:column;padding:clamp(20px,2.2vw,32px);min-width:0;}
.d-info .kick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.d-info .id{font-family:var(--font-m);font-size:12px;letter-spacing:.12em;color:var(--av-signal);}
.d-info .cat{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--av-body);border:1px solid var(--av-line);padding:3px 10px;}
.d-info .stt{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--av-muted);margin-left:auto;display:flex;align-items:center;gap:6px;}
.d-info .stt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--av-signal);}
.d-info .stt.wip::before{background:#FFB020;}
.d-info h2{font-family:var(--font-d);font-weight:600;font-size:clamp(23px,2.3vw,34px);text-transform:uppercase;line-height:1.04;letter-spacing:-.012em;margin-top:14px;text-wrap:balance;}
.d-info .loc{font-family:var(--font-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--av-muted);margin-top:9px;display:flex;align-items:center;gap:8px;}
.d-info .loc::before{content:"◈";color:var(--av-signal);font-size:10px;}
.d-info .desc{color:var(--av-body);font-size:13.5px;line-height:1.6;margin-top:14px;max-width:52ch;text-wrap:pretty;}
.d-info .desc strong{color:var(--av-snow);font-weight:400;}
.d-spec{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--av-line-soft);border:1px solid var(--av-line-soft);}
@media (max-width:460px){ .d-spec{grid-template-columns:1fr;} }
.d-spec .sp{background:var(--av-void);padding:9px 13px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.d-spec .k{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-muted);}
.d-spec .v{font-family:var(--font-m);font-size:12.5px;color:var(--av-snow);text-align:right;}
.d-spec .v.sig{color:var(--av-signal);}
.d-info .cta{margin-top:auto;padding-top:20px;}

/* кнопка «курсор-вайп» */
.cv-btn-wipe{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-m);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px 15px 42px;
  background:transparent;color:var(--av-signal);border:1px solid var(--av-signal);border-radius:0;
  overflow:hidden;position:relative;z-index:0;max-width:100%;white-space:normal;line-height:1.3;
  transition:color .2s var(--ease) .05s,box-shadow .26s var(--ease);}
.cv-btn-wipe .arr{position:relative;z-index:1;transition:transform .22s var(--ease);}
.cv-btn-wipe:hover .arr{transform:translateX(5px);}
.cv-btn-wipe::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:9px;height:16px;background:var(--av-signal);z-index:1;pointer-events:none;transition:background .2s var(--ease),left .26s var(--ease);}
@media (prefers-reduced-motion: no-preference){ body[data-motion="on"] .cv-btn-wipe::before{animation:cv-btn-cursor 1.1s steps(1,end) infinite;} }
@keyframes cv-btn-cursor{50%{opacity:.15;}}
.cv-btn-wipe::after{content:"";position:absolute;inset:0;background:var(--av-signal);transform:translateX(-101%);transition:transform .36s var(--ease);z-index:-1;pointer-events:none;}
.cv-btn-wipe:hover{color:var(--av-void);box-shadow:0 0 30px color-mix(in srgb,var(--av-signal) 22%,transparent);}
.cv-btn-wipe:hover::after{transform:translateX(0);}
.cv-btn-wipe:hover::before{animation:none;opacity:1;background:var(--av-void);left:18px;}

/* общая высота витрин */
.d-stage{position:relative;overflow:hidden;background:var(--av-panel);min-width:0;
  height:clamp(360px,46vh,500px);}
@media (max-width:900px){ .d-stage{height:clamp(300px,60vw,460px);} }
.d-corner{position:absolute;width:18px;height:18px;border:1px solid rgba(237,242,238,.45);z-index:6;pointer-events:none;}
.d-corner.tl{top:13px;left:13px;border-right:0;border-bottom:0;} .d-corner.br{bottom:13px;right:13px;border-left:0;border-top:0;}
.ph-img{filter:grayscale(.18) contrast(1.05) brightness(.95);}
.is-draw-img{filter:invert(1) contrast(1.06);mix-blend-mode:screen;}

/* ═══════════ ПОДАЧА A · КОНТАКТНАЯ ПЛЁНКА ═══════════ */
.film{position:absolute;inset:0;display:flex;flex-direction:column;}
.film-main{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--av-panel);}
.film-main .layer{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);}
.film-main .layer.on{opacity:1;}
.film-main img{width:100%;height:100%;object-fit:cover;}
.film-main .layer.is-draw{display:flex;align-items:center;justify-content:center;}
.film-main .layer.is-draw img{object-fit:contain;padding:22px;}
.film-cap{position:absolute;left:13px;bottom:13px;z-index:5;font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-snow);background:rgba(4,7,10,.72);padding:6px 11px;border:1px solid var(--av-line-soft);}
.film-cap b{color:var(--av-signal);font-weight:500;}
.film-strip{flex:none;display:flex;gap:6px;padding:9px;background:var(--av-void);border-top:1px solid var(--av-line-soft);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--av-line) transparent;}
.film-strip::-webkit-scrollbar{height:5px;} .film-strip::-webkit-scrollbar-thumb{background:var(--av-line);}
.film-thumb{flex:none;width:74px;height:56px;position:relative;border:1px solid var(--av-line-soft);overflow:hidden;background:var(--av-panel);transition:border-color .2s var(--ease);}
.film-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.7);transition:filter .2s var(--ease);}
.film-thumb.is-draw img{object-fit:contain;padding:4px;filter:invert(1) contrast(1.05) brightness(.8);}
.film-thumb .tg{position:absolute;left:0;bottom:0;font-family:var(--font-m);font-size:7.5px;letter-spacing:.08em;color:var(--av-body);background:rgba(4,7,10,.8);padding:2px 4px;}
.film-thumb:hover img{filter:grayscale(.1) brightness(.95);}
.film-thumb:hover.is-draw img{filter:invert(1) contrast(1.05);}
.film-thumb.on{border-color:var(--av-signal);}
.film-thumb.on img{filter:grayscale(0) brightness(1);}
.film-thumb.on.is-draw img{filter:invert(1) contrast(1.1);}
.film-thumb.on .tg{color:var(--av-signal);}

/* ═══════════ ПОДАЧА B · РАСКЛАДКА (МОЗАИКА) ═══════════ */
.mos{position:absolute;inset:0;display:grid;gap:2px;padding:2px;background:var(--av-line-soft);
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);}
.mos-tile{position:relative;overflow:hidden;background:var(--av-panel);cursor:zoom-in;}
.mos-tile:first-child{grid-column:1 / 3;grid-row:1 / 3;}
.mos-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s var(--ease);}
.mos-tile.is-draw{display:flex;align-items:center;justify-content:center;}
.mos-tile.is-draw img{object-fit:contain;padding:14px;}
.mos-tile:hover img{transform:scale(1.05);}
.mos-tile .tg{position:absolute;left:9px;top:9px;font-family:var(--font-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-snow);background:rgba(4,7,10,.7);padding:4px 8px;border:1px solid var(--av-line-soft);z-index:2;}
.mos-tile .tg.draw{color:var(--av-signal);}
.mos-tile .zoom{position:absolute;right:9px;bottom:9px;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--av-line);background:rgba(4,7,10,.6);color:var(--av-snow);font-size:13px;opacity:0;transition:opacity .2s var(--ease);z-index:2;}
.mos-tile:hover .zoom{opacity:1;}
.mos-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;background:rgba(4,7,10,.62);color:var(--av-snow);font-family:var(--font-m);z-index:2;}
.mos-more b{font-size:22px;color:var(--av-signal);font-weight:500;}
.mos-more span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--av-body);}

/* ═══════════ ПОДАЧА C · ПРОЕКТ ↔ ФАКТ (ШТОРКА) ═══════════ */
.cmp{position:absolute;inset:0;overflow:hidden;background:var(--av-panel);touch-action:none;user-select:none;}
.cmp-side{position:absolute;inset:0;overflow:hidden;}
.cmp-after img{width:100%;height:100%;object-fit:cover;}
.cmp-before{background:var(--av-steel);}
.cmp-before .wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.cmp-before img{width:100%;height:100%;object-fit:contain;padding:20px;}
.cmp-lbl{position:absolute;top:13px;z-index:4;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--av-snow);background:rgba(4,7,10,.74);padding:5px 10px;border:1px solid var(--av-line-soft);}
.cmp-lbl.l{left:13px;color:var(--av-signal);}
.cmp-lbl.r{right:13px;}
.cmp-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--av-signal);z-index:5;cursor:ew-resize;}
.cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:-18px;right:-18px;}
.cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;display:grid;place-items:center;background:var(--av-signal);color:var(--av-void);font-family:var(--font-m);font-size:13px;font-weight:700;box-shadow:0 0 0 4px rgba(4,7,10,.4),0 0 22px color-mix(in srgb,var(--av-signal) 35%,transparent);}
.cmp-hint{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:4;font-family:var(--font-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--av-body);background:rgba(4,7,10,.7);padding:5px 11px;border:1px solid var(--av-line-soft);white-space:nowrap;}
.cmp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;font-family:var(--font-m);font-size:11px;letter-spacing:.06em;color:var(--av-muted);text-transform:uppercase;line-height:1.7;}

/* ═══════════ ПОДАЧА D · КОЛОДА (СТЕК) ═══════════ */
.deck{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px;cursor:pointer;}
.deck-card{position:absolute;width:78%;height:78%;border:1px solid var(--av-line);background:var(--av-panel);overflow:hidden;transition:transform .5s var(--ease),opacity .5s var(--ease),filter .5s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.55);}
.deck-card img{width:100%;height:100%;object-fit:cover;}
.deck-card.is-draw{display:flex;align-items:center;justify-content:center;}
.deck-card.is-draw img{object-fit:contain;padding:20px;}
.deck-card .tg{position:absolute;left:11px;bottom:11px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-snow);background:rgba(4,7,10,.74);padding:5px 10px;border:1px solid var(--av-line-soft);}
.deck-card .tg.draw{color:var(--av-signal);}
.deck-count{position:absolute;left:14px;top:14px;z-index:8;font-family:var(--font-m);font-size:11px;letter-spacing:.1em;color:var(--av-snow);background:rgba(4,7,10,.7);padding:6px 11px;border:1px solid var(--av-line-soft);}
.deck-count b{color:var(--av-signal);font-weight:500;}
.deck-cue{position:absolute;right:14px;bottom:14px;z-index:8;font-family:var(--font-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--av-body);background:rgba(4,7,10,.7);padding:6px 11px;border:1px solid var(--av-line-soft);display:flex;align-items:center;gap:7px;pointer-events:none;}
.deck-cue .sig{color:var(--av-signal);}

/* ═══════════ ЛАЙТБОКС (для мозаики) ═══════════ */
.lbx{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(2,4,6,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:clamp(20px,5vw,70px);}
.lbx.on{display:flex;}
.lbx-img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--av-line);}
.lbx-img.is-draw{filter:invert(1) contrast(1.06);mix-blend-mode:screen;}
.lbx-close{position:absolute;top:22px;right:26px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--av-line);color:var(--av-snow);font-size:20px;background:rgba(4,7,10,.6);transition:all .2s var(--ease);}
.lbx-close:hover{background:var(--av-signal);color:var(--av-void);border-color:var(--av-signal);}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;display:grid;place-items:center;border:1px solid var(--av-line);color:var(--av-snow);font-size:22px;background:rgba(4,7,10,.5);transition:all .2s var(--ease);}
.lbx-nav:hover{background:var(--av-signal);color:var(--av-void);border-color:var(--av-signal);}
.lbx-nav.prev{left:24px;} .lbx-nav.next{right:24px;}
.lbx-cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--av-body);}
.lbx-cap b{color:var(--av-signal);font-weight:500;}

.d-foot{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--av-line-soft);padding-block:clamp(28px,4vw,48px);}
.d-foot p{color:var(--av-body);font-size:14px;line-height:1.6;max-width:70ch;}
.d-foot .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}