/* ════════════════════════════════════════════════════════════════════
   LDS SUISSE TAXI SERVICE SAGL — sistema visivo condiviso
   Usato da tutte le pagine del sito. Modificare qui cambia ovunque.

   Concetto: sala partenze notturna. Il mestiere e' spostare persone su
   tratte precise a orari precisi, quindi la pagina si comporta come un
   tabellone: dati in monospaziato, tratte in righe, capienze in cifre.
   Il lusso lo portano le fotografie, non gli ornamenti.

   Palette dal soggetto, non da un campionario: nero garage con dominante
   fredda, ambra dei fari (non oro da invito di nozze), verde della
   segnaletica autostradale svizzera solo per lo stato "disponibile".
   ════════════════════════════════════════════════════════════════════ */

:root{
  --void:#0A0C0D; --coal:#101416; --smoke:#181E21; --line:#252D31;
  --bone:#ECE7DF; --bone-dim:#A9A49C; --bone-faint:#7E7F7C;
  --amber:#C8842F; --amber-lit:#E9AC53; --sign:#3E9B72;
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --shell:min(1240px,100% - 2.5rem);
  --narrow:min(760px,100% - 2.5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);color:var(--bone);
  font-family:var(--display);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--void)}
:focus-visible{outline:2px solid var(--amber-lit);outline-offset:3px}

.shell{width:var(--shell);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.eyebrow{display:flex;align-items:center;gap:.75rem}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--amber);flex:0 0 34px}

/* ── Barra ───────────────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem clamp(1.25rem,3vw,2.25rem);
  background:linear-gradient(to bottom,rgba(10,12,13,.92),rgba(10,12,13,0));
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.top.stuck{background:rgba(10,12,13,.94);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.top.solid{background:rgba(10,12,13,.94);border-bottom-color:var(--line)}
.brand{font-weight:800;letter-spacing:-.02em;font-size:15px;line-height:1.1;white-space:nowrap}
.brand small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--amber);font-weight:400}
.top nav{margin-left:auto;display:flex;gap:1.75rem}
.top nav a{font-size:13px;font-weight:500;color:var(--bone-dim);transition:color .2s}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--bone)}
.langs{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.langs button{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:.4rem .55rem;background:none;border:0;color:var(--bone-faint);cursor:pointer;transition:all .2s;
}
.langs button[aria-pressed="true"]{background:var(--bone);color:var(--void)}
.call{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  padding:.6rem 1rem;border:1px solid var(--amber);color:var(--amber-lit);
  border-radius:2px;transition:all .25s;white-space:nowrap;
}
.call:hover{background:var(--amber);color:var(--void)}
@media(max-width:980px){.top nav{display:none}}
@media(max-width:560px){.call span{display:none}}

/* ── Comandi ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.6rem;border-radius:2px;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.btn-fill{background:var(--amber);color:var(--void);font-weight:500}
.btn-fill:hover{background:var(--amber-lit);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(200,132,47,.8)}
.btn-line{border:1px solid var(--line);color:var(--bone)}
.btn-line:hover{border-color:var(--bone);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ── Apertura (home) ─────────────────────────────────────────────── */
.open{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(2.5rem,7vh,5rem);overflow:hidden}
.open-img{position:absolute;inset:0;z-index:-2}
.open-img img{width:100%;height:100%;object-fit:cover;object-position:58% 30%;filter:contrast(1.08) saturate(.95)}
.open-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,12,13,.86) 0%,rgba(10,12,13,.24) 34%,rgba(10,12,13,.72) 74%,var(--void) 100%),
    linear-gradient(96deg,rgba(10,12,13,.9) 0%,rgba(10,12,13,.42) 52%,transparent 82%);
}
.open .shell{position:relative;z-index:1}
.open h1{
  font-size:clamp(2.6rem,7.6vw,6.1rem);font-weight:800;
  letter-spacing:-.045em;line-height:.94;text-wrap:balance;max-width:15ch;
  margin:1.25rem 0 1.5rem;
}
.open h1 em{font-style:normal;color:var(--amber-lit)}
.open p.lead{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--bone-dim);max-width:46ch;line-height:1.55}
.assure{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--bone-dim)}
.assure span{display:flex;align-items:center;gap:.45rem}
.assure span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--sign);flex:0 0 5px}

