/* =========================================================
   HOME — apertura che scorre → 100 cose da fare (mappa) → capitoli → scrivimi
   ========================================================= */
html{scroll-behavior:auto}
body{background:#f2f1ed;color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu{opacity:0;animation:appare-pieno 1.2s var(--ease) 1.2s forwards}
@keyframes appare-pieno{to{opacity:1}}
@keyframes appare{to{opacity:.85}}
@keyframes lettera{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- 1. APERTURA ---------- */
.apertura{position:relative;height:100svh}
.anim .apertura{height:230svh}
.scena{position:relative;height:100svh;overflow:hidden;background:#dfe3e4}
.anim .scena{position:sticky;top:0}
.strato{position:absolute;inset:0;will-change:transform;transform-origin:50% 58%}
.strato img,.motto{position:absolute;inset:0;width:100%;height:100%}
.strato img{object-fit:cover}
.motto{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:6vh;color:var(--ink);text-align:center;pointer-events:none;user-select:none;will-change:transform,opacity}
.motto .r{display:block;font:italic 100 clamp(52px,min(12.6vw,28vh),250px)/.88 var(--serif);letter-spacing:.06em;white-space:nowrap}
.motto .r span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.12em);animation:lettera 1.6s var(--ease) forwards}
.motto .because{display:block;transform:translateX(16vw);font:italic 300 clamp(16px,1.6vw,26px)/1 var(--serif);letter-spacing:.32em;margin:clamp(10px,1.6vh,22px) 0;opacity:0;animation:appare 1.4s var(--ease) 1.5s forwards}
.firma{position:absolute;left:0;right:0;bottom:0;padding:70px 0 calc(28px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(242,241,237,0),rgba(242,241,237,.82) 55%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink);opacity:0;animation:appare-pieno 1.4s var(--ease) 2s forwards}
.firma b{font:400 13px var(--sans);letter-spacing:.5em;text-transform:uppercase;padding-left:.5em}
.firma small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.65}
.firma::before{content:"";width:1px;height:38px;background:currentColor;opacity:.5;margin-bottom:6px}
@media (max-aspect-ratio:4/5){
  .motto{justify-content:flex-start;padding-top:24vh}
  .motto .r{font-size:min(15vw,9vh);letter-spacing:.03em;line-height:.9}
  .motto .because{font-size:15px;letter-spacing:.26em;transform:none}
  .firma{color:#f2f1ed;background:linear-gradient(180deg,rgba(20,22,24,0),rgba(20,22,24,.6) 60%)}
}

/* ---------- 2. 100 COSE DA FARE ---------- */
.desideri{position:relative;background:#0b0c0c;color:#e6e9e4;padding:clamp(96px,14vh,150px) 0 clamp(40px,6vh,70px);overflow:hidden}
.d-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 var(--pad) clamp(22px,3vh,36px)}
.d-testa .sopra{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#8d948c;margin:0 0 14px}
.d-testa h2{font:italic 100 clamp(46px,8vw,128px)/.92 var(--serif);letter-spacing:.01em;margin:0}
.d-conta{display:flex;align-items:baseline;gap:12px;font:italic 200 clamp(20px,2vw,28px) var(--serif);color:#bfc5bd}
.d-conta b{font:italic 100 clamp(64px,9vw,130px)/.9 var(--serif);color:#e6e9e4}
.d-corpo{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:min(78vh,820px);min-height:520px;border-top:1px solid rgba(230,233,228,.14)}
.d-mappa{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;background:#0b0c0c}
.d-mappa.trascina{cursor:grabbing}
.d-mappa.attiva{touch-action:none}
.d-mappa svg{width:100%;height:100%;display:block}
.terra{fill:rgba(230,233,228,.035);stroke:rgba(230,233,228,.07);stroke-width:.5;vector-effect:non-scaling-stroke}
.puntini{fill:none;stroke:rgba(230,233,228,.3);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rotta{fill:none;stroke:#e6e9e4;stroke-opacity:.5;stroke-width:1.3;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rotta.on{stroke-opacity:1;stroke-width:2}
.rotta.nascosto,.pin.nascosto{display:none}
.pin{cursor:pointer;outline:none}
.pin .punto{fill:#0b0c0c;stroke:#e6e9e4;stroke-width:1.6;vector-effect:non-scaling-stroke;transition:fill .3s}
.pin.fatto .punto{fill:#e6e9e4}
.pin .hit{fill:transparent}
.pin .alone{fill:none;stroke:#e6e9e4;stroke-opacity:0;vector-effect:non-scaling-stroke}
.pin.on .alone{stroke-opacity:.7;animation:onda 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.pin.on .punto,.pin:hover .punto{fill:#e6e9e4}
.pin text{font:500 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;fill:#e6e9e4;pointer-events:none;paint-order:stroke;stroke:#0b0c0c;stroke-width:3px;opacity:0;transition:opacity .25s}
.pin:hover text,.pin.on text,.pin:focus-visible text{opacity:1}
.pin:focus-visible .punto{stroke-width:3}
@keyframes onda{0%{transform:scale(1);stroke-opacity:.7}100%{transform:scale(4);stroke-opacity:0}}

.d-ctrl{position:absolute;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);display:flex;gap:6px;align-items:center;z-index:5}
.d-ctrl button{font:inherit;font-size:13px;min-width:40px;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(230,233,228,.2);background:rgba(11,12,12,.7);color:#e6e9e4;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.d-ctrl button.on{background:#e6e9e4;color:#0b0c0c}
.d-ctrl .tocco{display:none}
.d-hint{position:absolute;right:14px;top:12px;font-size:11px;color:#8d948c;letter-spacing:.08em;z-index:5;pointer-events:none}
@media (hover:none){.d-ctrl .tocco{display:block}.d-hint{display:none}}

.d-scheda{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:6;width:min(330px,calc(100% - 24px));background:rgba(16,18,17,.94);border:1px solid rgba(230,233,228,.16);border-radius:18px;overflow:hidden;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .7s var(--ease),opacity .5s}
.d-scheda.on{transform:none;opacity:1;pointer-events:auto}
.d-scheda img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#1c1f1e}
.d-scheda .t{padding:16px 18px 18px}
.d-scheda small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8d948c}
.d-scheda h3{font:italic 300 28px/1.1 var(--serif);margin:6px 0 4px}
.d-scheda .luogo{color:#bfc5bd;font-size:13px;margin:0 0 10px}
.d-scheda p.y{color:#d6dbd4;font-size:14px;margin:0}
.d-scheda .cred{margin-top:12px;font-size:11px;color:#8d948c;line-height:1.4}
.d-scheda .cred a{border-bottom:1px solid rgba(230,233,228,.25)}
.d-scheda .x{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(11,12,12,.7);color:#e6e9e4;cursor:pointer;font-size:18px;line-height:1}

.d-lista{display:flex;flex-direction:column;min-height:0;border-left:1px solid rgba(230,233,228,.14);background:#0b0c0c}
.d-filtri{padding:16px 18px 12px;border-bottom:1px solid rgba(230,233,228,.14);display:grid;gap:12px}
.d-filtri input{width:100%;font:inherit;font-size:14px;padding:11px 16px;border-radius:999px;border:1px solid rgba(230,233,228,.2);background:transparent;color:#e6e9e4}
.d-filtri input::placeholder{color:#8d948c}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}
.d-chips button,.d-sorpresa{font:inherit;font-size:12px;padding:7px 12px;border-radius:999px;border:1px solid rgba(230,233,228,.2);background:transparent;color:#e6e9e4;cursor:pointer;transition:background .25s,color .25s}
.d-chips button.on{background:#e6e9e4;color:#0b0c0c;border-color:#e6e9e4}
.d-sorpresa{justify-self:start;border-color:#e6e9e4}
@media (hover:hover){.d-chips button:not(.on):hover,.d-sorpresa:hover{background:rgba(230,233,228,.12)}}
.d-ol{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#333 transparent}
.d-ol li.nascosto{display:none}
.d-ol button{display:grid;grid-template-columns:34px minmax(0,1fr) 14px;gap:10px;align-items:start;width:100%;text-align:left;padding:13px 18px;border:0;border-bottom:1px solid rgba(230,233,228,.08);background:transparent;color:#e6e9e4;font:inherit;cursor:pointer}
.d-ol .n{font:italic 300 15px var(--serif);color:#8d948c;padding-top:1px}
.d-ol .tt{font-size:14.5px;line-height:1.3}
.d-ol small{display:block;font-size:12px;color:#8d948c;margin-top:2px}
.d-ol .st{width:10px;height:10px;border-radius:50%;border:1.5px solid #e6e9e4;margin-top:5px}
.d-ol .fatto .st{background:#e6e9e4}
.d-ol li.on button{background:rgba(230,233,228,.08)}
@media (hover:hover){.d-ol button:hover{background:rgba(230,233,228,.06)}}
.d-vuoto{padding:24px 18px;color:#8d948c;font-size:14px}

@media (max-width:900px){
  .d-corpo{grid-template-columns:1fr;grid-template-rows:62svh auto;height:auto}
  .d-lista{border-left:0;border-top:1px solid rgba(230,233,228,.14)}
  .d-ol{max-height:60vh}
  .d-scheda{width:calc(100% - 24px);bottom:64px;display:grid;grid-template-columns:112px 1fr;align-items:stretch}
  .d-scheda img{aspect-ratio:auto;height:100%;min-height:128px}
  .d-scheda .t{padding:12px 14px 12px}
  .d-scheda h3{font-size:20px;margin:4px 0 2px}
  .d-scheda .luogo{margin:0 0 6px;font-size:12px}
  .d-scheda p.y{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .d-scheda .cred{margin-top:8px;font-size:10px}
}

/* ---------- 3. CAPITOLI ---------- */
.capitoli{position:relative;background:#0b0c0c;color:#f2f1ed}
.cp-pin{position:relative;height:100svh;overflow:hidden}
.cp{position:absolute;inset:0;overflow:hidden}
.cp-foto{position:absolute;inset:0;will-change:transform}
.cp-foto img{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover}
.cp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.04) 36%,rgba(0,0,0,.78));pointer-events:none}
.cp-testo{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,5vw,80px);padding:clamp(24px,5vw,72px);padding-bottom:clamp(64px,13vh,140px)}
.cp-txt{max-width:min(720px,100%)}
.cp .cap{font-size:12px;letter-spacing:.34em;text-transform:uppercase;opacity:.9;margin:0 0 14px;overflow:hidden}
.cp h2{font:italic 100 clamp(66px,14vw,240px)/.88 var(--serif);letter-spacing:.02em;margin:0;overflow:hidden;padding-bottom:.1em}
.cp h2 .l{display:inline-block;transform:translateY(110%);transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.cp .riga,.cp .cap span,.cp .vai-c,.cp .num,.cp-extra{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.cp .riga{max-width:38ch;margin:20px 0 0;font-size:clamp(15px,1.2vw,18px);transition-delay:.25s}
.cp .vai-c{display:inline-block;margin-top:22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(242,241,237,.5);padding-bottom:4px;transition-delay:.35s}
.cp .cap span{display:inline-block;transition-delay:.05s}
.cp .num{position:absolute;right:clamp(24px,5vw,72px);top:clamp(80px,13vh,130px);z-index:3;font:italic 200 clamp(20px,2vw,28px) var(--serif);letter-spacing:.1em}
.cp-extra{transition-delay:.4s}
.cp.on h2 .l{transform:none}
.cp.on .riga,.cp.on .cap span,.cp.on .vai-c,.cp.on .num,.cp.on .cp-extra{opacity:1;transform:none}
@media (hover:hover){.cp .vai-c:hover{border-color:#f2f1ed}}
.cp-prog{position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);bottom:clamp(22px,4vh,40px);height:1px;background:rgba(242,241,237,.25);z-index:5}
.cp-prog i{position:absolute;left:0;top:0;height:1px;width:100%;background:#f2f1ed;transform-origin:left;transform:scaleX(0)}
.cp-nota{position:absolute;left:clamp(24px,5vw,72px);top:clamp(80px,13vh,130px);z-index:3;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}

/* Road to 10k */
.r10k{width:min(460px,42vw);padding-bottom:6px}
.r10-top{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.r10-euro{font:italic 100 clamp(54px,7vw,104px)/.9 var(--serif)}
.r10-top span{font:italic 200 clamp(18px,1.8vw,26px) var(--serif);opacity:.85}
.r10-barra{position:relative;height:6px;border-radius:99px;background:rgba(242,241,237,.22);margin:8px 0 34px}
.r10-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:#f2f1ed;transition:width 1.6s var(--ease) .2s}
.r10-dot{position:absolute;left:0;top:50%;width:16px;height:16px;margin:-8px 0 0 -2px;border-radius:50%;background:#f2f1ed;box-shadow:0 0 0 6px rgba(242,241,237,.2)}
.r10-tappa{position:absolute;top:14px;transform:translateX(-50%);font-size:12px;letter-spacing:.1em;white-space:nowrap}
.r10-tappa::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:10px;background:rgba(242,241,237,.5)}
.r10-tappa:last-child{transform:translateX(-100%)}
.r10-nota{margin:0;font-size:12.5px;opacity:.75}

@media (max-width:900px){
  .cp-testo{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:22px}
  .r10k{width:100%}
  .cp h2{font-size:clamp(56px,19vw,120px)}
}

/* ---------- 4. SCRIVIMI ---------- */
.chiusura{background:#f2f1ed;color:var(--ink);padding:clamp(80px,12vh,150px) 0 0;overflow:hidden}
.ch-corpo{max-width:1280px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,100px);align-items:end}
.ch-corpo h2{font:italic 100 clamp(70px,13vw,220px)/.88 var(--serif);letter-spacing:.01em;margin:0}
.ch-link{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ch-link li{padding:18px 0;border-bottom:1px solid var(--line)}
.ch-link small{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ch-link a{font:italic 300 clamp(22px,2.2vw,30px)/1.2 var(--serif);overflow-wrap:anywhere}
@media (hover:hover){.ch-link a:hover{opacity:.6}}
.striscia-motto{margin-top:clamp(60px,9vw,120px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:18px 0}
.striscia-motto div{display:inline-block;animation:scorri 38s linear infinite;font:italic 100 clamp(30px,4vw,56px) var(--serif);letter-spacing:.08em}
.striscia-motto span{padding-right:.8em}
.striscia-motto span::after{content:"·";padding-left:.8em;color:var(--muted)}
@keyframes scorri{to{transform:translateX(-50%)}}
@media (max-width:760px){.ch-corpo{grid-template-columns:1fr}}

/* ---------- movimento ridotto / senza animazioni ---------- */
.statico .anim .apertura{height:100svh}
@media (prefers-reduced-motion:reduce){
  .motto .r span,.motto .because,.firma,.menu{opacity:1;filter:none;transform:none;animation:none}
  .motto .because{opacity:.85}
  .cp-pin{height:auto}
  .cp{position:relative;height:100svh}
  .cp-prog,.cp-nota{display:none}
  .cp h2 .l,.cp .riga,.cp .cap span,.cp .vai-c,.cp .num,.cp-extra{opacity:1;transform:none;transition:none}
  .striscia-motto div{animation:none}
}

/* ---------- dettagli aggiunti dopo la prima versione ---------- */
.firma.pronta{opacity:1;animation:none}
.d-ol{position:relative}
.js .d-mappa:not(.visto) .pin .in{opacity:0}
.d-mappa.visto .pin .in{animation:pop .8s var(--ease) both;animation-delay:calc(var(--k) * 16ms);transform-box:fill-box;transform-origin:center}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.piede-home{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));font-size:13px;color:var(--muted);background:#f2f1ed}
.piede-home a{border-bottom:1px solid var(--line)}
@media (hover:hover){.piede-home a:hover{color:var(--ink)}}

/* mappa a tutta schermata su desktop: titolo sopra la mappa, lista a destra */
@media (min-width:901px){
  .desideri{height:100svh;min-height:620px;padding:0}
  .d-testa{position:absolute;left:0;top:clamp(92px,13vh,128px);z-index:4;display:block;padding:0 var(--pad);pointer-events:none}
  .d-testa h2{font-size:clamp(44px,6.6vw,104px)}
  .d-conta{margin:clamp(14px,2vh,24px) 0 0}
  .d-conta b{font-size:clamp(56px,7vw,100px)}
  .d-corpo{position:absolute;inset:0;height:auto;min-height:0;border-top:0;grid-template-columns:minmax(0,1fr) 400px}
  .d-lista{padding-top:72px}
}

/* capitoli: correzioni */
.cp-foto img{max-width:none}
.cp h2{white-space:nowrap}
@media (min-width:901px){
  .cp h2{font-size:clamp(66px,12vw,210px)}
  .r10k{position:absolute;right:clamp(24px,5vw,72px);top:30%;width:min(460px,38vw)}
}
@media (max-width:900px){.cp h2{font-size:clamp(46px,15.5vw,120px)}}

/* menu semi-trasparente dopo l'apertura; nota "foto provvisoria" solo sul capitolo 2 */
.menu.pieno{background:rgba(242,241,237,.5);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.cp-nota{opacity:0;transition:opacity .5s}
.cp-pin:has(.cp.on[data-i="1"]) .cp-nota{opacity:.55}
.cp[data-i="3"] .cp-foto img{filter:brightness(.66)}