/* Inflow FX · racconto-sticky. Senza JS (o prima che parta): le foto e poi i testi, in ordine. */
[data-fx~="racconto-sticky"]{position:relative;--fx-rs-sfondo:transparent;background:var(--fx-rs-sfondo);
  transition:background-color .8s ease}
[data-fx~="racconto-sticky"] .fx-rs-quadro{margin:0 0 16px}
[data-fx~="racconto-sticky"] .fx-rs-quadro img{display:block;width:100%;height:auto}
[data-fx~="racconto-sticky"] .fx-rs-passi{list-style:none;margin:0;padding:0}

/* with JS: the stage stays still (sticky) while the steps scroll */
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  margin:0}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-quadro{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .7s ease}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-quadro.fx-rs-attivo{opacity:1}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-quadro > img{width:100%;height:100%;object-fit:cover;
  transform:scale(var(--fx-rs-zoom,1));transform-origin:var(--fx-rs-fuoco,50% 50%);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),transform-origin 1.1s cubic-bezier(.16,1,.3,1)}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo{min-height:85vh;min-height:85svh;display:flex;align-items:center;
  padding:10vh 0}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo > *{max-width:34rem}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo:first-child{padding-top:30vh}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo:last-child{padding-bottom:30vh}

/* full screen (phone always, computer with data-fx-modo="pieno"): the steps are cards over the stage */
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passi{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;
  padding:0 16px}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo > *{background:var(--fx-rs-scheda,rgba(255,253,249,.94));
  color:var(--fx-rs-testo,#1c1a18);padding:22px 24px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-passo{justify-content:center}

/* computer, stage beside the text (the default) */
@media (min-width:900px){
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(24px,4vw,64px);align-items:start}
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-palco{grid-column:2;grid-row:1}
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-passi{grid-column:1;grid-row:1;margin-top:0;
    padding:0 0 0 clamp(16px,4vw,64px)}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-lato="sinistra"]:not([data-fx-modo="pieno"]){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-lato="sinistra"]:not([data-fx-modo="pieno"]) .fx-rs-palco{grid-column:1}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-lato="sinistra"]:not([data-fx-modo="pieno"]) .fx-rs-passi{grid-column:2;
    padding:0 clamp(16px,4vw,64px) 0 0}
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-passo > *{background:none;box-shadow:none;
    padding:0;color:inherit}
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-passo{opacity:.3;transition:opacity .5s ease}
  [data-fx~="racconto-sticky"].fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-passo.fx-rs-corrente{opacity:1}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-modo="pieno"] .fx-rs-passi{padding:0 clamp(24px,6vw,96px)}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-modo="pieno"] .fx-rs-passo:nth-child(even){justify-content:flex-end}
  [data-fx~="racconto-sticky"].fx-rs-on[data-fx-modo="pieno"] .fx-rs-passo:nth-child(odd){justify-content:flex-start}
}

/* the progress bar */
[data-fx~="racconto-sticky"] .fx-rs-avanzamento{display:none}
[data-fx~="racconto-sticky"].fx-rs-on .fx-rs-avanzamento{display:block;position:sticky;bottom:0;z-index:3;height:3px;
  margin-top:-3px;background:var(--fx-rs-accento,#b23a2e);transform-origin:0 50%;transform:scaleX(var(--fx-rs-tot,0))}

/* reduced motion: same states, no animation between them */
[data-fx~="racconto-sticky"].fx-rs-fermo,[data-fx~="racconto-sticky"].fx-rs-fermo *{transition:none!important}
@media (prefers-reduced-motion: reduce){
  [data-fx~="racconto-sticky"],[data-fx~="racconto-sticky"] *{transition:none!important}
}