/* ==========================================================================
   HOME v2.2 (MOTOWEB-S03): ritocchi del 02/10/2026.
   Si carica dopo casa2.css; non cambia niente delle altre pagine.
   ========================================================================== */

/* 1. il primo riquadro del diario: testo e citazione uno sotto l'altro (sul computer erano sovrapposti) */
.q-intro .cr-lead,.q-intro .cr-citazione{grid-area:auto}
.q-intro{gap:.9rem}

/* 2. le curve di livello dietro al quadro e 3. il grande «1999», come nella prima versione */
.q-palco>.q-testa,.q-palco>.quadro,.q-palco>.cr-comandi{position:relative;z-index:1}
.q-palco .cr-curve{position:absolute;inset:0;z-index:0;background:url("../img/curve-livello.svg") center/cover no-repeat;opacity:.34;transition:opacity 1.2s;pointer-events:none}
.cruscotto[data-stato="acceso"] .q-palco .cr-curve{opacity:.62}
.q-palco .cr-anno{position:absolute;z-index:0;right:-1.5vw;top:4%;font:700 clamp(8rem,30vw,25rem)/.8 var(--f-display);color:transparent;-webkit-text-stroke:1.5px rgba(242,182,27,.2);letter-spacing:-.02em;pointer-events:none;user-select:none;transition:-webkit-text-stroke-color 1.2s}
.cruscotto[data-stato="acceso"] .q-palco .cr-anno{-webkit-text-stroke-color:rgba(242,182,27,.34)}
@media (min-width:1000px) and (max-width:1439px){.q-palco .cr-anno{font-size:clamp(8rem,21vw,19rem);top:auto;bottom:4%}}
@media (max-width:999px){.q-palco .cr-anno{top:auto;bottom:6%;right:-4vw;font-size:clamp(7rem,40vw,16rem)}}

