/* 3D-витрина на главной (core/_hero3d.html + js/3d/home3d.js). Всё внутри .h3d, чтобы не задевать стили сайта. */
.h3d{--on-dark:#E6EEF7;--muted-dark:#9FB0C4;position:relative;height:calc(100svh - 64px);min-height:600px;color:var(--on-dark);overflow:hidden;
  background:radial-gradient(90% 80% at 72% 45%,#1a3557 0%,var(--navy) 62%)}
.h3d::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,70%) var(--gy,55%),rgba(123,82,255,calc(var(--uvk,.15) * .5)) 0%,transparent 45%)}
.h3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.h3d-copy{position:absolute;z-index:2;left:max(24px,calc((100vw - 1280px) / 2 + 24px));top:50%;transform:translateY(-46%);width:min(500px,42vw);transition:opacity .5s}
.h3d-eyebrow{font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--uv-glow);margin-bottom:16px}
.h3d-copy h1{font-size:clamp(32px,3.6vw,52px);line-height:1.05;margin:0 0 16px;color:#fff}
.h3d-lead{color:var(--muted-dark);font-size:18px;margin:0 0 26px}
.h3d-btns{display:flex;gap:12px;flex-wrap:wrap}
.h3d .h3d-ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.5px #3A557A}
.h3d .h3d-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--uv-glow)}
.h3d-peek-m{display:none}

