/* Schermata di caricamento (js/caricamento.js), cinque varianti A-E. Sempre in chiaro, con i token Futura del tema chiaro:
   si vede prima che la mappa scelga il tema. Niente gradienti, niente aloni. Riduci movimento: resta solo la dissolvenza finale. */
.caricamento{--c-bg:#F7F8F7;--c-tx:#0E1411;--c-mu:#566059;--c-acc:#0B7A4B;--c-ok:#0B6B42;--c-line:#D9DFDB;--c-pill:#DDF1E6;--c-solid:#FFFFFF;
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--c-bg);color:var(--c-tx);font-family:var(--f);color-scheme:light;
  transition:background-color .4s ease-out}
.caricamento[hidden]{display:none}
.car-centro{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center}
.car-marchio{width:56px;height:56px;display:block}
.car-nome{margin:0;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--c-mu)}
.car-nome b{font-weight:600;color:var(--c-tx)}
.car-scena{display:grid;place-items:center}
.car-riga{margin:0;min-height:22px;font-size:15px;font-weight:500;color:var(--c-mu);font-variant-numeric:tabular-nums}
.car-riga:not(:empty)::after,.car-taccuino li.scrive .t::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--c-acc);animation:car-cursore 1s steps(1) infinite}
@keyframes car-cursore{50%{opacity:0}}

/* A: costa, il confine vero che si disegna */
.car-costa{width:220px;height:260px;overflow:visible}
.car-costa-fondo{fill:var(--c-pill);opacity:0}
.car-costa-linea{fill:none;stroke:var(--c-acc);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.car-costa.disegna .car-costa-linea{animation:car-traccia 2.56s cubic-bezier(.2,.8,.2,1) forwards}
.car-costa.disegna .car-costa-fondo{animation:car-compare .96s ease-out 1.76s forwards}
@keyframes car-traccia{to{stroke-dashoffset:0}}
@keyframes car-compare{to{opacity:.7}}

/* B: punti che si accendono dentro il comune (canvas) */
.car-punti{display:block}

/* C: marchio che si compone e barra dei passi */
.caricamento[data-variante=C] .car-marchio{display:none}
/* In C il marchio grande sta sopra il nome e la barra sotto: la scena si apre nel flusso della colonna. */
.caricamento[data-variante=C] .car-scena{display:contents}
.caricamento[data-variante=C] .car-marchio-grande{order:0}
.caricamento[data-variante=C] .car-barra{order:2;margin-top:4px}
.car-marchio-grande{width:96px;height:96px}
.car-marchio-grande svg{width:100%;height:100%;display:block}
.car-marchio-grande.compone>svg>rect{opacity:0;animation:car-compare-pieno .4s ease-out forwards}
.car-marchio-grande.compone .rv path{opacity:0;animation:car-compare-pieno .24s ease-out forwards;animation-delay:calc(var(--k) * 1ms + 200ms)}
@keyframes car-compare-pieno{to{opacity:1}}
.car-barra{display:flex;gap:4px;width:220px;margin-top:18px}
.car-barra i{position:relative;flex:1;height:3px;border-radius:2px;background:var(--c-line);overflow:hidden}
.car-barra i::after{content:"";position:absolute;inset:0;background:var(--c-acc);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.car-barra i.fatto::after{transform:none}

/* D: taccuino, righe che si scrivono */
.caricamento[data-variante=D] .car-riga{display:none}
.car-taccuino{list-style:none;margin:6px 0 0;padding:14px 18px;width:min(380px,86vw);background:var(--c-solid);border:1px solid var(--c-line);border-radius:18px;box-shadow:0 1px 2px rgba(14,20,17,.06),0 6px 18px rgba(14,20,17,.05);text-align:left}
.car-taccuino li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:30px;font-size:15px;line-height:1.4;visibility:hidden}
.car-taccuino li.vis{visibility:visible}
.car-taccuino .s{flex:none;font-size:13px;color:var(--c-mu);font-variant-numeric:tabular-nums}
.car-taccuino .s.ok{color:var(--c-ok);font-weight:600}

/* E: golfo, la mappa vera sotto e una scheda piccola in basso */
.caricamento[data-variante=E]{place-items:end center}
.caricamento[data-variante=E].base-pronta{background:transparent}
.caricamento[data-variante=E] .car-centro{flex-direction:row;gap:12px;margin:0 16px calc(32px + env(safe-area-inset-bottom));padding:12px 18px 12px 12px;background:var(--c-solid);border:1px solid var(--c-line);border-radius:18px;box-shadow:0 1px 2px rgba(14,20,17,.08),0 8px 24px rgba(14,20,17,.10);text-align:left}
.caricamento[data-variante=E] .car-marchio{width:40px;height:40px}
.caricamento[data-variante=E] .car-scena{display:none}
.caricamento[data-variante=E] .car-testi{display:flex;flex-direction:column;gap:2px}
.caricamento[data-variante=E] .car-nome{font-size:16px}
.caricamento[data-variante=E] .car-riga{font-size:14px;min-height:20px}
.car-testi{display:contents}
.car-nome{order:1}.car-scena{order:2}.car-riga{order:3}

@media (prefers-reduced-motion:reduce){.caricamento *,.caricamento *::before,.caricamento *::after{animation:none!important;transition:none!important}
  .car-costa-linea{stroke-dashoffset:0}.car-costa.disegna .car-costa-fondo{opacity:.7}
  .car-marchio-grande.compone>svg>rect,.car-marchio-grande.compone .rv path{opacity:1}}