/* 4. accensione: sul display compaiono l'emblema e la scritta, come sulle moto vere */
.tft-avvio{opacity:0;pointer-events:none}
.tft-avvio-fondo{fill:url(#tft-g);stroke:#2c3137;stroke-width:3}
.tft-avvio-alone{fill:rgba(242,182,27,.0)}
.tft-avvio-scritta{fill:#F4EFE3;font:700 27px var(--f-display);letter-spacing:.14em;text-anchor:middle}
.tft-avvio-scritta .rosso{fill:#FF5A36}
.tft-avvio-sotto{fill:#8FB7C9;font:700 15px var(--f-display);letter-spacing:.3em;text-anchor:middle;opacity:0}
.tft-avvio-scritta tspan{opacity:0}
.cruscotto.avvio .tft-avvio{animation:tft-avvio 2.6s ease forwards}
.cruscotto.avvio .tft-avvio-logo{animation:tft-logo 2.6s cubic-bezier(.2,.8,.2,1) forwards}
.cruscotto.avvio .tft-avvio-alone{animation:tft-alone 2.6s ease forwards}
.cruscotto.avvio .tft-avvio-scritta tspan{animation:tft-lettera .22s ease forwards;animation-delay:calc(.75s + var(--i) * .055s)}
.cruscotto.avvio .tft-avvio-sotto{animation:tft-lettera .4s ease 1.75s forwards}
.tft-avvio-logo{transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes tft-avvio{0%{opacity:0}8%{opacity:1}84%{opacity:1}100%{opacity:0}}
@keyframes tft-logo{0%{opacity:0;transform:scale(.4) rotate(-18deg)}28%{opacity:1;transform:scale(1.06) rotate(0)}38%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes tft-alone{0%{fill:rgba(242,182,27,0)}30%{fill:rgba(242,182,27,.28)}100%{fill:rgba(242,182,27,.08)}}
@keyframes tft-lettera{to{opacity:1}}

/* 5. il navigatore al posto dell'elenco A/B/C: un MotoTour vero percorso da una freccia */
.tft-nav{opacity:.18;transition:opacity .6s}
.cruscotto[data-stato="acceso"] .tft-nav{opacity:1}
.tft-nav-fondo{fill:#0a1117;stroke:#22303a;stroke-width:1.5}
.tft-nav-ombra{fill:none;stroke:#1d3646;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.tft-nav-linea{fill:none;stroke:#F2B61B;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tft-nav-fatta{fill:none;stroke:#35D07F;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tft-nav-freccia{fill:#fff;stroke:#0a1117;stroke-width:1.5}
.tft-nav-freccia{visibility:hidden}.tft-nav[data-per] .tft-nav-freccia{visibility:visible}.tft-nav[data-per="nessuno"] .tft-nav-freccia{visibility:hidden}
.tft-nav-lbl{fill:#A9C7D4;font:700 13px var(--f-display);letter-spacing:.08em}
.tft-nav-km{fill:#F2B61B;font:700 13px var(--f-display);letter-spacing:.04em;text-anchor:end}
.tft-nav-lbl,.tft-nav-km{paint-order:stroke;stroke:#0a1117;stroke-width:4px}
@media (max-width:640px){.tft-nav-lbl,.tft-nav-km{font-size:19px}}

/* la marcia: N da fermi, poi sale scorrendo il diario */
.tft-marcia{transition:fill .4s}

/* 6. l'emblema si vede anche aprendo il file dal disco (la sagoma e' dentro il foglio di stile) */
.sagoma img:not(.timbro){-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNTAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCA3MCBDNDAgNDAgNzAgNTggMTAwIDQ0IEMxMzAgMzAgMTUwIDYgMTkwIDEyIEMyMzAgMTggMjUwIDQ4IDI5MCA0MCBDMzI1IDMzIDM1MCAxMCA0MDAgMjIgTDQwMCA0MzAgQzM2MCA0NzAgMzAwIDQ4OCAyMzAgNDcwIEMxNzAgNDU1IDEzMCA1MDAgNzAgNDkyIEM0MCA0ODggMTggNDc2IDAgNDYyIFoiLz48L3N2Zz4K") center/contain no-repeat;mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNTAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCA3MCBDNDAgNDAgNzAgNTggMTAwIDQ0IEMxMzAgMzAgMTUwIDYgMTkwIDEyIEMyMzAgMTggMjUwIDQ4IDI5MCA0MCBDMzI1IDMzIDM1MCAxMCA0MDAgMjIgTDQwMCA0MzAgQzM2MCA0NzAgMzAwIDQ4OCAyMzAgNDcwIEMxNzAgNDU1IDEzMCA1MDAgNzAgNDkyIEM0MCA0ODggMTggNDc2IDAgNDYyIFoiLz48L3N2Zz4K") center/contain no-repeat}
.sagoma img.timbro{-webkit-mask:none;mask:none} /* l'emblema rotondo non va ritagliato: da disco il ritaglio lo faceva sparire */

/* 7. notturna: le citazioni d'autore sulle citta' e il loro rimando alla fonte */
.n-cit .verso{display:block}
.n-cit cite a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:.8em;margin-left:.4em}
.n-citta{font:700 .82rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--mezzeria);margin:0 0 .7rem;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.n-giri .n-numeri{display:flex;flex-wrap:wrap;gap:.5rem}
.n-giri .n-numeri span{background:rgba(242,182,27,.12);border:1px solid rgba(242,182,27,.35);border-radius:6px;padding:.35rem .6rem;font:700 .95rem/1 var(--f-display);letter-spacing:.06em;color:#F4EFE3}
.n-giri .n-numeri b{color:var(--mezzeria);font-size:1.2rem}

/* 8. la prima scheda della notturna: immagine sopra e testo sotto;
      l'emblema e' un cerchio vero (prima prendeva la forma 4:5 della foto e usciva ovale) e si vede anche sul telefono */
.n-emblema{grid-template-columns:1fr;gap:0}
.n-emblema .sagoma{max-width:13rem;margin:0 auto 2.4rem}
.n-emblema .sagoma .timbro{display:block;width:48%;max-width:none;aspect-ratio:1/1;height:auto;object-fit:contain;left:auto;right:-1.6rem;bottom:-1.6rem;border:3px solid var(--mezzeria);box-shadow:0 0 0 6px rgba(242,182,27,.16),0 14px 34px rgba(0,0,0,.55)}
@media (max-width:899px){.n-emblema{grid-template-columns:1fr}.n-emblema .sagoma{max-width:9rem;margin-bottom:1.8rem}.n-emblema .sagoma .timbro{right:-1.2rem;bottom:-1.1rem}}
@media (min-width:900px) and (max-height:860px){.n-emblema .sagoma{max-width:9.5rem;margin-bottom:2rem}}   /* portatili bassi: la scheda sta tutta nello schermo */

/* 9. garage: tolta la scheda RED LIVE, gli articoli stanno su tre colonne senza buchi */
@media (min-width:1000px){.t-blog .articoli{grid-template-columns:repeat(3,minmax(0,1fr))}}