/* ── Testata pagina interna ──────────────────────────────────────── */
.phead{position:relative;padding:clamp(8rem,17vh,11rem) 0 clamp(3rem,7vh,5rem);overflow:hidden;border-bottom:1px solid var(--line)}
.phead-img{position:absolute;inset:0;z-index:-2}
.phead-img img{width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:contrast(1.06)}
.phead-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(10,12,13,.95) 0%,rgba(10,12,13,.8) 46%,rgba(10,12,13,.55) 100%),linear-gradient(180deg,rgba(10,12,13,.8),rgba(10,12,13,.35) 50%,var(--void))}
.phead h1{font-size:clamp(2.1rem,5.4vw,3.9rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:1rem 0 1rem;max-width:19ch;text-wrap:balance}
.phead h1 em{font-style:normal;color:var(--amber-lit)}
.phead p{color:var(--bone-dim);max-width:52ch;font-size:1.05rem}
.crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint)}
.crumbs a:hover{color:var(--amber-lit)}

/* ── Fascia dati ─────────────────────────────────────────────────── */
.strip{border-block:1px solid var(--line);background:var(--coal)}
.strip .shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{padding:1.75rem .5rem;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .mono{margin-top:.4rem;display:block}

/* ── Sezioni ─────────────────────────────────────────────────────── */
section{padding:clamp(4rem,10vh,7.5rem) 0;position:relative}
section[id]{scroll-margin-top:88px}
.alt{background:var(--coal);border-block:1px solid var(--line)}
.head{margin-bottom:3rem;max-width:62ch}
.head h2{font-size:clamp(1.8rem,4.2vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:.9rem 0;text-wrap:balance}
.head h2 em{font-style:normal;color:var(--amber-lit)}
.head p{color:var(--bone-dim);max-width:52ch}

/* ── Corpo redazionale ───────────────────────────────────────────── */
.prose h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:700;letter-spacing:-.025em;margin:2.75rem 0 1rem;text-wrap:balance}
.prose h3{font-size:1.15rem;font-weight:600;margin:2rem 0 .6rem;letter-spacing:-.015em}
.prose p{margin-bottom:1.1rem;color:var(--bone-dim);max-width:68ch}
.prose ul{margin:0 0 1.4rem 0;padding-left:0;list-style:none;max-width:68ch}
.prose li{color:var(--bone-dim);padding-left:1.4rem;position:relative;margin-bottom:.5rem}
.prose li::before{content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--amber)}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--amber-lit);border-bottom:1px solid rgba(233,172,83,.35)}
.prose a:hover{border-bottom-color:var(--amber-lit)}

