/* ESKO Innovation – verze 2 (klikací přehled). Styl shodný s promo videem: 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; --white:#fff; --mute:rgba(255,255,255,.74);
  --u:min(1vw,1.7778vh);                 /* 1u = 1 % šířky 16:9 snímku, drží poměr na jakémkoli displeji */
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{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;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 16:9 rám uprostřed obrazovky (na jiných poměrech zůstanou tmavé pruhy, aby seděly klikací prvky) */
#frame{position:absolute;left:50%;top:50%;width:min(100vw,177.7778vh);height:min(56.25vw,100vh);transform:translate(-50%,-50%);overflow:hidden;background:var(--bg)}
#overview,#vids,#vids video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#vids video{opacity:0;pointer-events:none;background:transparent}
#vids video.show{opacity:1}
#vids video.rev{z-index:2}
.shade{position:absolute;inset:0;pointer-events:none;z-index:3;transition:opacity .6s;
  background:linear-gradient(0deg,rgba(13,15,12,.88) 0%,rgba(13,15,12,.4) 18%,rgba(13,15,12,0) 40%),
             linear-gradient(180deg,rgba(13,15,12,.6) 0%,rgba(13,15,12,0) 16%)}

/* ---------- logo ---------- */
.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);z-index:6;pointer-events:none}
.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;z-index:6;pointer-events:none}
.domain span{color:var(--green)}

