/* Dr House — страницата „Процес“. Идва след stil.css и ползва неговите цветове.

   Скоростта: сцената стои с position:sticky, текстовете минават над нея.
   Нищо тук не се смята при скрол. Без backdrop-filter и filter над платното:
   те биха прерисували целия екран при всеки кадър. */

.str-proces{background:#070a10}
.str-proces .glava.lepne{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,12,18,.94)}
.str-proces .glava::before{background:linear-gradient(180deg,rgba(6,9,14,.8) 0%,rgba(6,9,14,.45) 55%,rgba(6,9,14,0) 100%)}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ═════ ЗАРЕЖДАНЕ ═════ */
.zar{display:none}
.js .zar{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#070a10;
  transition:opacity .8s var(--lek),visibility .8s}
.zar.gotovo{opacity:0;visibility:hidden}
.js .zar[hidden]{display:none}           /* иначе display:grid бие атрибута hidden */
.zar-vatre{width:min(360px,78vw)}
.zar-plan{width:100%;height:auto;display:block;overflow:visible}
.zar-plan path{stroke:var(--zlato);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--p,0));vector-effect:non-scaling-stroke}
.zar-plan path.tanka{stroke:rgba(226,102,43,.45);stroke-width:1;stroke-dashoffset:calc(1 - var(--p,0) * var(--p,0))}
.zar-red{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8b94a3}
.zar-ime i{font-style:normal;color:var(--zlato);margin:0 .3em}
.zar-pr{color:#fff;font-size:13px}
.zar-pr b{font-weight:700;font-size:28px;letter-spacing:.02em;margin-right:2px;font-variant-numeric:tabular-nums}
.zar-lenta{height:2px;background:rgba(255,255,255,.08);margin-top:12px;overflow:hidden;border-radius:2px}
.zar-lenta i{display:block;height:100%;background:var(--zlato);transform-origin:left;transform:scaleX(var(--p,0))}

/* ═════ СЦЕНАТА ═════ */
.pr-scena{position:relative}
.pr-lepne{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;z-index:0;background:#070a10}
#platno{position:absolute;inset:0;width:100%;height:100%;display:block}
.pr-rezerva{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.js) .pr-rezerva,.bez-3d .pr-rezerva{display:block}
html:not(.js) #platno,.bez-3d #platno,html:not(.js) .pr-tablo,.bez-3d .pr-tablo,
html:not(.js) .pr-dolu,.bez-3d .pr-dolu,html:not(.js) .pr-tochki,.bez-3d .pr-tochki{display:none}
.pr-vinetka{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 95% at 62% 42%,rgba(7,10,16,0) 58%,rgba(7,10,16,.5) 100%),
             linear-gradient(90deg,rgba(7,10,16,.42) 0%,rgba(7,10,16,0) 38%)}

/* таблото: ден и натрупана стойност */
.pr-tablo{position:absolute;top:96px;right:92px;text-align:right;pointer-events:none;
  font-family:'JetBrains Mono',monospace;color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.35)}