/* ── Tabellone tratte ────────────────────────────────────────────── */
.board{border-top:1px solid var(--line)}
.route{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.25rem;
  padding:1.15rem .5rem;border-bottom:1px solid var(--line);
  transition:background .3s,padding-left .3s;
}
.route:hover{background:var(--coal);padding-left:1.1rem}
.route .code{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.1em}
.route .to{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600;letter-spacing:-.02em}
.route .to i{font-style:normal;color:var(--bone-faint);font-weight:400}
.route .dur{font-family:var(--mono);font-size:12px;color:var(--bone-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.route .go{font-family:var(--mono);font-size:11px;color:var(--bone-faint);transition:color .25s,transform .25s;white-space:nowrap}
.route:hover .go{color:var(--amber-lit);transform:translateX(4px)}
@media(max-width:720px){
  .route{grid-template-columns:auto 1fr;gap:.4rem 1rem}
  .route .dur{grid-column:2;font-size:11px}
  .route .go{display:none}
}
.board-note{margin-top:1.5rem;font-size:14px;color:var(--bone-dim);max-width:58ch}

/* ── Flotta ──────────────────────────────────────────────────────── */
.fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.veh{background:var(--coal);position:relative;overflow:hidden;--mx:50%;--my:50%}
.veh::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(200,132,47,.14),transparent 66%);
}
@media(hover:hover){.veh:hover::after{opacity:1}}
.veh-img{aspect-ratio:4/3;overflow:hidden;background:var(--smoke)}
.veh-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.veh:hover .veh-img img{transform:scale(1.06)}}
.veh-body{padding:1.4rem 1.35rem 1.6rem;position:relative;z-index:1}
.veh .seats{
  display:inline-flex;align-items:baseline;gap:.35rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--amber-lit);
  border:1px solid rgba(200,132,47,.4);padding:.25rem .55rem;border-radius:2px;
}
.veh .seats b{font-size:15px;font-weight:500}
.veh h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:.8rem 0 .3rem}
.veh .kind{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--bone-faint)}
.veh ul{list-style:none;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.35rem}
.veh li{font-size:11.5px;color:var(--bone-dim);border:1px solid var(--line);padding:.22rem .5rem;border-radius:2px}

/* ── Passaggi ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:2rem}
.step{border-top:2px solid var(--amber);padding-top:1.2rem}
.step .n{font-family:var(--mono);font-size:11px;color:var(--amber-lit);letter-spacing:.16em}
.step h3{font-size:1.15rem;font-weight:600;margin:.6rem 0 .5rem;letter-spacing:-.02em}
.step p{font-size:14.5px;color:var(--bone-dim);line-height:1.6}

/* ── Riquadri ────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--coal);padding:1.6rem 1.5rem;position:relative;--mx:50%;--my:50%;overflow:hidden}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(200,132,47,.12),transparent 66%)}
@media(hover:hover){.card:hover::after{opacity:1}}
.card h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .5rem;position:relative;z-index:1}
.card p{font-size:14.5px;color:var(--bone-dim);position:relative;z-index:1}

/* ── Domande ─────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.35rem .25rem;
  font-size:clamp(1rem,1.7vw,1.12rem);font-weight:600;letter-spacing:-.015em;
  display:flex;align-items:center;gap:1rem;transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;font-family:var(--mono);color:var(--amber-lit);font-size:1.2rem;transition:transform .3s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--amber-lit)}
.faq .ans{padding:0 .25rem 1.5rem;color:var(--bone-dim);max-width:68ch;line-height:1.7}
.faq .ans p+p{margin-top:.9rem}

/* ── Richiamo ────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line);background:var(--coal);padding:clamp(1.6rem,4vw,2.6rem);border-radius:3px}
.callout h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;letter-spacing:-.03em;margin-bottom:.7rem;text-wrap:balance}
.callout h2 em{font-style:normal;color:var(--amber-lit)}
.callout p{color:var(--bone-dim);max-width:54ch}

/* ── Contatto ────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem}
.cbox .mono{display:block;margin-bottom:.5rem}
.cbox a,.cbox p{font-size:1.02rem;font-weight:500;letter-spacing:-.01em;line-height:1.5}
.cbox a:hover{color:var(--amber-lit)}
.cbox address{font-style:normal;font-size:.95rem;color:var(--bone-dim);line-height:1.6;font-weight:400}

/* ── Piede ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:2.5rem 0;background:var(--void)}
footer .shell{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;font-size:12.5px;color:var(--bone-faint)}
footer a{color:var(--bone-dim)}
footer a:hover{color:var(--bone)}
footer .sep{margin-left:auto}
@media(max-width:640px){footer .sep{margin-left:0}}

/* ── Dock mobile ─────────────────────────────────────────────────── */
.dock{display:none}
@media(max-width:767px){
  .dock{
    display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(10,12,13,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    transform:translateY(120%);transition:transform .3s ease;
  }
  .dock.on{transform:none}
  .dock .btn{flex:1;min-height:48px;padding:.8rem .5rem;font-size:11px}
  body{padding-bottom:0}
}

/* ── Rivelazione ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.seen{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Assistente di pagina ────────────────────────────────────────────
   Il pannello sta sopra al dock mobile e sotto agli overlay. Su schermo
   stretto occupa quasi tutta la larghezza: una finestrella da 320px su
   telefono e' inutilizzabile. */
.ldschat{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
@media(max-width:767px){.ldschat{bottom:84px;right:12px}}

.lc-trigger{
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(200,132,47,.5);
  background:var(--amber);color:var(--void);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -10px rgba(200,132,47,.75);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .25s;order:2;
}
.lc-trigger:hover{transform:scale(1.06);background:var(--amber-lit)}
.lc-trigger .ico{width:23px;height:23px}
.lc-trigger .lc-x{display:none;font-size:26px;line-height:1;font-weight:300}
.ldschat.lc-open .lc-trigger .lc-i-open{display:none}
.ldschat.lc-open .lc-trigger .lc-x{display:block}

/* [hidden] vale solo finche' l'autore non dichiara un display:
   senza questa riga il pannello resta sempre aperto. */
.lc-panel[hidden]{display:none!important}
.lc-panel{
  order:1;width:min(384px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--coal);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  animation:lcIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes lcIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lc-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line);background:var(--smoke)}
.lc-title{font-weight:700;font-size:15px;letter-spacing:-.01em}
.lc-sub{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--sign);margin-top:.15rem}
.lc-close{margin-left:auto;background:none;border:0;color:var(--bone-faint);font-size:24px;line-height:1;cursor:pointer;padding:0 .2rem}
.lc-close:hover{color:var(--bone)}

