/* VXCAR - копия vx360.css от 29.10.2026 для страниц гало-люкса по конвейеру vwork/halocar (первая - /detejling-lyuks/rolls-royce-cullinan/).
   vx360.* правит другой агент под G-Class, эта копия от них не зависит. Ниже исходного - блок «страница машины».
   Было: VX360 - поворот 360, слои услуг и шторка до/после. Макет 29.10.2026, страница /detejling-g-class/.
   Движок общий (vx360.js), цвета токенами сайта. Фон сцены RGB 31,31,34 - тот же, что вшит в кадры. */

.vx3{position:relative;min-width:0}
.vx3__stage{position:relative;aspect-ratio:2000/1020;border-radius:var(--radius);background:#1f1f22;overflow:hidden;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.vx3__stage.is-drag{cursor:grabbing}
.vx3__poster,.vx3-c{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.vx3.is-ready .vx3__poster{visibility:hidden}

/* слой «после» обрезан по ручке: слева после, справа до */
.vx3-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);visibility:hidden;pointer-events:none}
.vx3.is-cmp .vx3-after{visibility:visible}

/* эффекты по маскам кадра: одна полоса-спрайт на все ракурсы, нужный кадр сдвигом */
.vx3-m{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  -webkit-mask-image:var(--mk);mask-image:var(--mk);
  -webkit-mask-size:100% calc(var(--vx-n) * 100%);mask-size:100% calc(var(--vx-n) * 100%);
  -webkit-mask-position:0 var(--vx-fy);mask-position:0 var(--vx-fy);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.vx3-m--paint{--mk:var(--mk-paint,none)}
.vx3-m--wheel{--mk:var(--mk-wheel,none)}

/* бегущий блик: один такт на все слои, чтобы полоса не рвалась на шторке */
@keyframes vx3Sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes vx3BandMask{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.vx3-glare{mix-blend-mode:screen;background:linear-gradient(104deg,transparent 0 38%,rgba(255,255,255,.06) 43%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.06) 57%,transparent 62% 100%);
  background-size:320% 100%;animation:vx3Sweep 9s linear infinite}
.vx3-glare--clean{background:linear-gradient(104deg,transparent 0 47.2%,rgba(255,255,255,.22) 47.8%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.22) 52.2%,transparent 52.8% 100%);background-size:320% 100%}