/* карточка выбранной модели под ней */
.h3d-model{position:absolute;z-index:2;left:var(--fx,70%);top:calc(var(--fb,78%) + 18px);transform:translateX(-50%);text-align:center;width:360px;transition:opacity .5s}
.h3d-name{display:block;font:600 22px var(--display);color:#fff;text-decoration:none}
.h3d-name:hover{color:var(--uv-glow)}
.h3d-alt{color:var(--muted-dark);font-size:13px}
.h3d-meta{color:var(--muted-dark);font-size:15px;margin:2px 0 10px}
.h3d-meta b{color:var(--on-dark)}
.h3d-dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.h3d-dots i{width:7px;height:7px;border-radius:50%;background:#34507a;transition:background .3s,transform .3s;cursor:pointer}
.h3d-dots i.on{background:var(--uv-glow);transform:scale(1.3)}
.h3d-arrow{position:absolute;z-index:3;top:var(--fy,50%);width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1.5px solid #3A557A;background:rgba(14,27,44,.5);color:var(--on-dark);font-size:22px;cursor:pointer;transition:border-color .2s,background .2s,opacity .5s}
.h3d-arrow:hover{border-color:var(--uv-glow);background:rgba(91,52,230,.25)}
.h3d-arrow.prev{left:calc(var(--fx,70%) - var(--fr,150px) - 84px)}
.h3d-arrow.next{left:calc(var(--fx,70%) + var(--fr,150px) + 32px)}

/* «Заглянуть внутрь» — пульсирующая УФ-кнопка */
.h3d-peek{position:relative;margin-top:4px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;color:#fff;font:600 16px var(--text);
  background:linear-gradient(135deg,#7B5CFF,#5B34E6 55%,#3E22B8);box-shadow:0 0 24px rgba(123,92,255,.65),inset 0 0 0 1px rgba(255,255,255,.25)}
.h3d-peek::before,.h3d-peek::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(183,166,255,.7);animation:h3d-pulse 2.4s ease-out infinite}
.h3d-peek::after{animation-delay:1.2s}
.h3d-peek small{display:block;font-weight:400;font-size:12px;opacity:.8}
@keyframes h3d-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.35,1.7);opacity:0}}

/* кино: разборка поверх всего окна */
.h3d.film{position:fixed;inset:0;z-index:50;height:auto;min-height:0}
.h3d.film .h3d-copy,.h3d.film .h3d-model,.h3d.film .h3d-arrow{opacity:0;pointer-events:none}
.h3d-filmui{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
.h3d.film .h3d-filmui{opacity:1}
/* пока не кино, невидимые кнопки кино не должны перехватывать клики (ползунок лежал поверх «Заглянуть внутрь») */
.h3d:not(.film) .h3d-filmui *{pointer-events:none!important}
.h3d-track,.h3d-track *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.h3d-fcap{position:absolute;left:max(24px,calc((100vw - 1280px) / 2 + 24px));top:50%;transform:translateY(-50%);width:min(420px,36vw)}
.h3d-fcap h2{font-size:clamp(26px,2.8vw,40px);line-height:1.1;margin:0 0 12px;color:#fff}
.h3d-fcap p{color:var(--muted-dark);font-size:17px;margin:0}
.h3d-fcap>div{transition:opacity .45s,transform .45s}
.h3d-fcap .fade{opacity:0;transform:translateY(12px)}
.h3d-fbar{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(560px,80vw);display:flex;align-items:center;gap:14px;pointer-events:auto}
.h3d-fbar button{width:40px;height:40px;border-radius:50%;border:1.5px solid #3A557A;background:rgba(14,27,44,.6);color:#fff;cursor:pointer;font-size:15px}
.h3d-track{flex:1;height:28px;cursor:grab;position:relative;touch-action:none}
.h3d-track.drag{cursor:grabbing}
.h3d-track::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:#24395a}
.h3d-track i{position:absolute;left:0;top:12px;height:4px;width:0;border-radius:2px;background:linear-gradient(90deg,#7B5CFF,var(--uv-glow))}
.h3d-track b{position:absolute;top:6px;left:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(123,92,255,.35),0 0 14px rgba(183,166,255,.8);transition:transform .15s}
.h3d-track:hover b,.h3d-track.drag b{transform:scale(1.25)}
.h3d-fclose{position:absolute;right:24px;top:20px;pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid #3A557A;background:rgba(14,27,44,.6);color:#fff;font-size:22px;cursor:pointer}
.h3d-fend{position:absolute;left:max(24px,calc((100vw - 1280px) / 2 + 24px));bottom:90px;display:flex;gap:12px;pointer-events:auto;opacity:0;transition:opacity .5s}
.h3d-fend.on{opacity:1}
.h3d-labels{position:absolute;inset:0;pointer-events:none}
.h3d .lbl{position:absolute;white-space:nowrap;font-size:13px;line-height:1.2;color:#fff;background:rgba(14,27,44,.78);border:1px solid #36507a;border-radius:6px;padding:5px 9px;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.h3d .lbl b{display:block;font-weight:600}.h3d .lbl small{color:var(--muted-dark);font-size:12px}.h3d .lbl.on{opacity:1}
.h3d-loading{position:absolute;z-index:1;left:70%;top:50%;transform:translate(-50%,-50%);color:var(--muted-dark);font-size:14px}

/* без 3D (старый браузер, нет WebGL, «уменьшить движение»): фото выбранной установки */
.h3d-still{position:absolute;z-index:1;left:66%;top:44%;transform:translate(-50%,-50%);max-height:62%;max-width:34%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.h3d.static .h3d-arrow,.h3d.static .h3d-peek,.h3d.static .h3d-peek-m,.h3d.static .h3d-loading{display:none}

@media (max-width:860px){
  .h3d{height:auto;min-height:0;padding-top:72svh}
  .h3d canvas{height:72svh;bottom:auto}
  .h3d.film{padding-top:0}.h3d.film canvas{height:100%}
  .h3d-copy{position:relative;left:auto;top:auto;transform:none;width:auto;padding:18px 16px 28px}
  .h3d-copy h1{font-size:28px}.h3d-lead{font-size:15px;margin-bottom:14px}
  .h3d-btns .btn{padding:11px 16px;font-size:15px}
  .h3d-model{width:300px}
  .h3d-name{font-size:20px}.h3d-meta{font-size:14px;margin-bottom:8px}.h3d-dots{margin-bottom:8px}
  .h3d-peek{padding:11px 22px;font-size:15px}
  .h3d-loading{left:50%;top:30%}
  .h3d-still{left:50%;top:30svh;max-width:70%;max-height:44svh}
  .h3d-fcap{top:auto;bottom:90px;transform:none;width:auto;right:16px;left:16px}
  .h3d-fcap h2{font-size:24px}.h3d-fcap p{font-size:15px}
  .h3d-fend{bottom:150px;left:16px}
  .h3d .lbl small{display:none}
}