/* Вариант Г страницы kafe (20.10.2026) — «инженерный слой» поверх фото вместо частиц варианта В.
   Подключается после kb.css. Имя файла уникальное: хостинг подставляет одноимённые файлы из корня wafe-split.ru.
   Язык графики: тонкие контуры оборудования с уголками, кольца-якоря и выноски, тонкие пунктирные стрелки
   направления воздуха, мягкие зоны «как на тепловизоре». Ничего не летает и не струится.
   Слои — SVG с viewBox по размеру фото (1400×788) и preserveAspectRatio="xMidYMid slice": режутся ровно как фото (object-fit:cover).
   Классы ставит kafe-g.js: g-on — сцена вошла в экран (один раз), g-ready — вход закончен (задержки --d больше не нужны),
   g-off — сцена вне экрана (бегущий пунктир на паузе), g-act — карточка «под наведением» или в экране на телефоне,
   g-h / g-a / g-c у сцены «Как ходит воздух» — включены вытяжка / приток / кондиционер (копия классов kv-*-on у #kv-svg),
   html.g-still — неподвижный итоговый кадр (?still=1 или prefers-reduced-motion). */
:root{--g-line:#CFEFFF;--g-hot:#FF9A5C;--g-fresh:#CFEFFF;--g-cold:#7FD8FF;--g-bad:#FF6B6B;--g-ok:#5BE3A0;--g-glass:rgba(7,32,95,.72);--g-blue:#0A99CE}

/* --- общее для сцен --- */
.g-stage{isolation:isolate}
.g-stage img{transition:filter 1s ease}
.g-stage.g-on img{filter:brightness(.85)}
.g-svg,.g-zones{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:hidden}
.g-svg *,.g-zones *{pointer-events:none}
.g-svg .kv-hit,.g-svg .kfb-hit{pointer-events:all}
.g-svg .kfb-hitp{pointer-events:stroke}
.g-zones{mix-blend-mode:screen}
/* после входа задержки появления не нужны: смена состояния — сразу */
.g-ready *,.kd-ph:not(.g-act) *{--d:0s !important}

/* полоса «сканирования»: один раз слева направо при входе сцены */
.g-scan{opacity:0}
.g-scan line{stroke:#EAF8FF;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.g-on .g-scan{animation:g-scan 1.2s cubic-bezier(.45,.05,.55,.95) .1s 1 both}
@keyframes g-scan{0%{transform:translateX(0);opacity:0}8%{opacity:.9}88%{opacity:.9}100%{transform:translateX(1440px);opacity:0}}

/* контуры оборудования: прорисовываются (pathLength=1), уголки видоискателя проявляются следом */
.g-eq{opacity:.9;filter:drop-shadow(0 0 1px rgba(6,23,71,.55)) drop-shadow(0 0 4px rgba(207,239,255,.35));transition:opacity .6s ease}
.g-ln,.g-cn{fill:none;stroke:var(--g-line);stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.g-ln{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease var(--d,0s),stroke-dasharray .6s ease,stroke-width .3s}
.g-cn{stroke-width:1.7px;opacity:0;transition:opacity .5s ease var(--d,0s)}
.g-on .g-ln,.g-act .g-ln{stroke-dashoffset:0}
.g-on .g-cn,.g-act .g-cn{opacity:1}

/* кольца-якоря и выноски */
.g-an{fill:rgba(7,32,95,.4);stroke:var(--g-line);stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s ease var(--d,0s)}
.g-on .g-an{opacity:1}
.g-ld{fill:none;stroke:var(--g-line);stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.8;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease var(--d,0s)}
.g-on .g-ld{stroke-dashoffset:0}
.g-ld,.g-an{filter:drop-shadow(0 0 1px rgba(6,23,71,.6))}

/* стрелки направления воздуха: тонкий пунктир 6/6, медленно бежит (3 с на период), маленький наконечник */
.g-ar{opacity:0;filter:drop-shadow(0 0 1px rgba(6,23,71,.75));transition:opacity .6s ease var(--d,0s),transform .8s ease}
.g-ar .g-sh{fill:none;stroke:currentColor;stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:6 6;animation:g-run 3s linear infinite}
.g-ar .g-hd{fill:currentColor}
@keyframes g-run{to{stroke-dashoffset:-12}}
.c-hot{color:var(--g-hot)}
.c-fresh{color:var(--g-fresh)}
.c-cold{color:var(--g-cold)}
.c-bad{color:var(--g-bad)}
.c-ok{color:var(--g-ok)}
.kv-off .g-sh,.g-off .g-sh,.kf-off .g-sh{animation-play-state:paused}

/* мягкие зоны «как на тепловизоре»: перетекают за 0,9–1 с. Режим screen; на светлом фото при 0,25–0,4 зон почти не видно, поэтому плотнее */
.g-zn{opacity:0;transition:opacity .9s ease,transform 1s ease}

/* --- «Как ходит воздух» (К1): состояния по классам g-h / g-a / g-c у #kv-stage --- */
/* стрелки */
.ar-ex{transform-box:fill-box;transform-origin:50% 0}
.g-on.g-h .ar-ex{opacity:.95}
.g-on.g-h:not(.g-a) .ar-ex{opacity:.45;transform:scaleY(.6)}
.g-on.g-a .ar-sup{opacity:.95}
.g-on.g-c .ar-cold{opacity:.95}
.g-on:not(.g-h) .ar-spill{opacity:.95}
.g-on.g-h:not(.g-a) .ar-door{opacity:.95}
/* выключенное оборудование тускнеет; зонт ещё и становится пунктирным — «не работает» */
.g-on:not(.g-h) .eq-hood{opacity:.5}
.g-on:not(.g-h) .eq-hood .g-ln{stroke-dasharray:.014 .01}
.g-on:not(.g-a) .eq-air{opacity:.35}
.g-on:not(.g-c) .eq-ac{opacity:.35}
.eq-door{opacity:.75}
/* зоны */
.g-on.g-c .zn-cool{opacity:.8}
.g-on.g-c:not(.g-h) .zn-cool{opacity:.2}
.g-on:not(.g-h) .zn-ceh{opacity:.55}
.g-on:not(.g-h) .zn-spill{opacity:.55;transform:translate(-560px,30px)}
.g-on.g-h:not(.g-c) .zn-hall{opacity:.5}
/* наведение: предмет ярче, остальные приглушены до 0,4 */
.g-f{transition:opacity .3s ease}
#kv-svg[data-focus] .g-f{opacity:.4}
#kv-svg[data-focus=hood] .g-f[data-f=hood],#kv-svg[data-focus=air] .g-f[data-f=air],
#kv-svg[data-focus=ac] .g-f[data-f=ac],#kv-svg[data-focus=door] .g-f[data-f=door]{opacity:1}
.g-f.on .g-ln{stroke-width:2px}
.g-f.on .g-an{fill:var(--g-blue)}

/* выноски-карточки: номер, название прописными; строка пояснения раскрывается у выбранной */
.g-stage .kvb-tag.g-tag{display:grid;grid-template-columns:auto minmax(0,auto);column-gap:7px;align-items:center;width:max-content;max-width:min(270px,46%);white-space:normal;text-align:left;padding:4px 10px 4px 5px;border-radius:7px;background:var(--g-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(207,239,255,.5);box-shadow:0 4px 14px rgba(6,23,71,.25);color:#fff;transform:translateY(7px);opacity:0;transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s),border-color .3s ease}
.g-stage.g-on .kvb-tag.g-tag{opacity:1;transform:none}
.g-tag i{display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--g-line);color:var(--g-line);font:700 10px/1 'Montserrat',Arial,sans-serif;font-style:normal;transition:background .3s,border-color .3s,color .3s}
.g-tag b{display:block;text-align:left;font:700 10.5px/1.25 'Montserrat',Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.g-tag>span{grid-column:1/-1;display:block;width:0;min-width:100%;max-height:0;overflow:hidden;opacity:0;margin-top:0;font:500 12px/1.35 'Montserrat',Arial,sans-serif;color:#DCEEF7;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease}
.g-stage .kvb-tag.g-tag.on{z-index:5;border-color:rgba(207,239,255,.95);background:rgba(7,32,95,.9)}
.g-tag.on>span{width:auto;max-height:66px;opacity:1;margin-top:4px}
.g-tag.on i{background:var(--g-blue);border-color:var(--g-blue);color:#fff}
.g-stage.g-on #kv-svg[data-focus]~.kvb-tag.g-tag:not(.on){opacity:.4}

/* метки-«показания» рядом с зонами: без цифр и градусов */
.g-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--g-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(207,239,255,.45);color:#fff;font:600 11.5px/1.3 'Montserrat',Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s),border-color .5s ease}
.g-chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--g-cold);transition:background .5s ease}
.g-chip i{display:none;font-style:normal}
.g-on .g-chip{opacity:1;transform:none}
.g-h .g-chip-ceh .t1,.g-stage:not(.g-h) .g-chip-ceh .t2,
.g-h.g-c .g-chip-zal .t1,.g-stage:not(.g-h) .g-chip-zal .t2,.g-h:not(.g-c) .g-chip-zal .t3,.g-chip-door i{display:inline}
.g-chip-ceh::before{background:var(--g-ok)}
.g-stage:not(.g-h) .g-chip-ceh::before,.g-stage:not(.g-h) .g-chip-zal::before,.g-h:not(.g-c) .g-chip-zal::before,.g-chip-door::before{background:var(--g-hot)}
.g-stage:not(.g-h) .g-chip-ceh,.g-stage:not(.g-h) .g-chip-zal,.g-h:not(.g-c) .g-chip-zal,.g-chip-door{border-color:rgba(255,154,92,.85)}
.g-on .g-chip-door{opacity:0;transform:translateY(6px)}
.g-on.g-h:not(.g-a) .g-chip-door{opacity:1;transform:none}

/* номера на фото и список под фото — для телефона (до 600 точек) */
.kvc-n{display:none}
.kvc-list{display:none;list-style:none;margin:0;padding:12px 14px 0;gap:4px}
.kvc-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:7px 8px;border-radius:10px;font-size:14.5px;line-height:1.4;transition:background .3s}
.kvc-list li.on{background:#EAF4FA}
.kvc-list i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font:700 12.5px/1 'Montserrat',Arial,sans-serif;font-style:normal;transition:background .3s}
.kvc-list li.on i{background:var(--blue-1)}
.kvc-list b{color:var(--navy)}
.kvb-pill.is-hot{border-color:#E8590C;background:#FFF0E5;color:#B9470A}
@media (max-width:600px){
  .g-stage .kvb-tag.g-tag,.g-stage .g-chip,.g-svg .g-ld,.g-svg .g-an{display:none}
  .kvc-list{display:grid}
  .kvc-n{display:flex;position:absolute;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;align-items:center;justify-content:center;background:var(--g-glass);border:1.5px solid var(--g-line);color:#fff;font:700 11.5px/1 'Montserrat',Arial,sans-serif;pointer-events:none;opacity:0;transition:opacity .4s ease var(--d,0s),background .3s ease}
  .g-on .kvc-n{opacity:1}
  .kvc-n.on{background:var(--g-blue);border-color:#fff}
  .g-stage .g-ar .g-hd{transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.8)}
}

/* --- неподвижный итоговый кадр: ?still=1 или «уменьшить движение» (класс ставит kafe-g.js) --- */
html.g-still .g-stage *,html.g-still .g-stage,html.g-still .kd-ph *,html.g-still .kvc-list li,html.g-still .kvb-pill{transition:none !important;animation:none !important}
html.g-still .g-scan{display:none}
html.g-still .hb img{animation:none}
@media (prefers-reduced-motion:reduce){
  .g-stage *,.kd-ph *{animation:none !important}
  .g-scan{display:none}
}

/* --- «Куда поставить наружный блок» (К2): выбранное место — класс sel-… у #kf-svg (ставит скрипт страницы) ---
   Слой выбранного места прорисовывается заново при каждом выборе, прежний гаснет. --k — задержка внутри слоя, --k0 — ожидание полосы сканирования при входе. */
.kfb-stage.g-stage img{filter:none}
.kfb-stage.g-stage.g-on img{filter:brightness(.85)}
.g-on:not(.g-ready) .kfb-g,.g-on:not(.g-ready) .g-lab{--k0:1.1s}
.g-stage.kfb-stage .kfb-g{opacity:0;transition:opacity .6s ease}
.g-stage.g-on .kfb-g.hov{opacity:.55}
.g-stage.g-on.sel-ulica .kfb-ulica,.g-stage.g-on.sel-dvor .kfb-dvor,.g-stage.g-on.sel-krovlya .kfb-krovlya,.g-stage.g-on.sel-vozduh .kfb-vozduh{opacity:1}
.kfb-g .g-ln{transition:stroke-dashoffset .9s ease calc(var(--k0,0s) + var(--k,0s))}
.kfb-g .g-ld{transition:stroke-dashoffset .5s ease calc(var(--k0,0s) + .55s)}
.kfb-g .g-cn{transition:opacity .5s ease calc(var(--k0,0s) + .5s)}
.kfb-g .g-an{transition:opacity .4s ease calc(var(--k0,0s) + .45s)}
.kfb-g .g-ar{transition:opacity .5s ease calc(var(--k0,0s) + var(--k,0s))}
.g-on .kfb-g .g-ln,.g-on .kfb-g .g-ld{stroke-dashoffset:1}
.g-on .kfb-g .g-cn,.g-on .kfb-g .g-an{opacity:0}
.g-on.sel-ulica .kfb-ulica :is(.g-ln,.g-ld),.g-on.sel-dvor .kfb-dvor :is(.g-ln,.g-ld),.g-on.sel-krovlya .kfb-krovlya :is(.g-ln,.g-ld),.g-on.sel-vozduh .kfb-vozduh :is(.g-ln,.g-ld),.g-on .kfb-g.hov :is(.g-ln,.g-ld){stroke-dashoffset:0}
.g-on.sel-ulica .kfb-ulica :is(.g-cn,.g-an),.g-on.sel-dvor .kfb-dvor :is(.g-cn,.g-an),.g-on.sel-krovlya .kfb-krovlya :is(.g-cn,.g-an),.g-on.sel-vozduh .kfb-vozduh :is(.g-cn,.g-an),.g-on .kfb-g.hov :is(.g-cn,.g-an){opacity:1}
.g-on.sel-vozduh .kfb-vozduh .g-ar,.g-on .kfb-vozduh.hov .g-ar{opacity:.95}
/* улица — «нельзя»: красный пунктир, бледная красная заливка; двор — «можно»: зелёная рамка с уголками */
.g-nope{fill:rgba(255,107,107,.15);stroke:var(--g-bad);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:6 6;animation:g-run 3.5s linear infinite;filter:drop-shadow(0 0 1px rgba(6,23,71,.6))}
.g-okl,.g-okc{stroke:var(--g-ok)}
.g-okl{stroke-width:1.25px}
/* мягкое затемнение вокруг выбранного места */
.g-dim{opacity:0;transition:opacity .6s ease}
.g-on.sel-ulica .g-dim[data-k=ulica],.g-on.sel-dvor .g-dim[data-k=dvor],.g-on.sel-krovlya .g-dim[data-k=krovlya],.g-on.sel-vozduh .g-dim[data-k=vozduh]{opacity:1}
/* подписи мест */
.g-lab{position:absolute;z-index:3;display:block;width:max-content;max-width:min(280px,46%);padding:6px 11px 7px;border-radius:7px;background:var(--g-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(207,239,255,.5);box-shadow:0 4px 14px rgba(6,23,71,.25);color:#fff;text-align:left;pointer-events:none;opacity:0;transform:translateY(7px);transition:opacity .35s ease,transform .35s ease}
.g-lab b{display:block;font:700 10.5px/1.3 'Montserrat',Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.g-lab span{display:block;margin-top:3px;font:500 12px/1.35 'Montserrat',Arial,sans-serif;color:#DCEEF7}
.g-lab.bad{border-color:rgba(255,107,107,.85)}
.g-lab.ok{border-color:rgba(91,227,160,.85)}
.g-lab.hot{border-color:rgba(255,154,92,.85)}
.g-on.sel-ulica .g-lab[data-k=ulica],.g-on.sel-dvor .g-lab[data-k=dvor],.g-on.sel-krovlya .g-lab[data-k=krovlya],.g-on.sel-vozduh .g-lab[data-k=vozduh]{opacity:1;transform:none;transition-delay:calc(var(--k0,0s) + .7s)}
@media (max-width:600px){
  .g-lab,.kfb-g .g-ld{display:none}
}

/* --- карточки «Весь воздух — одним договором»: на ПК слой появляется при наведении, на телефоне — пока карточка в экране --- */
.kd-z{position:absolute;left:0;top:0;width:100%;height:100%}
.kd-z picture{display:block;width:100%;height:100%}
@media (hover:hover){.kd-card:hover .kd-ph img{transform:none}}
.kd-ph.g-card img{transition:filter .6s ease}
.kd-ph.g-act img{filter:brightness(.85)}
.g-act .g-ar{opacity:.95}
.g-cap{position:absolute;left:8px;bottom:36px;z-index:2;max-width:calc(100% - 16px);display:flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:7px;background:var(--g-glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(207,239,255,.5);box-shadow:0 4px 14px rgba(6,23,71,.25);color:#fff;font:600 12px/1.3 'Montserrat',Arial,sans-serif;text-align:left;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .4s ease var(--d,0s),transform .4s ease var(--d,0s)}
.g-cap::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--g-fresh)}
.g-cap.hot::before{background:var(--g-hot)}
.g-cap.cold::before{background:var(--g-cold)}
.g-act .g-cap{opacity:1;transform:none}