/* ---------- úvodní text ---------- */
.hero{position:absolute;left:calc(var(--u)*5);bottom:calc(var(--u)*4);z-index:6;pointer-events:none;transition:opacity .5s,transform .6s var(--ease)}
.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.5)}
.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}
h1{font-size:calc(var(--u)*3.4)}
h1 em,h2 em{font-style:normal;color:var(--green);display:block}
.hint{display:flex;align-items:center;gap:calc(var(--u)*1);margin-top:calc(var(--u)*1.6);font-size:calc(var(--u)*1.15);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hint .tap{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(141,187,44,.7);animation:pulse 1.8s infinite}

/* ---------- klikací prvky ---------- */
#hotspots{position:absolute;inset:0;z-index:5;transition:opacity .35s}
.hot{position:absolute;display:block;outline:none}
.hot .box{position:absolute;inset:0;border:2px solid transparent;border-radius:calc(var(--u)*.4);background:rgba(141,187,44,0);transition:background .25s,border-color .25s,box-shadow .25s}
.hot:hover .box,.hot:focus-visible .box,.hot.cue .box{border-color:var(--green);background:rgba(141,187,44,.14);box-shadow:0 0 calc(var(--u)*2) rgba(141,187,44,.45)}
.pin{position:absolute;width:0;height:0;pointer-events:none}
.pin .dot{position:absolute;left:calc(var(--u)*-.9);top:calc(var(--u)*-.9);width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 0 0 0 rgba(141,187,44,.75);animation:pulse 2.2s infinite}
.pin .lab{position:absolute;white-space:nowrap;padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-radius:calc(var(--u)*.3);background:rgba(13,15,12,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:calc(var(--u)*1.05);font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-left:3px solid var(--green);transition:background .25s,transform .25s,opacity .25s;opacity:0}
.hot:hover .lab,.hot:focus-visible .lab,.hot.cue .lab{opacity:1}
.pin .lab b{color:var(--green);margin-right:.7em;font-weight:800}
.hot[data-lab=t] .lab{left:50%;bottom:calc(var(--u)*1.7);transform:translateX(-50%)}
.hot[data-lab=b] .lab{left:50%;top:calc(var(--u)*1.7);transform:translateX(-50%)}
.hot[data-lab=r] .lab{left:calc(var(--u)*1.7);top:50%;transform:translateY(-50%)}
.hot[data-lab=l] .lab{right:calc(var(--u)*1.7);top:50%;transform:translateY(-50%)}
.hot:hover .lab,.hot.cue .lab{background:var(--green);color:#0d0f0c}
.hot:hover .lab b,.hot.cue .lab b{color:#0d0f0c}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(141,187,44,.75)}70%{box-shadow:0 0 0 calc(var(--u)*1.4) rgba(141,187,44,0)}100%{box-shadow:0 0 0 0 rgba(141,187,44,0)}}

/* ---------- popis prvku ---------- */
#panel{position:absolute;top:50%;width:calc(var(--u)*34);z-index:6;transform:translateY(-50%) translateX(calc(var(--u)*2));opacity:0;pointer-events:none;transition:opacity .5s ease,transform .7s var(--ease);
  padding:calc(var(--u)*2.6) calc(var(--u)*2.8);background:rgba(13,15,12,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:3px solid var(--green);border-radius:calc(var(--u)*.4)}
#panel.right{right:calc(var(--u)*5)}
#panel.left{left:calc(var(--u)*5);transform:translateY(-50%) translateX(calc(var(--u)*-2))}
#panel.on{opacity:1;transform:translateY(-50%)}
#panel .eyebrow{margin-bottom:calc(var(--u)*1.3)}
#panel h2{font-size:calc(var(--u)*3.3)}
#panel p{margin-top:calc(var(--u)*1.7);font-size:calc(var(--u)*1.5);line-height:1.55;font-weight:500;color:rgba(255,255,255,.9)}
#panel dl{margin-top:calc(var(--u)*2);display:grid;gap:calc(var(--u)*.9)}
#panel dl div{display:flex;justify-content:space-between;gap:calc(var(--u)*1.5);padding-top:calc(var(--u)*.9);border-top:1px solid rgba(255,255,255,.18);font-size:calc(var(--u)*1.2)}
#panel dt{color:var(--mute);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:calc(var(--u)*1)}
#panel dd{font-weight:700;color:var(--green);text-align:right}

/* ---------- dolní lišta ---------- */
#nav{position:absolute;left:calc(var(--u)*5);right:calc(var(--u)*5);bottom:calc(var(--u)*2.4);z-index:7;display:flex;gap:calc(var(--u)*.8);justify-content:flex-end;transition:opacity .4s}
#nav button{display:flex;align-items:center;gap:calc(var(--u)*.7);padding:calc(var(--u)*.7) calc(var(--u)*1.2);border-radius:calc(var(--u)*.3);background:rgba(13,15,12,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:calc(var(--u)*.95);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);border-bottom:2px solid transparent;transition:background .25s,color .25s,border-color .25s}
#nav button b{color:var(--green);font-weight:800}
#nav button:hover{background:rgba(13,15,12,.9);color:#fff}
#nav button.active{color:#fff;border-bottom-color:var(--green);background:rgba(13,15,12,.9)}

.back{position:absolute;left:50%;top:calc(var(--u)*3);transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:calc(var(--u)*.9);font-size:calc(var(--u)*1.05);font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.back i{width:calc(var(--u)*1);height:calc(var(--u)*1);border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
.progress{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*.28);z-index:8;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 12px rgba(141,187,44,.7)}

/* ---------- stavy ---------- */
#frame[data-state=overview] #nav{opacity:0;pointer-events:none}
#frame:not([data-state=overview]) .hero,
#frame:not([data-state=overview]) #hotspots{opacity:0;pointer-events:none}
#frame:not([data-state=overview]) .hero{transform:translateY(calc(var(--u)*1.5))}
#frame[data-state=detail] .shade{opacity:0}
#frame[data-state=detail] .back{opacity:1}
#frame[data-state=detail] .domain span{color:#0d0f0c}
#frame:not([data-state=overview]) #hotspots .hot{pointer-events:none}
#frame[data-state=in] #nav,#frame[data-state=out] #nav{opacity:.55}

#loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s}
#loader.done{opacity:0;pointer-events:none}
#loader .tag{font-size:12px;letter-spacing:.35em;font-weight:700;color:rgba(255,255,255,.6)}
body.idle{cursor:none}
#debug{position:absolute;left:8px;top:8px;z-index:20;font:11px/1.4 ui-monospace,monospace;background:rgba(0,0,0,.7);color:#8dbb2c;padding:4px 8px;display:none}
.dbg #debug{display:block}
@media (prefers-reduced-motion:reduce){.hint .tap,.pin .dot,.back i{animation:none}}