/* La materia gialla e i suoi strati. Le variabili --van, --shop, --gettone,
   --pacco, --porta, --mulino, --cavallo le scrive `_progetto-morph.js` a
   ogni fotogramma: qui si decide solo che aspetto ha ogni strato quando è
   acceso. --fine (0→1) è l'ultimo tratto di scorrimento, quello del cavallo. */
.story-morph{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.morph-top{fill:#e9bc51}
.morph-side{fill:#ca863f;transform:translate(0,19px)}
/* L'alone: la stessa massa, in ritardo di fase e più chiara, dietro. */
.morph-alone{fill:#f3d98f;opacity:.55;transform:translate(6px,10px)}
.morph-sat path{fill:none;stroke:#07815a;stroke-width:3.5;stroke-linecap:round;opacity:0}
.morph-sat path:nth-child(3n+1){stroke:#ca863f}.morph-sat path:nth-child(3n){stroke:#ed786d}
.morph-thread{fill:none;stroke:#07815a;stroke-width:4;stroke-dasharray:12 15;stroke-linecap:round}
.morph-node.start{fill:#e9bc51}
.morph-node.end{fill:#ed786d}
.morph-van{opacity:var(--van,0)}
.morph-van circle{fill:#24543f}
.morph-van path{fill:#fffaf2}
.morph-shop{opacity:var(--shop,0);stroke:#24543f;stroke-width:5;fill:none}
.morph-shop .shop-tenda{stroke:#fffaf2;stroke-width:7}
.morph-shop rect{fill:#24543f;stroke:none}
.morph-gettone{opacity:var(--gettone,0);fill:none;stroke:#24543f;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.morph-gettone circle{stroke:#ca863f;stroke-width:4}
.morph-pacco{opacity:var(--pacco,0);fill:#ca863f}
.morph-pacco path{fill:none;stroke:#e9bc51;stroke-width:6}
.morph-porta{opacity:var(--porta,0);fill:#ca863f}
.morph-porta .porta-luce{fill:#fffaf2}
.morph-porta circle{fill:#24543f}
.morph-mulino{opacity:var(--mulino,0);fill:none;stroke:#24543f;stroke-width:5;stroke-linecap:round}
.morph-mulino circle:first-child{fill:#fffaf2cc}
.morph-mulino .mulino-acqua{stroke:#07815a;stroke-width:4;stroke-dasharray:none}
.morph-cavallo{opacity:var(--cavallo,0);fill:#24543f;transition:opacity .4s}

/* I tre prodotti galleggiano sopra la montagna, tornano sopra la città. */
.story-road,.story-parcel,.story-city{display:none}
.story-produce{width:20%;height:23%}
.story-produce.one{left:15%;top:7%}
.story-produce.two{left:48%;top:9%}
.story-produce.three{left:73%;top:12%}
.project-story[data-scene="1"] .story-produce{opacity:0;transform:translateY(70px) scale(.4)}
.project-story[data-scene="3"] .story-produce{opacity:0;transform:translateY(80px) scale(.5)}
.project-story[data-scene="4"] .story-produce{opacity:1;transform:translateY(-10px) scale(.8)}
.project-story[data-scene="5"] .story-produce{opacity:0;transform:translateY(-60px) scale(.5)}

/* ⚠️ LA CHIUSURA: il cavallo diventa «via», e «via» passa sotto il nome.
   Sul filo il cavallo si stringe in una pillola (è il morph, in
   `_progetto-morph.js`); qui la pillola lascia il posto alla parola vera, nel
   corsivo di casa, davanti a «Mercatorum». Poi, nell'ultimo tratto, la parola
   scivola sotto e si porta dietro il resto dell'indirizzo: via-mercatorum.com.
   --fine 0→.55: la parola appare · .55→1: passa sotto. */
.fine-marchio{position:absolute;left:5%;bottom:6%;margin:0;display:grid;gap:.14em;font:800 clamp(34px,5.2vw,68px)/1 MarketArchivo,Archivo,sans-serif;letter-spacing:-2px;color:#234e3b;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .8s cubic-bezier(.2,.75,.2,1);white-space:nowrap;padding-left:1.45em}
.project-story[data-scene="5"] .fine-marchio{opacity:1;transform:none}
/* «via» sta appeso a sinistra del nome, in assoluto: così il nome non si
   sposta quando la parola scende sotto. --fine .3→.55: appare · .58→1: scende
   di una riga e si stringe, e la riga sotto (l'indirizzo) si scopre da sinistra. */
.fine-nome{position:relative;display:inline-block}
.fine-via{position:absolute;right:100%;top:0;margin-right:.2em;font:italic 500 .92em/1 MarketLora,Georgia,serif;letter-spacing:0;color:#07815a;opacity:calc(min(1,max(0,(var(--fine,0) - .3) * 4)) * (1 - min(1,max(0,(var(--fine,0) - .78) * 6))));transform:translate(calc(min(1,max(0,(var(--fine,0) - .58) * 2.6)) * 1.35em),calc(min(1,max(0,(var(--fine,0) - .58) * 2.6)) * 1.14em)) scale(calc(1 - min(1,max(0,(var(--fine,0) - .58) * 2.6)) * .46));transform-origin:left top}
.fine-dominio{font:italic 500 .5em/1 MarketLora,Georgia,serif;letter-spacing:0;color:#07815a;opacity:calc(min(1,max(0,(var(--fine,0) - .8) * 5)));clip-path:inset(0 calc((1 - min(1,max(0,(var(--fine,0) - .8) * 5))) * 100%) 0 0)}

/* Lo slogan che si completa da solo. Il suggerimento sta sotto, in chiaro,
   e le lettere battute gli passano sopra: è così che si legge un campo che
   ti propone una cosa prima che tu abbia finito di scriverla. */
.story-slogan{font:italic 500 clamp(19px,2.1vw,26px)/1.3 MarketLora,Georgia,serif;margin:-6px 0 18px;color:#234e3b}
.slogan-fisso{opacity:.72}
.slogan-campo{position:relative;display:inline-block;white-space:nowrap}
.slogan-ghost{position:absolute;left:0;top:0;color:#234e3b;opacity:.28;pointer-events:none}
.slogan-testo{position:relative;color:#07815a}
.slogan-caret{display:inline-block;width:2px;height:.95em;background:#07815a;vertical-align:-.12em;margin-left:1px;animation:slogan-lampeggia 1s steps(2,start) infinite}
@keyframes slogan-lampeggia{50%{opacity:0}}

/* L'invito a UNA persona, in fondo alla quinta scena. */
.story-passa{margin:22px 0 10px;max-width:460px}
.passa-dice{font:italic 500 18px/1.3 MarketLora,Georgia,serif;margin:0 0 10px}
.passa-scelte{display:flex;flex-wrap:wrap;gap:8px}
.passa-scelte button{font:500 14px/1.2 MarketArchivo,Archivo,sans-serif;padding:9px 13px;border:1.5px solid #d0d5c5;border-radius:999px;background:#fffaf2;color:#234e3b;cursor:pointer;min-height:40px}
.passa-scelte button:active{transform:scale(.97)}
.passa-scelte button[aria-pressed="true"]{border-color:#07815a;background:#e6eadb}
.passa-manda{margin-top:10px;font:600 15px/1 MarketArchivo,Archivo,sans-serif;padding:12px 18px;border:0;border-radius:999px;background:#07815a;color:#fffaf2;cursor:pointer;min-height:44px}
.passa-esito{font-size:14px;color:#64735d;min-height:1.3em;margin:8px 0 0}

/* L'ultima scena è più alta delle altre: la parte in più è il tempo del cavallo. */
.story-fine{min-height:165svh;align-items:center;padding-bottom:72svh}

@media(max-width:700px){
  /* Sul telefono il testo sta in alto e l'arte in basso: centrare una scena
     più alta dello schermo la manda sotto la testata. */
  .story-step{align-items:flex-start;padding-bottom:40svh}
  .story-art{height:38svh}
  .project-story[data-scene="4"] .story-produce{opacity:0}
  .fine-marchio{left:6%;bottom:4%;font-size:clamp(28px,9.5vw,42px);padding-left:1.3em}
  .story-slogan{font-size:17px;margin:-4px 0 12px}
  .story-fine{min-height:150svh;padding-bottom:70svh}
  .passa-scelte button{font-size:13px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce){
  .story-art{opacity:1}.story-produce{animation:none}
  .slogan-caret{animation:none}
  .fine-marchio,.fine-via,.fine-dominio,.morph-cavallo{transition:none}
}