/* Leros · Lisovaný sen – klientská prezentace. Scény 1440×900 podle Figmy, škálované v app.js (--s). */
@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:"LerosEveleth";src:url(font/eveleth.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"LerosEveleth";src:url(font/eveleth-thin.woff2) format("woff2");font-weight:100;font-display:swap}
@font-face{font-family:"LerosMilyah";src:url(font/milyah.woff2) format("woff2");font-weight:400;font-display:block}

:root{
  --krem:#f3eee5;--krem-sv:#fdfaf4;--ink:#2b2724;--ink-2:#6b6661;
  --f-a:"LerosAvenir","Avenir Next","Avenir",system-ui,sans-serif;
  --f-e:"LerosEveleth","LerosAvenir",sans-serif;
  --f-m:"LerosMilyah",cursive;
  --s:1;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-snap-type:y mandatory;overflow-y:scroll;background:var(--krem);-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)}

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

/* grunge linky (1,7 px inkoust s roztřepenou hranou) */
.ln{background:var(--ink);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* fotky přes celou plochu: pokrývají okno, obsah scény zůstává 1:1 */
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed.half{right:auto;width:50%}
.bleed.half.r{left:50%;right:0}
.shade-nalada{background:linear-gradient(to bottom,rgba(28,24,21,0) 55%,rgba(28,24,21,.45))}
.shade-print{right:auto;width:51.2%;opacity:.8;mix-blend-mode:multiply;background:linear-gradient(to right,rgba(0,0,0,.6) 23.75%,rgba(0,0,0,.343) 63.1%,rgba(0,0,0,0) 80%)}
.shade-ellipse{mix-blend-mode:multiply;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0))}
.zrno{position:absolute;inset:-60px;pointer-events:none;background:url(img/zrno.png);opacity:.07;mix-blend-mode:overlay;animation:zrno .9s steps(6) infinite}
@keyframes zrno{0%{transform:translate(0,0)}20%{transform:translate(-23px,17px)}40%{transform:translate(31px,-9px)}60%{transform:translate(-11px,-29px)}80%{transform:translate(19px,27px)}100%{transform:translate(0,0)}}

/* 05 · lupa na zrno */
.s-zrno .lupa-area{cursor:none}
.lupa{position:absolute;left:0;top:0;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;pointer-events:none;opacity:0;
  background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(253,250,244,.85),0 18px 40px rgba(0,0,0,.35);z-index:5;will-change:transform}
.lupa::after{content:"";position:absolute;inset:0;border-radius:50%;background:url(img/zrno.png);opacity:.05;mix-blend-mode:overlay}
.s-zrno .stage{pointer-events:none}

/* 10 · barvy */
.pruh{position:absolute;display:flex;box-shadow:0 0 0 1px var(--ink)}
.col{position:relative;flex:var(--w) 1 0;min-width:0;outline:none;cursor:default}
.col:focus-visible{box-shadow:inset 0 0 0 2px rgba(43,39,36,.5)}
.cl{position:absolute;left:16px;bottom:16px;width:max-content;max-width:calc(100% - 24px)}
.cl b{display:block;font:500 14px/24px var(--f-a)}
.cl span{display:block;font:400 12px/16px var(--f-a);opacity:.75}
.col:nth-child(5) .cl{width:auto}

/* 14 · ikony: popisek pod ikonou */
.ic-hit{position:absolute;inset:0;pointer-events:none}
.ic{position:absolute;width:64px;height:64px;padding:0;border:0;background:none;border-radius:50%;pointer-events:auto;cursor:default;z-index:1}
.ic::before{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(43,39,36,.06);transform:scale(.4);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.ic span{position:absolute;left:50%;top:58px;transform:translate(-50%,-4px);white-space:nowrap;font:500 10px/14px var(--f-a);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.ic:hover,.ic:focus-visible{z-index:3}
.ic:hover::before,.ic:focus-visible::before{transform:scale(1);opacity:1}
.ic:hover span,.ic:focus-visible span{opacity:1;transform:translate(-50%,0)}
.ic:focus-visible{outline:none}

/* 08 · zkušební text */
.otisk{cursor:text;caret-color:var(--ink)}
.otisk:focus{outline:none}

/* 16 · notebook */
.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}
.zatm{position:absolute;inset:0;border:0;padding:0;background:rgba(43,39,36,.58);-webkit-backdrop-filter:blur(4.16px);backdrop-filter:blur(4.16px);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)}}