/* до полировки: голограммы и круговые риски, сильнее всего в блике */
.vx3-swirl{mix-blend-mode:screen}
.vx3-swirl i{position:absolute;inset:0;background-image:var(--fx-swirl);background-size:var(--vx-tile,340px) var(--vx-tile,340px);background-repeat:repeat}
.vx3-swirl__all{opacity:.1}
.vx3-swirl__band{-webkit-mask-image:linear-gradient(104deg,transparent 0 39%,#000 47%,#000 53%,transparent 61% 100%);mask-image:linear-gradient(104deg,transparent 0 39%,#000 47%,#000 53%,transparent 61% 100%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;animation:vx3BandMask 9s linear infinite}
.vx3[data-polish="hard"] .vx3-swirl{background:rgba(255,255,255,.045)}
.vx3[data-polish="hard"] .vx3-swirl__all{opacity:.2}
.vx3[data-polish] .vx3-swirl,.vx3[data-polish] .vx3-glare--before,
.vx3[data-polish] .vx3-glare--clean,.vx3[data-ceramic] .vx3-glare--clean{opacity:1}

/* керамика: капли собираются и скатываются, на дисках ровный блик */
@keyframes vx3Run{from{background-position:0 0}to{background-position:0 var(--vx-tile,340px)}}
.vx3-beads i{position:absolute;inset:0;background-size:var(--vx-tile,340px) var(--vx-tile,340px)}
.vx3-beads__still{background-image:var(--fx-beads)}
.vx3-beads__run{background-image:var(--fx-run);animation:vx3Run 16s linear infinite}
.vx3[data-ceramic] .vx3-beads{opacity:1}
.vx3-wheel{mix-blend-mode:screen;background:linear-gradient(104deg,transparent 0 44%,rgba(255,255,255,.6) 50%,transparent 56% 100%),rgba(255,255,255,.08);background-size:320% 100%,100% 100%;
  animation:vx3Sweep 4.5s linear infinite}
.vx3[data-wheels] .vx3-wheel{opacity:1}
.vx3[data-ceramic] .vx3-after .vx3-c,.vx3[data-gloss] .vx3-after .vx3-c{filter:contrast(1.07) saturate(1.08)}

/* зоны плёнки - только в ракурсе 3/4 спереди */
.vx3 .vx-g__zones{opacity:0;transition:opacity .3s}
.vx3[data-zones].is-home .vx-g__zones{opacity:1}
.vx3[data-zones="light"] .vx-z--light,.vx3[data-zones="classic"] .vx-z--classic,
.vx3[data-zones="premium"] .vx-z--premium,.vx3[data-zones="full"] .vx-z--full{opacity:1;animation:vxGlow 2.8s ease-in-out .5s infinite}
.vx-z{fill:rgba(var(--theme-accent-rgb),.4);stroke:var(--theme-accent-hover);stroke-width:3;opacity:0;transition:opacity .35s}
.vx-z--full{stroke:none;fill:rgba(var(--theme-accent-rgb),.34)}
@keyframes vxGlow{0%,100%{fill-opacity:1}50%{fill-opacity:.55}}

/* ручка шторки */
.vx3__handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:44px;margin-left:-22px;display:none;cursor:ew-resize;touch-action:none;z-index:3;outline:none}
.vx3.is-cmp .vx3__handle{display:block}
.vx3__handle::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--theme-accent);box-shadow:0 0 12px rgba(0,0,0,.6)}
.vx3__handle span{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--theme-accent);box-shadow:0 2px 14px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;transition:transform .2s}
.vx3__handle span::before{content:"";width:18px;height:10px;background:
  linear-gradient(135deg,transparent 45%,#1b1b1e 46% 60%,transparent 61%) 0 0/5px 5px no-repeat,
  linear-gradient(45deg,transparent 45%,#1b1b1e 46% 60%,transparent 61%) 0 5px/5px 5px no-repeat,
  linear-gradient(-135deg,transparent 45%,#1b1b1e 46% 60%,transparent 61%) 13px 0/5px 5px no-repeat,
  linear-gradient(-45deg,transparent 45%,#1b1b1e 46% 60%,transparent 61%) 13px 5px/5px 5px no-repeat}
.vx3__handle:hover span,.vx3__handle.is-drag span{transform:scale(1.08)}
.vx3__handle:focus-visible span{outline:2px solid var(--theme-focus-ring);outline-offset:3px}

.vx3__tag{position:absolute;top:12px;padding:3px 10px;border-radius:99px;background:rgba(20,20,22,.72);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-title);
  display:none;pointer-events:none;z-index:2}
.vx3.is-cmp .vx3__tag{display:block}
.vx3__tag--after{left:12px;color:var(--theme-accent)}
.vx3__tag--before{right:12px}
.vx3__hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;letter-spacing:.06em;color:var(--theme-text-soft);white-space:nowrap;pointer-events:none;transition:opacity .4s;z-index:2}
.vx3__load{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--theme-text-soft);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.vx3__load.is-on{opacity:1}

/* вкладки и панели */
.vx3__tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:14px}
.vx3__tab{position:relative;height:var(--btn-h-sm);padding:0 6px;border:1px solid var(--theme-border);border-radius:var(--radius-sm);background:var(--theme-surface-strong);color:var(--theme-text);
  font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:border-color var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
.vx3__tab:hover{border-color:rgba(var(--theme-accent-rgb),.6);color:var(--theme-title)}
.vx3__tab[aria-selected="true"]{border-color:var(--theme-accent);color:var(--theme-accent);background:rgba(var(--theme-accent-rgb),.1)}
.vx3__tab.is-set::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--theme-accent)}
.vx3__tab:focus-visible,.vx3__opt:focus-visible,.vx3__sw:focus-visible{outline:2px solid var(--theme-focus-ring);outline-offset:2px}
.vx3__pane{margin-top:12px}
.vx3__pane[hidden]{display:none}
.vx3__txt{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--theme-text-muted)}
.vx3__grp{margin-top:10px}
.vx3__gt{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-text-soft)}
.vx3__opts{display:flex;flex-wrap:wrap;gap:6px}
.vx3__opt{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:var(--btn-h-sm);padding:5px 12px;border:1px solid var(--theme-border);border-radius:var(--radius-sm);
  background:var(--theme-surface-strong);color:var(--theme-text);font:inherit;font-size:14px;line-height:1.2;cursor:pointer;text-align:left;transition:border-color var(--motion-fast),color var(--motion-fast)}
