/* KONVALINKA-SCROLL: úvod ovládaný scrollováním (jen s třídou .kscroll, kterou dává scroll/rezim.js). Stejný přístup jako Opale.
   Obraz úvodu zůstane přilepený, kamera podle posunu najede od konvalinky s miskou do makra hladiny a na konci přejde do barvy stránky.
   Zdroj: vizitka/tools/ukazka-konvalinka-soubory/scroll/scroll.css (kopíruje tools/hero_obraz.py).
   Jeden obraz (29. 10. 2026): pod plátnem je jako podklad přesně první snímek sekvence (telefon m/000, počítač d/000,
   stejný výřez „cover“ jako plátno), statická fotka úvodu se při .kscroll nezobrazuje a plátno se ukáže bez prolínání,
   takže nikdy nejsou vidět dva různé obrazy přes sebe. */
.kscroll .hero-obraz{--ks-top:max(44svh,calc(112.5vw - 7rem));display:block;position:relative;isolation:isolate;max-width:none;margin:0;padding:0;gap:0;height:295vh;min-height:0;align-content:normal;background:#f4f6f0;overflow:visible;overflow-x:clip}
.kscroll .hero-obraz>.ho-obraz{position:sticky;top:0;left:auto;right:auto;z-index:0;display:block;width:100%;max-width:none;height:100vh;height:100svh;margin:0;overflow:hidden;background:#f4f6f0 url(ef57f21f/m/000.webp) 50% 0/100% auto no-repeat}
.kscroll .hero-obraz>.ho-obraz::after{display:none}
.kscroll .hero-obraz .ho-obraz picture{display:contents}
.kscroll .hero-obraz .ho-obraz img{display:none}
.kscroll .ks-c{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.kscroll .ks-c.is-on{opacity:1}
.kscroll .hero-obraz>.ho-obraz.is-kresli{background-image:none}
@media (max-width:759px){
/* telefon: nahoře celá scéna na šířku displeje (výřez sleduje misku), text pod ní; s posunem text odjede a záběr dorazí přes celou výšku */
.kscroll .ks-c{inset:0 0 auto;height:auto;aspect-ratio:640/720;transform-origin:50% 0}
.kscroll .ks-dno{position:absolute;left:0;right:0;top:calc(112.5vw - 8rem);height:8.05rem;transform-origin:50% calc(8rem - 112.5vw);background:linear-gradient(180deg,rgb(244 246 240/0),#f4f6f0);pointer-events:none}
}
@media (min-width:760px){.kscroll .ks-dno{display:none}}
.kscroll .ks-fade{position:absolute;inset:0;background:#f4f6f0;opacity:0;pointer-events:none}
.kscroll .hero-obraz .hero-text{display:block;position:relative;z-index:1;max-width:none;margin-top:-100vh;margin-top:-100svh;padding:var(--ks-top) 1.1rem 18svh;
  background:linear-gradient(180deg,rgb(244 246 240/0) calc(var(--ks-top) - 4.5rem),rgb(244 246 240/.84) calc(var(--ks-top) - .5rem),rgb(244 246 240/.84) calc(100% - 20svh),rgb(244 246 240/0))}
@media (min-width:760px){
.kscroll .hero-obraz{height:285vh}
.kscroll .hero-obraz>.ho-obraz{background:#f4f6f0 url(ef57f21f/d/000.webp) 50% 50%/cover no-repeat}
.kscroll .hero-obraz .hero-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:100vh;min-height:100svh;padding:6rem 3rem 4rem;background:none}
.kscroll .hero-obraz .hero-text>*{max-width:29rem}
.kscroll .hero-obraz .hero-text::before{content:"";position:absolute;inset:0 0 -20vh;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(244 246 240/.9) 0,rgb(244 246 240/.72) 30%,rgb(244 246 240/.25) 52%,rgb(244 246 240/0) 66%);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
}
@media (min-width:1100px){.kscroll .hero-obraz .hero-text{padding-left:max(3rem,calc(50% - 560px))}}
/* /KONVALINKA-SCROLL */