/* 20 · 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}
.cam{z-index:2}
.snd{position:absolute;right:12px;top:440px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(11,16,20,.55);cursor:pointer;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h3l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.snd.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h3l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")}

/* 22 · kroky */
.krok-ln{background:rgba(43,39,36,.2);transform-origin:0 50%}

/* navigační šipky (anotace: světlý / tmavý režim podle pozadí) */
.sipky{position:fixed;right:calc(32px * var(--s));top:50%;z-index:20;width:44px;height:144px;margin-top:-72px;padding:4px;
  display:flex;flex-direction:column;align-items:center;border-radius:999px;color:var(--ink);
  background:rgba(243,238,229,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 15px rgba(0,0,0,.08);
  transform:scale(var(--s));transform-origin:100% 50%;transition:color .6s var(--ease),background-color .6s var(--ease)}
.sipky.dark{color:var(--krem);background:rgba(43,39,36,.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 10%,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.25;stroke-linecap:round;stroke-linejoin:round}
.prog{position:relative;width:2px;height:64px;flex:none;border-radius:24px;overflow:hidden}
.prog::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.08}
.prog i{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:4px;background:currentColor;transition:height .6s var(--ease)}

/* omezený pohyb */
@media (prefers-reduced-motion:reduce){.zrno,.zatm .ring,.zatm .mys{animation:none}}

/* ------------------------------------------------ mobil: slidy pod sebou, zjednodušeně */
.m-only{display:none}
@media (max-width:760px),(max-aspect-ratio:3/4){
  html{scroll-snap-type:none}
  body{overflow-x:hidden}
  .slide{height:auto;min-height:0;overflow:hidden;padding:56px 24px 64px}
  .stage{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;transform:none!important;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .stage>*,.kolaz>*,.rada>*,.krok>*,.web-txt>*,.device>*{position:relative!important;left:auto!important;top:auto!important;transform:none!important;white-space:normal!important}
  .stage>:where(:not(.screen):not(.phones)),.kolaz>:where(*),.rada>:where(*),.web-txt>:where(*){width:auto!important;height:auto!important}
  .m-hide,.ln,.ic-hit,.ic-name,.sipky,.zrno,.lupa,.hf,.shell,.cam,.snd,.shade-print,.shade-nalada{display:none!important}
  .m-only{display:block}
  .kolaz,.rada{display:contents}
  .i{max-width:100%}
  .m-full,.m-only{width:100%!important}
  .m-side{max-height:60vh;max-width:80%!important;align-self:center}
  .h-hero{font-size:56px!important;line-height:1.08!important}
  .h-big{font-size:44px!important;line-height:1.2!important}
  .scr-t{font-size:46px!important;line-height:1.25!important;white-space:normal!important}
  .stage>.i[src$="logo.webp"]{width:64px!important;height:64px!important}
  .bleed{position:relative;inset:auto;height:62vh;margin:-56px -24px 24px}
  .bleed.half,.bleed.half.r{left:auto;width:auto;height:56vh;margin-top:0}
  .bleed.half.l{margin-top:-56px}
  .s-print2 .stage{display:none}
  .s-karta .stage{border:1px solid var(--ink);padding:20px}
  .pruh{position:relative!important;width:100%!important;height:auto!important;flex-direction:column}
  .col{flex:none!important;height:84px;width:100%}
  .abc{font-size:15px!important;line-height:1.5!important;letter-spacing:1.5px!important}
  .screen{position:relative!important;left:auto!important;top:auto!important;border-radius:6px}
  .phones{position:relative!important;width:100%!important;display:flex;gap:12px;justify-content:center}
  .scr{position:relative!important;left:auto!important;top:auto!important;flex:none;border-radius:30px}
  .krok{display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(43,39,36,.2);padding-top:14px;width:100%}
  .krok .krok-ln{display:none}
  .krok>*{width:auto!important}
}

/* 01 · fotka v rámečku (server Figmy ji nevykreslí, skládá se tady) */
.hf{position:absolute;inset:0}
.hf-in{position:absolute;transform:rotate(2deg);transform-origin:0 0}
.hf-crop{position:absolute;overflow:hidden}
.hf-crop img{position:absolute;max-width:none}
.hf-crop::after{content:"";position:absolute;inset:0;background:url(img/zrno.png);opacity:.06;mix-blend-mode:overlay}

/* 06 · byliny: miniatury vyměňují velkou bylinu */
.herb-big{position:absolute;transform:rotate(-6deg);transform-origin:0 0}
.herb-big img,.th img,.herb-fly{width:100%;height:100%;object-fit:contain}
.herb-fly{position:absolute;pointer-events:none;z-index:4;max-width:none}
.th{position:absolute;pointer-events:auto;padding:0;border:0;background:none;cursor:pointer;transition:transform .35s var(--ease)}
.th:hover,.th:focus-visible{transform:translateY(-4px)}
.th:focus-visible{outline:1px solid rgba(43,39,36,.4);outline-offset:4px;border-radius:4px}
.th img{display:block}

/* 16 · zpět na začátek */
.znovu{position:absolute;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(243,238,229,.35);background:transparent;color:var(--krem);font:500 12px/16px var(--f-a);letter-spacing:2.4px;text-transform:uppercase;
  transition:background-color .3s,border-color .3s}
.znovu:hover,.znovu:focus-visible{background:rgba(243,238,229,.08);border-color:rgba(243,238,229,.7);outline:none}
.znovu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.znovu:hover svg{transform:translateY(-3px)}
@media (max-width:760px),(max-aspect-ratio:3/4){
  .herb-big{max-height:60vh;width:70%!important;height:auto!important;align-self:center}
  .herb-big img{height:auto;max-height:60vh}
  .rada{display:flex!important;gap:18px;flex-wrap:wrap}
  .th{position:relative!important;height:64px!important;width:auto!important}
  .th img{height:64px;width:auto}
  .znovu{width:auto!important;margin-top:24px;align-self:center}
}

/* 13 · plakát a roll-up: fotka na výšku, do šířky se doplní okolí z fotky */
/* mockupy: video s jemným pohybem okolí + původní fotka tiskoviny přes něj (beze změny) */
.ph{position:absolute}
.ph video,.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-width:none}
.ph-cover{left:50%;top:50%;width:max(100vw,156.006svh);aspect-ratio:4000/2564;transform:translate(-50%,-50%)}
.bleed.fit .ph{top:0;left:50%;height:100%;aspect-ratio:3/2}
.bleed.fit .ph-plakat{transform:translateX(-50.036%)}
.bleed.fit .ph-rollup{top:-6.18%;height:109.75%;transform:translateX(-48.838%)}

/* 12 · notebook: přiblížení na obrazovku */
.device{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.web-txt{position:absolute;inset:0;pointer-events:none}
.s-web.zoom .zatm{pointer-events:none}
@media (max-width:760px),(max-aspect-ratio:3/4){
  .device,.web-txt{display:contents}
  .bleed.fit{height:62vh}
  .ph-cover{width:max(100%,96.7vh);}
}

/* 20 · reel: 9 scén ze storyboardu, titulky v bezpečné zóně IG */
.reelshow{position:absolute;overflow:hidden;isolation:isolate;background:#0b1014}
.reelshow::after{content:"";position:absolute;inset:0;z-index:15;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.32) 0,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 100%)}
.rs{position:absolute;inset:0;opacity:0}
.rs:first-child{opacity:1}
.rs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.rs-bg{transform-origin:50% 50%;will-change:transform}
.rs-prog{position:absolute;z-index:20;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25)}
.rs-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff}

/* Inspirace · tečkované vodicí linky k obalu */
.dots{background:radial-gradient(circle,var(--ink-2) 1px,transparent 1.3px) 0 50%/9px 2px repeat-x;opacity:.7}