.lc-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;scrollbar-width:thin}
.lc-msg{font-size:14px;line-height:1.6;padding:.75rem .95rem;border-radius:4px;max-width:86%;word-wrap:break-word}
.lc-bot{background:var(--smoke);border:1px solid var(--line);color:var(--bone-dim);align-self:flex-start}
.lc-bot b{color:var(--bone)}
.lc-bot a{color:var(--amber-lit);border-bottom:1px solid rgba(233,172,83,.4)}
.lc-me{background:var(--amber);color:var(--void);align-self:flex-end;font-weight:500}
.lc-typing{display:flex;gap:5px;align-items:center;padding:.9rem}
.lc-typing span{width:6px;height:6px;border-radius:50%;background:var(--bone-faint);animation:lcDot 1.2s infinite}
.lc-typing span:nth-child(2){animation-delay:.16s}
.lc-typing span:nth-child(3){animation-delay:.32s}
@keyframes lcDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.lc-jump{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1rem;background:var(--amber);color:var(--void);border-radius:3px;font-weight:500}
.lc-jump:hover{background:var(--amber-lit)}

.lc-chips{display:flex;gap:.4rem;padding:0 1.1rem .8rem;flex-wrap:wrap}
.lc-chip{
  font-size:12px;padding:.45rem .7rem;border:1px solid var(--line);background:none;
  color:var(--bone-dim);border-radius:99px;cursor:pointer;transition:all .2s;font-family:var(--display);
}
.lc-chip:hover{border-color:var(--amber);color:var(--amber-lit)}

.lc-form{display:flex;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--line);align-items:flex-end}
.lc-in{
  flex:1;background:var(--void);border:1px solid var(--line);border-radius:4px;color:var(--bone);
  font-family:var(--display);font-size:14px;padding:.7rem .8rem;resize:none;line-height:1.5;
  max-height:110px;transition:border-color .2s;
}
.lc-in:focus{outline:none;border-color:var(--amber)}
.lc-send{
  width:40px;height:40px;flex:0 0 40px;border:0;border-radius:4px;background:var(--amber);
  color:var(--void);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.lc-send:hover{background:var(--amber-lit)}
.lc-wa{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem;border-top:1px solid var(--line);background:var(--smoke);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--bone-dim);
}
.lc-wa:hover{color:var(--sign)}

