/* OPALE-SCROLL: úvod ovládaný scrollováním (jen s třídou .oscroll, kterou dává scroll/rezim.js). Stejný přístup jako Konvalinka.
   Obraz úvodu zůstane přilepený, kamera podle posunu najede k opálu a záběr se přiblíží. S .oscena (style.css) navazuje plátno opal.js, jinak záběr přejde do barvy pásu pod úvodem.
   Zdroj: vizitka/tools/ukazka-opale-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 .oscroll nezobrazuje a plátno se ukáže bez prolínání,
   takže nikdy nejsou vidět dva různé obrazy přes sebe. */
.oscroll .hero-obraz{display:block;position:relative;isolation:isolate;max-width:none;margin:0;padding:0;height:330vh;height:330svh;min-height:0;gap:0;align-content:normal;background:#2b1633;overflow:visible;overflow-x:clip}
.oscroll .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:#2b1633 url(a42d99a8/m/000.webp) 50% 0/100% auto no-repeat}
.oscroll .hero-obraz>.ho-obraz::after{display:none}
.oscroll .hero-obraz .ho-obraz picture{display:contents}
.oscroll .hero-obraz .ho-obraz img{display:none}
.oscroll .os-c{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0;opacity:0}
.oscroll .os-c.is-on{opacity:1}
.oscroll .hero-obraz>.ho-obraz.is-kresli{background-image:none}
@media (max-width:759px){
/* telefon: nejdřív celá scéna na šířku displeje (jako dnešní obraz), s posunem kamera dorazí až přes celou výšku */
.oscroll .os-c{inset:0 0 auto;height:auto;aspect-ratio:640/720;transform-origin:50% 0}
.oscroll .os-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(43 22 51/0),#2b1633);pointer-events:none}
}
@media (min-width:760px){.oscroll .os-dno{display:none}}
.oscroll .os-fade{position:absolute;inset:0;background:#f6e7ee;opacity:0;pointer-events:none}
.oscroll .hero-obraz .hero-text{display:block;position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;padding:46svh 1.25rem 18svh;--ink:#fcf8fa;--mute:#eadcef;--plum:#f1b8d8;color:#fcf8fa;
  background:linear-gradient(180deg,rgb(43 22 51/0) 26svh,rgb(43 22 51/.84) 44svh,rgb(43 22 51/.84) calc(100% - 20svh),rgb(43 22 51/0))}
.oscroll .hero-obraz .hero-text h1{color:#fcf8fa}
.oscroll .hero-obraz .hero-text h1 em{color:#f1b8d8}
.oscroll .hero-obraz .btn{color:#2b1633}
.oscroll .hero-obraz .btn:hover{background:#fcf8fa}
.oscroll .hero-obraz .btn-ghost{color:#f1b8d8}
.oscroll .hero-obraz .btn-ghost:hover{background:#f1b8d8;color:#2b1633}
.oscroll .hero-obraz .open-now.is-open{color:#a6e3bd}
.oscroll .hero-obraz .open-now::before{background:#c9b6d1}
.oscroll .hero-obraz .open-now.is-open::before{background:#5fd08f}
.oscroll .hero-obraz :focus-visible{outline-color:#f1b8d8}
@media (min-width:760px){
.oscroll .hero-obraz{height:320vh;height:320svh}
.oscroll .hero-obraz>.ho-obraz{background:#2b1633 url(a42d99a8/d/000.webp) 50% 50%/cover no-repeat}
.oscroll .hero-obraz .hero-text{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;max-width:none;padding:6rem 3rem 4rem;background:none}
.oscroll .hero-obraz .hero-text>*{max-width:34rem}
.oscroll .hero-obraz .hero-text::before{content:"";position:absolute;inset:0 0 -20vh;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(43 22 51/.9) 0,rgb(43 22 51/.72) 30%,rgb(43 22 51/.25) 52%,rgb(43 22 51/0) 66%);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
}
@media (min-width:1100px){.oscroll .hero-obraz .hero-text{padding-left:max(3rem,calc(50% - 560px))}}
/* /OPALE-SCROLL */