.vx3__opt small{font-size:12px;color:var(--theme-text-soft)}
.vx3__opt:hover{border-color:rgba(var(--theme-accent-rgb),.6)}
.vx3__opt[aria-pressed="true"]{border-color:var(--theme-accent);color:var(--theme-accent);background:rgba(var(--theme-accent-rgb),.1)}
.vx3__opt[aria-pressed="true"] small{color:var(--theme-accent)}
.vx3__opt:disabled{opacity:.4;cursor:not-allowed}
.vx3__off{margin:6px 0 0;font-size:12.5px;color:var(--theme-text-soft)}
.vx3__sws{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.vx3__sw{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 2px 6px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--theme-text-muted);font:inherit;font-size:12px;line-height:1.2;cursor:pointer;text-align:center}
.vx3__sw i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.vx3__sw[data-fin="gloss"] i,.vx3__sw[data-fin="metal"] i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 42%),var(--c)}
.vx3__sw[data-fin="metal"] i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 42%),repeating-conic-gradient(rgba(255,255,255,.06) 0 8deg,transparent 8deg 16deg),var(--c)}
.vx3__sw[data-fin="satin"] i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 55%),var(--c)}
.vx3__sw:hover{color:var(--theme-title)}
.vx3__sw[aria-pressed="true"]{border-color:var(--theme-accent);color:var(--theme-accent)}

/* итог */
.vx3__sum{margin-top:16px;padding:14px 16px;border:1px solid rgba(var(--theme-accent-rgb),.45);border-radius:var(--radius-sm);background:rgba(var(--theme-accent-rgb),.05)}
.vx3__sum ul{list-style:none;margin:0;padding:0}
.vx3__sum li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;line-height:1.4;color:var(--theme-text);border-bottom:1px solid var(--theme-border-soft)}
.vx3__sum li b{flex:none;font-weight:400;color:var(--theme-accent)}
.vx3__sum li em{flex:none;font-style:normal;color:var(--theme-text-soft)}
.vx3__empty{margin:0;font-size:14px;color:var(--theme-text-soft)}
.vx3__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap}
.vx3__total{font-size:20px;color:var(--theme-title)}
.vx3__total small{display:block;font-size:12.5px;color:var(--theme-text-soft)}
.vx3__note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--theme-text-soft)}

@media (max-width:991.98px){
 .lx-hero__grid--stage .vx3{order:2;margin:0 0 24px}
}
@media (max-width:767.98px){
 .vx3__stage{margin:0 calc(-1 * var(--gutter));border-radius:0}
 .vx3__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .vx3__sws{grid-template-columns:repeat(4,minmax(0,1fr))}
 .vx3__tag{top:8px;font-size:11px}
 .vx3__hint{font-size:11px;bottom:6px}
 .vx3__handle span{width:36px;height:36px;margin:-18px 0 0 -18px}
 .vx3__total{font-size:18px}
 .vx3__foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
 .vx3-glare,.vx3-swirl__band,.vx3-beads__run,.vx3-wheel,.vx-z{animation:none!important}
 .vx3-glare,.vx3-wheel{background-position:50% 0}
 .vx3-swirl__band{-webkit-mask-position:50% 0;mask-position:50% 0}
}

/* ===== страница машины (конвейер halocar) ===== */
/* зоны плёнки - маска-картинка из zones.py: 0,55 заливка, 1 кромка */
.vx-g__zones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.vx-z--img{fill:rgba(var(--theme-accent-rgb),.78);stroke:none}
.vx-z--img.vx-z--full{fill:rgba(var(--theme-accent-rgb),.62)}
/* первый экран: верх крошек = верх рамки автомобиля, заголовок сразу под крошками (штаб 29.10.2026) */
@media (min-width:992px){
 .lx-hero__grid.lx-hero__grid--car{align-items:start}
 .lx-hero__grid--car .breadcrumbs{margin-top:0;margin-bottom:18px}
 .lx-hero__grid--car .breadcrumbs__list{line-height:1}
}
/* текст + фото 4:3: kicker и заголовок в колонке текста, верх kicker = верх фото, кнопки внизу на уровне низа фото */
.car-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:stretch}
.car-split__txt{display:flex;flex-direction:column;min-width:0}
.car-split__txt .kicker{margin-top:0;line-height:1}
.car-split__txt h2{margin:14px 0 18px}
.car-split__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:24px}
.car-split__photo{align-self:start;aspect-ratio:4/3;margin:0}
@media (max-width:991.98px){
 .car-split{grid-template-columns:1fr;gap:24px}
 .car-split__photo{max-width:520px;width:100%}
}
@media (max-width:767.98px){
 .car-split__cta .btn{flex:1 1 100%}
}