.pr-den{display:grid;grid-template-columns:auto auto;align-items:end;justify-content:end;column-gap:10px}
.pr-den-et{grid-column:1/-1;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--zlato-yark);margin-bottom:-2px}
.pr-den b{font-weight:700;font-size:clamp(64px,7.6vw,120px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pr-den-ot{font-size:15px;color:rgba(255,255,255,.62);padding-bottom:.55em}
.pr-bez-den .pr-den b{color:rgba(255,255,255,.28)}
.pr-cena{margin-top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pr-cena b{font-weight:700;font-size:22px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pr-cena span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* точките на етапите, отдясно */
.pr-tochki{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3px;z-index:3}
.pr-tochka{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;padding:0;color:rgba(255,255,255,.55)}
.pr-tochka i{order:2;width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  transition:background .3s,border-color .3s,transform .3s var(--lek)}
.pr-tochka span{order:1;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s var(--lek);white-space:nowrap;
  background:rgba(7,10,16,.8);padding:3px 7px;border-radius:5px}
.pr-tochka:hover span,.pr-tochka:focus-visible span,.pr-tochka.aktivna span{opacity:1;transform:none}
.pr-tochka.aktivna{color:#fff}
.pr-tochka.aktivna i{background:var(--zlato);border-color:var(--zlato);transform:scale(1.25)}
.pr-tochka:hover i{border-color:#fff}

/* долу вдясно: кой етап е и графикът на обекта и цеха */
.pr-dolu{position:absolute;left:calc(max(24px,(100vw - var(--shir)) / 2 + 24px) + 470px);right:92px;bottom:26px;pointer-events:none;
  font-family:'JetBrains Mono',monospace;color:#fff}
.pr-sega{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pr-sega span{color:var(--zlato-yark)}
.pr-sega span:empty{display:none}
.pr-sega b{font-weight:700;font-size:14px}
.pr-sega i{font-style:normal;color:rgba(255,255,255,.5);margin-left:auto}
.pr-grafik{position:relative;--etiket:52px}
.pr-grafik-red{display:grid;grid-template-columns:var(--etiket) 1fr;align-items:center;height:14px;margin-top:5px}
.pr-grafik-red>span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pr-pista{position:relative;height:100%}
.pr-grafik-red:not(.pr-skala) .pr-pista{background:rgba(255,255,255,.07);border-radius:3px}
.pr-kut{position:absolute;top:0;bottom:0;padding:0 1px}
.pr-kut i{display:block;height:100%;border-radius:2px;background:rgba(255,255,255,.26);transition:background .35s}
.pr-kut.cex i{background:rgba(174,182,194,.36)}
.pr-kut.aktivna i{background:var(--zlato)}
.pr-skala{height:12px}
.pr-skala .pr-pista span{position:absolute;top:1px;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.45)}
.pr-skala .pr-pista span:first-child{transform:none}
.pr-skala .pr-pista span:last-child{transform:translateX(-100%)}
.pr-grafik-glava{position:absolute;inset:-4px 0 12px 0;display:grid;grid-template-columns:var(--etiket) 1fr}
.pr-grafik-glava .pr-pista{grid-column:2}
#grafik-glava{position:absolute;inset:0;will-change:transform}
#grafik-glava i{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px rgba(255,177,131,.9)}

/* ═════ КАРТИТЕ С ЕТАПИТЕ ═════ */
.pr-karti{position:relative;z-index:2;margin-top:-100vh;margin-top:-100lvh;pointer-events:none}
.pr-uvod{height:100vh;height:100lvh;display:flex;align-items:flex-end;padding:0 24px calc(110px + 6vh)}
.pr-uvod-vatre{max-width:var(--shir);margin:0 auto;width:100%;pointer-events:auto}
.pr-h1{font-family:'Rubik',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(44px,7.4vw,118px);max-width:8.6em;margin:18px 0 22px;
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.pr-uvod-p{max-width:470px;color:rgba(255,255,255,.82);font-size:17px}
.pr-mishka{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pr-mishka i{width:18px;height:28px;border:1.5px solid rgba(255,255,255,.6);border-radius:10px;position:relative}
.pr-mishka i::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;background:var(--zlato);
  border-radius:2px;animation:mishka 1.8s var(--lek) infinite}
@keyframes mishka{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* Уводът влиза, след като си отиде зареждането. */
.js .pr-uvod-vatre>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--lek),transform .9s var(--lek)}
.pr-vlyazlo .pr-uvod-vatre>*{opacity:1;transform:none}
.pr-vlyazlo .pr-uvod-vatre>:nth-child(2){transition-delay:.12s}
.pr-vlyazlo .pr-uvod-vatre>:nth-child(3){transition-delay:.26s}
.pr-vlyazlo .pr-uvod-vatre>:nth-child(4){transition-delay:.4s}

.pr-etap{height:100vh;height:100lvh;position:relative}
.pr-etap.dalag{height:240vh;height:240lvh}
.pr-etap.sreden{height:150vh;height:150lvh}
.pr-karta{position:sticky;top:26vh;pointer-events:auto;
  margin-left:max(24px,calc((100vw - var(--shir)) / 2 + 24px));width:min(430px,calc(100vw - 48px));
  background:rgba(8,11,17,.86);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px 28px 24px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.pr-karta-gore{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.pr-karta-nom{color:var(--zlato-yark);font-weight:700}
.pr-karta-nom::before{content:"";display:inline-block;width:8px;height:8px;background:var(--zlato);margin-right:10px;border-radius:1px}
.pr-karta-dni{color:rgba(255,255,255,.6)}
.pr-karta h2{font-family:'Rubik',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(26px,2.4vw,34px);line-height:1;margin-bottom:12px}
.pr-karta p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.6}
.pr-proverka{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.pr-karta .pr-proverka{font-size:13.5px;color:rgba(255,255,255,.66)}
.pr-proverka svg{flex:0 0 18px;width:18px;height:18px;color:var(--zlato);margin-top:2px}

/* ═════ ОБОБЩЕНИЕТО ═════ */
.pr-kraj{position:relative;z-index:3;background:var(--fon);padding:120px 0 110px;border-top:1px solid var(--linia)}
.pr-kraj-red{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.pr-kraj .glavno{margin:14px 0 22px}
.pr-kraj-p{color:var(--sivo);max-width:520px}
.pr-kraj-knopki{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.pr-ili{color:var(--sivo);font-size:15px;flex-basis:100%}
.pr-kam-konf{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px;border-radius:56px;border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:600;transition:border-color .25s,background .25s}
.pr-kam-konf svg{width:18px;height:18px;color:var(--zlato-yark);transition:transform .25s var(--lek)}
.pr-kam-konf:hover{border-color:var(--zlato);background:rgba(226,102,43,.08)}
.pr-kam-konf:hover svg{transform:translateX(4px)}
.pr-ili a{color:#fff;font-weight:600;white-space:nowrap}
.pr-tablica{background:var(--fon-2);border:1px solid var(--linia);border-radius:var(--rad);padding:8px 26px 20px;overflow-x:auto}
.pr-tablica table{width:100%;border-collapse:collapse;font-size:14.5px}
.pr-tablica th{text-align:left;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sivo-2);padding:16px 0 12px}
.pr-tablica th:not(:first-child),.pr-tablica td:not(:first-child){text-align:right;white-space:nowrap;padding-left:18px}
.pr-tablica td{padding:10px 0;border-top:1px solid var(--linia);color:#dfe3ea}
.pr-tablica td:first-child span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--zlato-yark);margin-right:12px}
.pr-tablica td:nth-child(2){color:var(--sivo)}
.pr-tablica tfoot td{border-top:1px solid rgba(255,255,255,.2);padding-top:16px;font-weight:700;color:#fff;vertical-align:top}
.pr-tablica tfoot td:last-child{font-size:19px}
.pr-tablica tfoot small{display:block;font-weight:500;font-size:12px;color:var(--zlato-yark);margin-top:3px}
.pr-belejka{margin-top:40px;font-size:13px;color:var(--sivo-2);max-width:760px}

/* Когато 3D работи, се вижда само картата на текущия етап: иначе предишната
   минава нагоре през сцената и таблото. Без JS всички карти си стоят. */
.pr-3d .pr-karta{opacity:0;transform:translateY(14px);transition:opacity .45s var(--lek),transform .45s var(--lek)}
.pr-3d .pr-etap.aktiven .pr-karta{opacity:1;transform:none}
.pr-3d .pr-uvod:not(.aktiven) .pr-uvod-vatre{opacity:0;transition:opacity .4s var(--lek)}

/* режимът за снимки при проверка (#t=…&snimka) */
.pr-snimka .pr-karti{visibility:hidden}
.pr-cisto .glava,.pr-cisto .pr-tablo,.pr-cisto .pr-dolu,.pr-cisto .pr-tochki,.pr-cisto .pr-vinetka{display:none}

/* ═════ ПО-ТЕСНИ ЕКРАНИ ═════ */
@media (max-width:1180px){
  .pr-dolu{left:auto;width:min(520px,calc(100vw - 560px))}
}
@media (max-width:1040px){
  .pr-dolu{display:none}
  .pr-tablo{top:92px;right:76px}
  .pr-kraj-red{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  .pr-tochki{display:none}
  .pr-vinetka{background:linear-gradient(180deg,rgba(7,10,16,.55) 0%,rgba(7,10,16,0) 26%,rgba(7,10,16,0) 52%,rgba(7,10,16,.6) 100%)}
  .pr-tablo{top:78px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;text-align:left}
  .pr-den{justify-content:start}
  .pr-den b{font-size:54px}
  .pr-den-ot{font-size:13px}
  .pr-cena{margin:0 0 4px;align-items:flex-end;text-align:right}
  .pr-cena b{font-size:17px}
  .pr-cena span{font-size:9px;max-width:130px}
  .pr-uvod{align-items:flex-end;padding:0 18px calc(40px + env(safe-area-inset-bottom))}
  .pr-h1{font-size:clamp(40px,12.4vw,64px);margin:14px 0 16px}
  .pr-uvod-p{font-size:15.5px}
  .pr-etap{display:flex;align-items:flex-end}
  .pr-karta{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));margin:0 12px;width:calc(100vw - 24px);
    padding:18px 18px 16px;border-radius:16px;background:rgba(8,11,17,.9)}
  .pr-karta h2{font-size:24px;margin-bottom:8px}
  .pr-karta p{font-size:14.5px;line-height:1.5}
  .pr-proverka{margin-top:12px;padding-top:10px}
  .pr-kraj{padding:80px 0 70px}
  .pr-tablica{padding:4px 16px 16px}
  .pr-tablica table{font-size:13.5px}
  .pr-tablica td:nth-child(2),.pr-tablica th:nth-child(2){display:none}
}
@media (max-width:374px){
  .pr-h1{font-size:36px}
  .pr-den b{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .js .pr-uvod-vatre>*{opacity:1;transform:none;transition:none}
  .pr-mishka i::after{animation:none}
}