/* Re:FORM fx.css – třetí vrstva pohybu (jen s html.mo, tedy respektuje reduced-motion i přepínač Animace).
   Pruh s velkým slovem tématu, odhalení fotek, kurzor, přechod mezi stránkami, lepivé tlačítko na mobilu. */

/* --- velké slovo tématu, které jede podle scrollu --- */
.mo .fx-band{position:relative;overflow:hidden;padding:clamp(1.2rem,3.5vw,2.6rem) 0;pointer-events:none;user-select:none;-webkit-user-select:none;border-bottom:1px solid var(--line);contain:layout paint}
.mo .fx-row{display:flex;align-items:center;width:max-content;white-space:nowrap;will-change:transform;
  font:800 clamp(3.6rem,13vw,11.5rem)/.98 var(--head);letter-spacing:-.045em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.mo .fx-row.r1{font-size:clamp(2.2rem,7vw,6rem);margin-top:.25em;color:var(--ink);-webkit-text-stroke:0;letter-spacing:-.035em}
.mo body:is(.eia,.prava,.petice,.projekty) .fx-row{-webkit-text-stroke-color:var(--acc)}
.mo body:is(.eia,.prava,.petice,.projekty) .fx-row.r1{color:var(--acc)}
.mo .fx-row i{display:inline-block;width:.16em;height:.16em;margin:0 .55em;background:var(--acc);flex:none;transform:translateY(-.04em)}
.mo body:not(:is(.eia,.prava,.petice,.projekty)) .fx-row i{background:var(--ink)}

/* --- fotky: vyjedou zpod závěsu a dosednou --- */
.mo .fx-img{clip-path:inset(0 0 100% 0)}
.mo .fx-img img{scale:1.22;transform-origin:50% 100%}
.mo .fx-img.fx-in{clip-path:inset(-3rem);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1)}
.mo .fx-img.fx-in img{scale:1;transition:scale 1.6s cubic-bezier(.16,1,.3,1)}

/* --- hero se při scrollu zvedá (proměnnou --hs už nastavuje motion4.js) --- */
.mo .hero h1{translate:0 calc(var(--hs,0)*-3.2rem);opacity:calc(1 - var(--hs,0)*.55)}
.mo .hero .lede,.mo .hero .actions{translate:0 calc(var(--hs,0)*-1.8rem)}
.mo .hero .hp{translate:0 calc(var(--hs,0)*3.5rem)}

/* --- kurzor (jen myš) --- */
.fx-cur{position:fixed;left:0;top:0;z-index:200;width:2.2rem;height:2.2rem;margin:-1.1rem 0 0 -1.1rem;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;opacity:0;
  display:grid;place-items:center;font:700 .62rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--on);
  transition:opacity .25s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .25s,border-color .25s;mix-blend-mode:normal}
.fx-cur.on{opacity:.85}
.fx-cur.hot{width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;background:var(--acc);border-color:var(--acc);opacity:.96}
.fx-cur.down{width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem}

/* --- mobil: lepivé tlačítko podpisu petice --- */
.fx-cta{display:none}
@media (max-width:900px){
  .mo .fx-cta{display:block;position:fixed;z-index:60;left:var(--gut);right:var(--gut);bottom:calc(.8rem + env(safe-area-inset-bottom));
    padding:1rem 1.2rem;border:0;border-radius:var(--r);background:var(--acc);color:var(--on);font:700 1.05rem/1 var(--head);letter-spacing:-.01em;
    box-shadow:0 14px 34px -12px rgb(16 20 30/.55);translate:0 calc(100% + 2rem);transition:translate .5s var(--ease)}
  .mo .fx-cta.on{translate:0 0}
  .mo .fx-cta:active{scale:.98}
  /* na mobilu bloky naskakují výrazněji */
  .mo .rv{translate:0 38px;scale:.965;transition:opacity .8s ease var(--d,0ms),translate .9s var(--ease) var(--d,0ms),scale .9s var(--ease) var(--d,0ms)}
  .mo .rv.rvin{translate:0 0;scale:1}
}

/* --- přechod mezi stránkami: nová stránka se odhalí zespodu --- */
html.mo::view-transition-old(root){animation:fxout .38s cubic-bezier(.7,0,.3,1) both}
html.mo::view-transition-new(root){animation:fxin .75s cubic-bezier(.77,0,.18,1) both}
@keyframes fxout{to{opacity:.35;transform:translateY(-4vh) scale(.985)}}
@keyframes fxin{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:900px){.mo body.petice footer.site{padding-bottom:5.5rem}}