@media(prefers-reduced-motion:reduce){.lc-panel{animation:none}.lc-typing span{animation:none}}

/* ── MOVIMENTO ───────────────────────────────────────────────────────
   Gli stati di partenza vivono sotto .motion: se il JavaScript non parte
   la pagina resta visibile e leggibile invece di restare invisibile in
   attesa di un'animazione che non arrivera' mai. */

/* Tela della strada notturna, sopra la foto e sotto il testo. */
/* width/height espliciti: <canvas> e' un elemento sostituito e con
   il solo inset:0 resta alla dimensione intrinseca di 300x150,
   diversamente da un div. */
.road{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:1}

/* Titoli: le parole salgono da sotto una maschera. */
.motion .open h1 .w,
.motion .phead h1 .w,
.motion .head h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.motion .open h1 .w > i,
.motion .phead h1 .w > i,
.motion .head h2 .w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .82s cubic-bezier(.16,1,.3,1),opacity .82s ease;
}
.motion .open h1.lit .w > i,
.motion .phead h1.lit .w > i,
.motion .head h2.lit .w > i{transform:none;opacity:1}

/* Righe del tabellone: entrano da sinistra, una dopo l'altra. */
.motion .route{opacity:0;transform:translateX(-22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),background .3s,padding-left .3s}
.motion .route.lit{opacity:1;transform:none}
/* La riga si accende da sinistra al passaggio: una scia, non un colore. */
.motion .route::before{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.motion .route{position:relative}
@media(hover:hover){.motion .route:hover::before{transform:scaleX(1)}}

/* Schede: entrano e reagiscono all'inclinazione. */
.motion .veh,.motion .step,.motion .card{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .4s;
  transform-style:preserve-3d;will-change:transform;
}
.motion .veh.lit,.motion .step.lit,.motion .card.lit{opacity:1;transform:none}
@media(hover:hover){
  .motion .veh:hover,.motion .card:hover{box-shadow:0 26px 60px -26px rgba(0,0,0,.9)}
}

/* Cifre: monospaziate in larghezza cosi' il conteggio non fa saltare
   il testo accanto a ogni fotogramma. */
.motion .stat b{font-variant-numeric:tabular-nums}

/* Comandi magnetici: la transizione riguarda solo il ritorno a riposo,
   perche' durante l'inseguimento il valore lo scrive il JavaScript. */
.motion .btn-fill,.motion .lc-trigger{transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .25s}

/* Avanzamento di lettura, in cima. */
.lds-prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:linear-gradient(90deg,var(--amber),var(--amber-lit));
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* Senza movimento resta tutto fermo e visibile. */
.no-motion .road{display:none}
@media(prefers-reduced-motion:reduce){
  .road{display:none}
  .lds-prog{display:none}
}

/* qualita:inizio */

/* Il salto al contenuto. Invisibile finche' non riceve il fuoco: chi
   naviga da tastiera lo trova come prima cosa, tutti gli altri non lo
   vedono mai. Non si usa display:none — toglierebbe l'elemento anche
   dall'ordine di tabulazione, cioe' esattamente il contrario. */
.salta{
  position:absolute;left:.5rem;top:.5rem;z-index:9999;
  transform:translateY(-160%);
  padding:.7rem 1.1rem;
  background:var(--ink,#1A1A18);color:var(--cream,#F3EFE8);
  font:400 14px/1 var(--sans,system-ui,sans-serif);
  text-decoration:none;border-radius:2px;
  transition:transform .15s ease-out;
}
.salta:focus{transform:none}
.salta:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.salta{transition:none}}

/* Il sito e' deliberatamente chiaro. Senza questa riga, in modalita'
   scura forzata il browser dipinge di scuro i controlli nativi. */
:root{color-scheme:light}

@media(max-width:720px){
  /* Il secondo piede, quello delle pagine transfer-*. Stessa ragione. */
  .shell{font-size:14px}
}
/* qualita:fine */