/* param-hotspots.css - Technické parametry s body napasovanými na stroj (.ig-section--anchored)
   Načítá se jen u stroje s body v machine_param_hotspots, doplňuje .ig-* z detail.css. */

/* ── Sloupce: bubliny absolutně ve výšce svých bodů (rozmístí JS) ── */
.ig-section--anchored .ig-col-left,
.ig-section--anchored .ig-col-right{display:block;position:relative;min-height:0;padding:0;align-self:stretch}
.ig-section--anchored .ig-col-left{margin-right:28px}
.ig-section--anchored .ig-col-right{margin-left:28px}
.ig-section--anchored .callout{position:absolute;width:270px;margin:0!important;transition:top .45s var(--ease-out),opacity .35s,background .35s,border-color .35s,box-shadow .35s,transform .3s var(--ease-out);outline:none}
.ig-section--anchored .ig-col-left .callout{right:0}
.ig-section--anchored .ig-col-right .callout{left:0}
.ig-section--anchored .callout-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ig-section--anchored .callout.side-left .callout-head{flex-direction:row-reverse}
.ig-section--anchored .callout-head .callout-icon{margin:0;flex:none}
.ig-section--anchored .callout-head .callout-title{margin:0}
.ig-section--anchored .callout:hover{transform:none}
.ig-section--anchored .callout.is-active{transform:none;background:rgba(15,30,46,.32);border-color:rgba(255,255,255,.55);box-shadow:0 14px 34px rgba(15,30,46,.28),inset 0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ig-section--anchored .callout:focus-visible{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.ig-section--anchored .callout-expand{background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);cursor:pointer}
.ig-section--anchored .callout-expand:hover,.ig-section--anchored .callout-expand:focus-visible{color:#fff}

/* Lomená spojnice */
.ig-section--anchored .connect-line{stroke-linejoin:round}
.ig-section--anchored .connect-line.is-active{stroke-dasharray:none;animation:none;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}

/* ── Body na stroji ── */
.ig-hotspots,.ig-dims{position:absolute;z-index:6;pointer-events:none}
.ig-hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;border-radius:50%}
.ig-hs-core{position:absolute;inset:0;border-radius:50%;background:var(--teal);border:2px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(15,30,46,.35);transition:transform .3s var(--ease-out),background .3s}
.ig-hs-core svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ig-hs-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:igHsPulse 2.4s ease-out infinite}
@keyframes igHsPulse{0%{transform:scale(.7);opacity:.9}80%,100%{transform:scale(1.55);opacity:0}}
.ig-hs:hover .ig-hs-core,.ig-hs:focus-visible .ig-hs-core,.ig-hs.is-active .ig-hs-core{transform:scale(1.18);background:#fff}
.ig-hs:hover .ig-hs-core svg,.ig-hs:focus-visible .ig-hs-core svg,.ig-hs.is-active .ig-hs-core svg{stroke:var(--teal-dark)}
.ig-hs.is-active .ig-hs-ring{border-color:#fff;animation-duration:1.4s}
.ig-hs:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* Spojnice nad fotkou (k bodům uvnitř stroje), body ještě nad nimi */
.ig-section--anchored .ig-svg{z-index:6}
.ig-section--anchored .ig-vehicle{z-index:auto}
.ig-section--anchored .ig-hotspots{z-index:8}

/* ── Reflektor na aktivním dílu (ztmaví jen stroj díky masce z fotky) ── */
.ig-spot{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity .45s;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ig-spot.is-on{opacity:1}
.ig-section--anchored .callout{overflow:visible}
.ig-section--anchored .callout-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}

/* ── Kóty rozměrů ── */
.ig-dims{overflow:visible;opacity:0;transition:opacity .4s}
.ig-dims.is-on{opacity:1}
.ig-dims .dim-line{stroke:#fff;stroke-width:1.6;fill:none}
.ig-dims .dim-ext{stroke:rgba(255,255,255,.6);stroke-width:1;stroke-dasharray:3 3;fill:none}
.ig-dims .dim-line[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease-out) var(--d,0s)}
.ig-dims.is-on .dim-line[pathLength]{stroke-dashoffset:0}
.ig-dims .dim text,.ig-dims .dim .dim-ext{opacity:0;transition:opacity .4s calc(var(--d,0s) + .35s)}
.ig-dims.is-on .dim text,.ig-dims.is-on .dim .dim-ext{opacity:1}
.ig-dims .dim-hub{fill:none;stroke:#fff;stroke-width:1.6}
.ig-dims .dim{transition:opacity .25s}
.ig-dims.has-focus .dim:not(.is-focus){opacity:.15}
.ig-dims .dim--minor .dim-line{stroke:rgba(255,255,255,.85);stroke-width:1.2}
.ig-dims .dim--minor text{font-size:11px}
.ig-dims .dim.is-focus .dim-line{stroke-width:2.4;filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
.ig-dims text{fill:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;paint-order:stroke;stroke:rgba(15,30,46,.35);stroke-width:3px}

/* Řádek parametru s kótou (Délka, Šířka...) - najetí zvýrazní kótu */
.ig-section--anchored li.has-dim{cursor:pointer}
.ig-section--anchored li.has-dim strong{text-decoration:underline dotted rgba(255,255,255,.5);text-underline-offset:3px}

/* ── Logo modelu (nebo značky) - nenápadný vodoznak za strojem ── */
.ig-brand-mark{position:absolute;left:50%;top:4%;width:58%;height:auto;transform:translateX(-50%);opacity:.09;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none}
.ig-brand-mark--model{top:-12%;width:100%;opacity:.1}
.ig-brand-mark--tall{width:55%;top:-16%}

/* ── Mobil: fotka s očíslovanými body + posuvný pás karet ── */
.ig-mdims{left:0;top:0;width:100%;height:100%}
.ig-section--anchored .ig-mv-wrap{width:min(80%,400px);margin:0 auto 0 4%}
.ig-mdims text{font-size:10px;letter-spacing:.3px}
.ig-mdims .dim--minor text{font-size:9px}
.ig-mcards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 12px;margin:0 -20px;padding-left:20px;padding-right:20px;scroll-padding:0 20px}
.ig-mcards::-webkit-scrollbar{display:none}
.ig-mcards .ig-mobile-card{flex:0 0 82%;scroll-snap-align:center}
.ig-mcards-hint{text-align:center;font-size:12px;color:rgba(255,255,255,.7);margin:2px 0 0;letter-spacing:.3px}
@media(min-width:1001px){.ig-mcards-hint{display:none}}
.ig-mv-wrap{position:relative;width:min(100%,420px)}
.ig-mv-wrap img{width:100%;height:auto;display:block}
.ig-mhs{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid #fff;background:var(--teal);color:#fff;font:700 13px/24px inherit;font-family:inherit;padding:0;cursor:pointer;box-shadow:0 3px 10px rgba(15,30,46,.35);transition:transform .25s,background .25s,color .25s}
.ig-mhs.is-active{background:#fff;color:var(--teal-dark);transform:scale(1.2)}
.ig-mc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ig-mc-head .callout-icon{margin:0}
.ig-mc-num{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--teal-dark);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none}
@media(max-width:1000px){
  .ig-section--anchored .ig-mobile{display:block}
  .ig-section--anchored .ig-mobile-vehicle{margin-bottom:16px}
  .ig-section--anchored .ig-mc-head .callout-title{margin:0}
  .ig-section--anchored .ig-mobile-card{transition:border-color .25s,box-shadow .25s;cursor:pointer}
  .ig-section--anchored .ig-mobile-card.is-active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 8px 22px rgba(15,30,46,.3)}
}

/* ── Příjezd stroje (JS: .ig-await před zobrazením, .ig-arrive během jízdy; --ax/--ay = odkud přijíždí) ── */
.ig-await .ig-vehicle-img,.ig-mobile-vehicle.ig-await .ig-mv-wrap > img{opacity:0}
.ig-stage .ig-hotspots,.ig-stage .ig-svg,.ig-stage .ig-col-left,.ig-stage .ig-col-right,.ig-mobile-vehicle .ig-mhs{transition:opacity .6s ease}
.ig-stage.ig-await .ig-hotspots,.ig-stage.ig-await .ig-svg,.ig-stage.ig-await .ig-col-left,.ig-stage.ig-await .ig-col-right,.ig-mobile-vehicle.ig-await .ig-mhs{opacity:0}
.ig-stage.ig-await .ig-col-right{transition-delay:.15s}
.ig-arrive .ig-vehicle-img,.ig-arrive .ig-mv-wrap > img{animation:igArrive 1.6s cubic-bezier(.16,.72,.3,1) both;transform-origin:50% 95%}
@keyframes igArrive{
  0%{transform:translate(var(--ax,300px),var(--ay,-60px)) scale(.62);opacity:0}
  18%{opacity:1}
  68%{transform:translate(calc(var(--ax,300px) * -.03),calc(var(--ay,-60px) * -.03)) scale(1.012) rotate(-1.3deg)}
  84%{transform:translate(0,0) scale(1) rotate(.45deg)}
  100%{transform:none;opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .ig-hs-ring{animation:none;opacity:.6}
  .ig-section--anchored .callout,.ig-dims .dim-line[pathLength],.ig-dims .dim text,.ig-dims .dim .dim-ext{transition:none}
  .ig-arrive .ig-vehicle-img,.ig-arrive .ig-mv-wrap > img{animation:none}
}