/* ESKO Innovation – styl podle promo videa: tmavé pozadí, limetková zelená, Montserrat */
@font-face{font-family:Montserrat;font-weight:500;src:url(media/fonts/montserrat-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-weight:700;src:url(media/fonts/montserrat-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-weight:800;src:url(media/fonts/montserrat-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-weight:500;src:url(media/fonts/montserrat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:700;src:url(media/fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:800;src:url(media/fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0d0f0c; --green:#8dbb2c; --green-d:#6f9420; --white:#fff; --mute:rgba(255,255,255,.72);
  --u:min(1vw,1.7778vh); /* jednotka drží poměr 16:9 i na jiných displejích */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--white);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;overflow:hidden}
body.idle{cursor:none}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--bg)}

/* ---------- scény ---------- */
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;overflow:hidden;background:var(--bg)}
.scene.active{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
.scene .bg,.scene canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.scene .shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(13,15,12,.9) 0%,rgba(13,15,12,.55) 26%,rgba(13,15,12,0) 55%),
             linear-gradient(180deg,rgba(13,15,12,.55) 0%,rgba(13,15,12,0) 16%)}
.scene.dark .shade{background:rgba(13,15,12,.72)}
.scene.flat{background:radial-gradient(120% 90% at 50% 0%,#141813 0%,#0d0f0c 60%)}
.waves{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;opacity:.9}

/* ---------- texty ---------- */
.copy{position:absolute;left:calc(var(--u)*5);bottom:calc(var(--u)*7);max-width:calc(var(--u)*68)}
.eyebrow{display:flex;align-items:center;gap:calc(var(--u)*1.2);font-size:calc(var(--u)*1.05);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-bottom:calc(var(--u)*1.6)}
.eyebrow::before{content:"";width:calc(var(--u)*3.2);height:2px;background:var(--green)}
h1,h2{font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.005em;font-size:calc(var(--u)*5.4)}
h1.xl{font-size:calc(var(--u)*6.4)}
h1 em,h2 em{font-style:normal;color:var(--green);display:block}
.sub{margin-top:calc(var(--u)*1.9);font-size:calc(var(--u)*1.75);font-weight:500;color:rgba(255,255,255,.92)}
.sub b{color:var(--green);font-weight:700}
[data-at]{opacity:0;transform:translateY(calc(var(--u)*1.6));transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-at].in,.manual .scene.active [data-at]{opacity:1;transform:none}

/* chrome (logo + doména + progress) */
.chrome{position:absolute;inset:0;pointer-events:none;z-index:5;transition:opacity .6s}
.chrome.hide{opacity:0}
.logo{position:absolute;left:calc(var(--u)*2.6);top:calc(var(--u)*2.2);display:flex;align-items:center;gap:calc(var(--u)*.7)}
.logo svg{width:calc(var(--u)*3);height:calc(var(--u)*3)}
.logo .wm{display:flex;flex-direction:column;line-height:.9;font-weight:800}
.logo .wm b{font-size:calc(var(--u)*1.9);letter-spacing:.04em}
.logo .wm i{font-style:normal;font-size:calc(var(--u)*.74);letter-spacing:.2em;font-weight:700;margin-top:.12em}
.domain{position:absolute;right:calc(var(--u)*2.6);top:calc(var(--u)*2.9);font-size:calc(var(--u)*.85);font-weight:500;letter-spacing:.24em}
.domain span{color:var(--green)}
.progress{position:absolute;left:0;bottom:0;height:calc(var(--u)*.28);background:var(--green);width:0;box-shadow:0 0 12px rgba(141,187,44,.7)}

/* velké logo (úvod / závěr) */
.biglogo{display:flex;align-items:center;gap:calc(var(--u)*2.2)}
.biglogo svg{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.biglogo .wm{display:flex;flex-direction:column;line-height:.88;font-weight:800}
.biglogo .wm b{font-size:calc(var(--u)*8.6);letter-spacing:.03em}
.biglogo .wm i{font-style:normal;font-size:calc(var(--u)*3.05);letter-spacing:.17em;font-weight:700;margin-top:.15em}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.center .rule{width:calc(var(--u)*22);height:1px;background:rgba(255,255,255,.35);margin:calc(var(--u)*2.2) 0 calc(var(--u)*1.6)}
.center .tag{font-size:calc(var(--u)*1.05);letter-spacing:.34em;font-weight:500;color:var(--mute)}
.center .slogan{margin-top:calc(var(--u)*5);font-size:calc(var(--u)*2.4);font-weight:800;text-transform:uppercase}
.center .slogan em{font-style:normal;color:var(--green)}
.contact{margin-top:calc(var(--u)*2.4);font-size:calc(var(--u)*1.3);font-weight:500;display:flex;gap:calc(var(--u)*2.2);color:rgba(255,255,255,.9)}
.contact i{color:rgba(255,255,255,.4);font-style:normal}

/* čísla */
.stats{position:absolute;left:calc(var(--u)*5);top:50%;transform:translateY(-50%)}
.stat{margin-bottom:calc(var(--u)*3.6)}
.stat .n{font-size:calc(var(--u)*7.6);font-weight:800;line-height:1;letter-spacing:-.01em}
.stat .n small{font-size:.42em;color:var(--green);font-weight:700;margin-left:.2em}
.stat .l{margin-top:calc(var(--u)*.7);font-size:calc(var(--u)*1.25);color:var(--mute);font-weight:500}
.statsTitle{position:absolute;left:calc(var(--u)*5);top:calc(var(--u)*8)}

/* seznam */
.checks{margin-top:calc(var(--u)*2.2);list-style:none;display:grid;gap:calc(var(--u)*1.1)}
.checks li{display:flex;gap:calc(var(--u)*1.4);font-size:calc(var(--u)*1.85);font-weight:500}
.checks li span{color:var(--green);font-weight:700;font-size:.72em;letter-spacing:.1em;padding-top:.28em}

/* časová osa */
.steps{position:absolute;left:calc(var(--u)*5);right:calc(var(--u)*5);bottom:calc(var(--u)*3.4);display:flex;justify-content:space-between}
.steps::before{content:"";position:absolute;left:calc(var(--u)*1);right:calc(var(--u)*3);top:calc(var(--u)*.55);height:2px;background:rgba(255,255,255,.22)}
.steps .fill{position:absolute;left:calc(var(--u)*1);top:calc(var(--u)*.55);height:2px;width:0;background:var(--green);transition:width .8s ease;box-shadow:0 0 10px rgba(141,187,44,.8)}
.step{position:relative;flex:1;font-size:calc(var(--u)*.95);font-weight:500;color:rgba(255,255,255,.5);transition:color .5s}
.step i{display:block;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%;background:#0d0f0c;border:2px solid rgba(255,255,255,.4);margin-bottom:calc(var(--u)*.9);position:relative;z-index:1;transition:all .4s}
.step.on{color:#fff}.step.on i{background:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(141,187,44,.9)}

/* partner chip */
.chip{position:absolute;right:calc(var(--u)*5);bottom:calc(var(--u)*7.4);display:flex;align-items:center;gap:calc(var(--u)*1.6);padding:calc(var(--u)*1.3) calc(var(--u)*2);border-radius:calc(var(--u)*1.2);background:rgba(13,15,12,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.chip small{display:block;font-size:calc(var(--u)*.85);color:var(--mute);font-weight:500}
.chip b{font-size:calc(var(--u)*1.5);font-weight:700}
.chip b span{color:var(--green)}

/* hotspoty v panoramatu */
.hs{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s}
.hs.show{opacity:1}.hs.off{opacity:0!important}
.hs .dot{position:absolute;left:-.7em;top:-.7em;width:1.4em;height:1.4em;border-radius:50%;background:var(--green);box-shadow:0 0 0 .35em rgba(141,187,44,.28),0 0 22px rgba(141,187,44,.9);font-size:calc(var(--u)*.95);animation:pulse 2s infinite}
.hs .tag{position:absolute;left:calc(var(--u)*3.4);top:calc(var(--u)*-5.2);white-space:nowrap;padding:calc(var(--u)*.9) calc(var(--u)*1.5);border-radius:calc(var(--u)*.8);background:rgba(13,15,12,.72);border:1px solid rgba(141,187,44,.55);backdrop-filter:blur(6px)}
.hs .tag b{display:block;font-size:calc(var(--u)*1.25);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hs .tag span{display:block;font-size:calc(var(--u)*.95);color:var(--green);font-weight:700;margin-top:.2em}
.hs .line{position:absolute;left:0;top:calc(var(--u)*-4.3);width:calc(var(--u)*3.4);height:calc(var(--u)*4.3);}
.hs .line::before{content:"";position:absolute;left:0;bottom:0;width:calc(var(--u)*3.9);height:2px;background:var(--green);transform-origin:0 100%;transform:rotate(-52deg)}
@keyframes pulse{50%{box-shadow:0 0 0 .75em rgba(141,187,44,0),0 0 22px rgba(141,187,44,.9)}}
.hint360{position:absolute;right:calc(var(--u)*5);top:calc(var(--u)*8.5);z-index:4;font-size:calc(var(--u)*.95);letter-spacing:.3em;font-weight:700;color:var(--green);display:flex;align-items:center;gap:calc(var(--u)*.8)}
.hint360 svg{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6)}

/* mapa */
.mapwrap{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*6);width:calc(var(--u)*62);height:calc(var(--u)*36)}
.mapwrap svg{width:100%;height:100%;overflow:visible}
.cz{fill:rgba(141,187,44,.05);stroke:var(--green);stroke-width:2;filter:drop-shadow(0 0 7px rgba(141,187,44,.75))}
.arc{fill:none;stroke:rgba(141,187,44,.7);stroke-width:1.4;stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset 1.6s ease}
.arc.in{stroke-dashoffset:0}
.city{opacity:0;transition:opacity .6s}.city.in{opacity:1}
.city circle.c{fill:var(--green)}
.city text{fill:#fff;font-size:13px;font-weight:700;font-family:Montserrat}
.city text.s{fill:var(--mute);font-weight:500;font-size:11px}
.city.here circle.ring{fill:none;stroke:#fff;stroke-width:2;animation:ring 2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}

/* ovládání (ruční režim) */
.ui{position:absolute;left:50%;bottom:calc(var(--u)*2.4);transform:translate(-50%,calc(var(--u)*2));z-index:10;display:flex;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.7);border-radius:calc(var(--u)*3);background:rgba(13,15,12,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.manual .ui{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ui button{all:unset;cursor:pointer;color:#fff;font:600 calc(var(--u)*.95)/1 Montserrat,sans-serif;letter-spacing:.06em;padding:calc(var(--u)*.9) calc(var(--u)*1.3);border-radius:calc(var(--u)*2);transition:background .2s,color .2s;white-space:nowrap}
.ui button:hover{background:rgba(255,255,255,.14)}
.ui button.on{background:var(--green);color:#0d0f0c}
.ui .sep{width:1px;height:calc(var(--u)*2);background:rgba(255,255,255,.2);margin:0 calc(var(--u)*.3)}
.ui .ctl{font-size:calc(var(--u)*1.3)}
.hold{position:absolute;right:calc(var(--u)*2.6);bottom:calc(var(--u)*3.2);z-index:10;font-size:calc(var(--u)*.85);letter-spacing:.2em;color:var(--mute);opacity:0;transition:opacity .3s}
.manual .hold{opacity:1}
.manual .scene.active canvas{cursor:grab}.dragging .scene.active canvas{cursor:grabbing}

#loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.5);transition:opacity .8s}
#loader.gone{opacity:0;pointer-events:none}
#loader .bar{width:calc(var(--u)*22);height:2px;background:rgba(255,255,255,.18)}
#loader .bar i{display:block;height:100%;width:0;background:var(--green);transition:width .2s}
#loader .tag{font-size:calc(var(--u)*.9);letter-spacing:.34em;color:var(--mute)}
.chrome.nologo .logo,.chrome.nologo .domain{opacity:0}
.logo,.domain{transition:opacity .6s}
.manual .hs:not(.off){opacity:1}

.copy.top{bottom:auto;top:calc(var(--u)*8.2)}
.copy.top h1{font-size:calc(var(--u)*4.6)}
.scene.pano-s .shade,.scene:has(canvas) .shade{background:linear-gradient(180deg,rgba(13,15,12,.78) 0%,rgba(13,15,12,.35) 30%,rgba(13,15,12,0) 50%),linear-gradient(0deg,rgba(13,15,12,.55) 0%,rgba(13,15,12,0) 22%)}
.stats.row{top:auto;bottom:calc(var(--u)*8);transform:none;display:flex;gap:calc(var(--u)*7)}
.stats.row .stat{margin:0}
.stats.row .stat .n{font-size:calc(var(--u)*6.6)}
.scene#s0 .shade{background:linear-gradient(0deg,rgba(13,15,12,.92) 0%,rgba(13,15,12,.62) 32%,rgba(13,15,12,0) 62%),linear-gradient(90deg,rgba(13,15,12,.5) 0%,rgba(13,15,12,0) 55%)}

.chip{right:auto;left:calc(var(--u)*5);bottom:calc(var(--u)*5)}
.mapwrap{top:calc(var(--u)*12)}
#s7 h2{font-size:calc(var(--u)*4.4)}
.step{text-shadow:0 1px 8px rgba(0,0,0,.8)}

.hs.l .tag{left:auto;right:calc(var(--u)*3.4)}
.hs.l .line{transform:scaleX(-1);transform-origin:0 50%}

.intro .bg{object-position:50% 0;transform-origin:50% 0}
.copy.top.wide{max-width:calc(var(--u)*92);top:calc(var(--u)*10)}
.copy.top.wide h1{font-size:calc(var(--u)*6)}
.scene#s0 .shade{background:linear-gradient(180deg,rgba(13,15,12,.82) 0%,rgba(13,15,12,.5) 38%,rgba(13,15,12,0) 62%),linear-gradient(90deg,rgba(13,15,12,.35) 0%,rgba(13,15,12,0) 50%)}
.hs.dn .tag{top:calc(var(--u)*1.4)}
.hs.dn .line{top:0}
.hs.dn .line::before{bottom:auto;top:0;transform-origin:0 0;transform:rotate(52deg)}

.nohs .hs,.nohs .copy,.nohs .hint360,.nohs .chip{display:none!important}

/* --- zvýrazněné komponenty --- */
.hsvg{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.poly{fill:rgba(141,187,44,.10);stroke:#8dbb2c;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s,fill .25s;filter:drop-shadow(0 0 5px rgba(141,187,44,.9));stroke-dasharray:7 5;animation:dash 1.6s linear infinite}
.poly.show{opacity:.95}
.poly.cur{fill:rgba(141,187,44,.22);stroke-dasharray:none}
.poly.hov{fill:rgba(141,187,44,.38);stroke-dasharray:none}
@keyframes dash{to{stroke-dashoffset:-24}}
.manual .poly,.mouse .poly{pointer-events:all;cursor:pointer}
.hs{opacity:1!important;transition:none}
.hs .tag{opacity:0;transition:opacity .35s;left:calc(var(--u)*1.2);top:calc(var(--u)*-5.6);pointer-events:none}
.hs.l .tag{left:auto;right:calc(var(--u)*1.2)}
.hs.dn .tag{top:calc(var(--u)*1.4)}
.hs.tagon .tag,.hs.hov .tag{opacity:1}
.hs.off{display:none}
.hs .line,.hs .dot{display:none}
.hs.hov{z-index:6}

/* čitelnost textů: tmavý přechod zleva + shora/zdola */
.scene .shade{background:
  linear-gradient(90deg,rgba(13,15,12,.78) 0%,rgba(13,15,12,.55) 34%,rgba(13,15,12,0) 66%),
  linear-gradient(0deg,rgba(13,15,12,.88) 0%,rgba(13,15,12,.5) 26%,rgba(13,15,12,0) 55%),
  linear-gradient(180deg,rgba(13,15,12,.6) 0%,rgba(13,15,12,0) 18%)}
.scene:has(.copy.top) .shade{background:
  linear-gradient(90deg,rgba(13,15,12,.72) 0%,rgba(13,15,12,.45) 36%,rgba(13,15,12,0) 62%),
  linear-gradient(180deg,rgba(13,15,12,.82) 0%,rgba(13,15,12,.45) 32%,rgba(13,15,12,0) 52%),
  linear-gradient(0deg,rgba(13,15,12,.5) 0%,rgba(13,15,12,0) 22%)}
.scene.dark .shade{background:rgba(13,15,12,.72)}
.scene#s0 .shade{background:
  linear-gradient(180deg,rgba(13,15,12,.85) 0%,rgba(13,15,12,.55) 40%,rgba(13,15,12,0) 64%),
  linear-gradient(90deg,rgba(13,15,12,.4) 0%,rgba(13,15,12,0) 50%)}
.hold{bottom:auto;top:calc(var(--u)*2.9);left:50%;right:auto;transform:translateX(-50%);padding:calc(var(--u)*.6) calc(var(--u)*1.4);border-radius:calc(var(--u)*2);background:rgba(13,15,12,.7);border:1px solid rgba(255,255,255,.16)}
.copy h1,.copy h2,.copy .sub,.copy .eyebrow,.checks{text-shadow:0 2px 18px rgba(0,0,0,.55)}

/* lehčí podklad: tmavé jen tam, kde je text */
.scene:has(canvas) .shade{background:
  linear-gradient(180deg,rgba(13,15,12,.62) 0%,rgba(13,15,12,.3) 26%,rgba(13,15,12,0) 44%),
  linear-gradient(90deg,rgba(13,15,12,.32) 0%,rgba(13,15,12,0) 40%),
  linear-gradient(0deg,rgba(13,15,12,.35) 0%,rgba(13,15,12,0) 16%)}
.scene:has(video) .shade{background:
  linear-gradient(90deg,rgba(13,15,12,.74) 0%,rgba(13,15,12,.48) 36%,rgba(13,15,12,0) 68%),
  linear-gradient(0deg,rgba(13,15,12,.86) 0%,rgba(13,15,12,.5) 28%,rgba(13,15,12,0) 56%),
  linear-gradient(180deg,rgba(13,15,12,.5) 0%,rgba(13,15,12,0) 16%)}
.poly.cur{fill:rgba(141,187,44,.14)}.poly.hov{fill:rgba(141,187,44,.3)}

.copy.top.wide{top:calc(var(--u)*5.2)}
.copy.top.wide h1{font-size:calc(var(--u)*5.6)}
.copy.top.wide .sub{max-width:calc(var(--u)*48);font-size:calc(var(--u)*1.55)}