/* Leros · Ranní louka (směr B) – klientská prezentace. Slidy převedené 1:1 z Figmy (_build.py), scény 1440×900 škálované v app.js (--s). */
@font-face{font-family:"LerosAvenir";src:url(font/avenir-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"LerosAvenir";src:url(font/avenir-roman.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"LerosAvenir";src:url(font/avenir-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"LerosAvenir";src:url(font/avenir-heavy.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"LerosEvelethClean";src:url(font/eveleth-clean-thin.woff2) format("woff2");font-weight:400;font-display:block}

:root{
  --krem-25:#fdfaf4;--krem-50:#f3eee5;--ink:#2b2724;--ink-2:#6b6661;
  --f-a:"LerosAvenir","Avenir Next","Avenir",system-ui,sans-serif;
  --f-e:"LerosEvelethClean","LerosAvenir",sans-serif;
  --s:1;--kc:1;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-snap-type:y mandatory;overflow-y:scroll;background:var(--krem-50);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--f-a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--krem-50)}

.slide{position:relative;height:100vh;height:100svh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--bg,var(--krem-50));isolation:isolate}
.stage{position:absolute;left:50%;top:50%;width:1440px;height:900px;margin:-450px 0 0 -720px;transform:scale(var(--s));transform-origin:50% 50%}
.t{position:absolute;margin:0;font-feature-settings:"kern" 1}
.r{position:absolute}
.r svg{display:block;width:100%;height:100%}
.js [data-a]{visibility:hidden}
.no-motion [data-a]{visibility:visible!important}

/* vrstvy přes celé okno (fotka, video, rozostření) */
.bleed{position:absolute;inset:0;overflow:hidden}
.bl-img{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.ss{position:absolute;inset:0;pointer-events:none}
.bleed>.ph{position:absolute;left:calc(50% + (var(--x) - 720) * var(--kc) * 1px);top:calc(50% + (var(--y) - 450) * var(--kc) * 1px);
  width:calc(var(--w) * var(--kc) * 1px);height:calc(var(--h) * var(--kc) * 1px)}
.bleed>.ph.fit{left:calc(50% + (var(--x) - 720) * var(--s) * 1px);top:calc(50% + (var(--y) - 450) * var(--s) * 1px);width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px)}
.mk-bg{background-size:cover;background-position:center;filter:blur(28px) brightness(.85);transform:scale(1.12)}
.znovu{cursor:pointer;transition:transform .35s var(--ease)}
.znovu:hover,.znovu:focus-visible{transform:translateY(-2px);outline:none}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-width:none}
.bleed.half{right:auto;width:50%}
.bleed.half.r{left:50%;right:0}
.bleed.fit .ph{position:absolute;top:0;left:50%;height:100%;aspect-ratio:3/2}
.bleed.fit .ph-plakat{height:103%;transform:translateX(-50.036%)}
.bleed.fit .ph-rollup{top:-6.18%;height:109.75%;transform:translateX(-48.838%)}

/* obecné prvky z Figmy */
.gs{position:absolute;inset:0;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.noise{position:absolute;inset:0;pointer-events:none;background:url(img/sum.png);opacity:.06;mix-blend-mode:overlay;border-radius:inherit}
video.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.r>video.mk,.r>img.mk-p{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-width:none}

/* 08 · barvy: dlaždice – klik zkopíruje hex */
.sw{cursor:pointer;outline:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.sw:hover,.sw:focus-visible{transform:translateY(-6px);box-shadow:0 14px 28px rgba(43,39,36,.14)}
.copied-msg{position:absolute;right:20px;bottom:18px;font:500 11px/16px var(--f-a);letter-spacing:1.2px;text-transform:uppercase;opacity:0;transition:opacity .3s;mix-blend-mode:difference;color:#fff}
.sw.copied .copied-msg{opacity:.8}

/* 09 · ikony: popisek pod ikonou */
.ic2{position:absolute;padding:0;border:0;background:none;cursor:default;color:var(--krem-25)}
.ic2 svg{display:block;width:100%;height:100%;transition:transform .45s var(--ease)}
.ic2::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:rgba(253,250,244,.14);transform:scale(.4);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.ic2 span{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-4px);white-space:nowrap;font:500 10px/14px var(--f-a);letter-spacing:1.6px;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);color:var(--krem-25)}
.ic2:hover,.ic2:focus-visible{z-index:3;outline:none}
.ic2:hover::before,.ic2:focus-visible::before{transform:scale(1);opacity:1}
.ic2:hover span,.ic2:focus-visible span{opacity:1;transform:translate(-50%,0)}

/* 11 · notebook */
.device{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.web-txt{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;overflow:hidden;border-radius:7px 7px 0 0;background:#fdfdfd}
.screen .tb{position:absolute;max-width:none}
.hp{position:absolute;left:0;right:0;bottom:0;overflow-y:auto;scrollbar-width:none;outline:none}
.hp::-webkit-scrollbar{display:none}
.hp>img{width:100%;height:auto}
.hp-hero{position:absolute;left:0;right:0;overflow:hidden;border-radius:0 0 15px 15px}
.hp-hero video{position:absolute;top:0;left:-5.417%;width:111.18%;height:100%;object-fit:cover;max-width:none}
.hp-hero img{position:absolute;inset:0;width:100%;height:100%}
.zatm{position:absolute;inset:0;border:0;padding:0;background:rgba(43,39,36,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}
.zatm .ring{position:absolute;left:294.01px;top:178.54px;width:92.32px;height:92.32px;animation:toc 16s linear infinite}
.zatm .ring img{width:100%;height:100%}
.zatm .mys{position:absolute;left:324.57px;top:206.5px;width:31.21px;height:36.41px;animation:mys 1.8s var(--ease) infinite}
@keyframes toc{to{transform:rotate(360deg)}}
@keyframes mys{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.s-web.zoom .zatm{pointer-events:none}

/* 14 · telefony */
.scr{position:absolute;overflow:hidden;border-radius:30.42px;background:#000;isolation:isolate}
.scr img,.scr video{position:absolute;max-width:none;object-fit:cover}
.scr.reel{background:#0b1014}
.car{position:absolute;overflow:hidden}
.trk{position:absolute;inset:0;display:flex;width:200%;will-change:transform}
.trk img{position:relative;width:50%;height:100%}
.dots{position:absolute;width:11px;height:11px;display:flex;align-items:center;justify-content:center;gap:2.6px}
.dots i{width:3.6px;height:3.6px;border-radius:50%;background:rgba(168,168,168,.7);transition:background .4s}
.dots i.on{background:#0095f6}

/* navigační šipky: skleněná pilulka (světlý / tmavý režim podle pozadí) */
.sipky{position:fixed;right:calc(32px * var(--s));top:50%;z-index:20;width:48px;height:152px;margin-top:-76px;padding:6px;
  display:flex;flex-direction:column;align-items:center;border-radius:999px;color:var(--ink);
  background:rgba(253,250,244,.4);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgba(43,39,36,.06),0 8px 24px rgba(43,39,36,.08);
  transform:scale(var(--s));transform-origin:100% 50%;transition:color .6s var(--ease),background-color .6s var(--ease),box-shadow .6s var(--ease)}
.sipky.dark{color:var(--krem-25);background:rgba(253,250,244,.12);box-shadow:inset 0 0 0 1px rgba(253,250,244,.16),0 8px 24px rgba(0,0,0,.12)}
.sipky button{width:36px;height:36px;flex:none;border:0;padding:8px;background:none;border-radius:50%;cursor:pointer;transition:background-color .3s,opacity .3s}
.sipky button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.sipky button:focus-visible{outline:1px solid currentColor;outline-offset:-3px}
.sipky button[disabled]{opacity:.3;cursor:default;background:none}
.sipky svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prog{position:relative;width:2px;height:64px;flex:none;border-radius:24px;overflow:hidden;margin:2px 0}
.prog::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.12}
.prog i{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:4px;background:currentColor;transition:height .6s var(--ease)}

@media (prefers-reduced-motion:reduce){.zatm .ring,.zatm .mys{animation:none}}

/* mobil: slidy pod sebou ve stejné kompozici, zmenšené na šířku displeje */
@media (max-width:760px),(max-aspect-ratio:3/4){
  html{scroll-snap-type:none}
  .slide{height:calc(900px * var(--s))}
  .sipky{display:none}
}