/* =====================================================================
   RIFINITURA, IN ANTEPRIMA (08/10/2026)
   ---------------------------------------------------------------------
   L'utente: «se puoi rimettere mano sul css», poi «tutto migliora
   ulteriormente poi valuto se integrare». Il server collega questo
   foglio solo a chi ha il cookie bl_rifinitura (/anteprima-rifinitura,
   ?spegni=1 lo toglie): vedi rifinitura_anteprima() in app/seo.php.

   Cosa ha trovato il censimento di style.css e veste.css:
   1. 151 regole :hover e NESSUNA dietro (hover: hover). Sul telefono il
      tocco «accende» l'hover e lo lascia acceso: schede sollevate di 3-4
      px finche' non si tocca altrove.
   2. Tessere di soli numeri (.ph-chip, .rm-stat, .bl-stat) che si
      sollevano al passaggio del mouse anche quando non sono link: sembrano
      bottoni e non fanno niente.
   3. Due soli :active in tutto il sito: premere un bottone o una
      linguetta non dava nessun segno di essere stato sentito.
   4. Il bordo al passaggio del mouse e' il VERDE dello stato: sul sito il
      verde vuol dire «in orario» (design system), non «puoi cliccare».
   5. La curva dei movimenti (.22,.61,.36,1) e' morbida e un po' molle;
      una ease-out piu' decisa da' risposta subito.
   Piu' i dettagli che non si notano: lampo grigio del tocco su Android e
   iOS, titoli che vanno a capo lasciando una parola sola, selezione del
   testo nel colore del marchio, la barra in alto senza margine ai lati.
   ===================================================================== */

:root {
    /* 5. ease-out forte: parte subito, si posa morbida */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease: var(--ease-out);
}

/* Il lampo grigio che Android e iOS mettono sopra ogni cosa toccata: il
   sito ha gia' i suoi stati (premuto, fuoco), il lampo li copre. */
html { -webkit-tap-highlight-color: transparent; }

/* Titoli senza una parola sola sull'ultima riga, paragrafi senza orfane. */
html :is(h1, h2, h3) { text-wrap: balance; }
html main p { text-wrap: pretty; }

/* La selezione del testo nel blu del marchio, non nel blu di sistema. */
html ::selection { background: rgba(var(--rm-rail-rgb), .3); }

/* La barra in alto senza margine ai lati: `.rm-nav-row { padding: 12px 0 }`
   azzerava anche i lati, e sul telefono il marchio partiva dal bordo
   dello schermo (0 px contro i 12 del testo della pagina). */
html .rm-nav-row { padding-left: var(--gutter, 12px); padding-right: var(--gutter, 12px); }

/* 2. LE TESSERE DI NUMERI NON SI SOLLEVANO se non portano da nessuna
   parte: un movimento al passaggio del mouse promette un clic. */
html :is(.ph-chip, .rm-stat, .bl-stat):not(a):hover {
    transform: none;
    box-shadow: none;
}

/* 4. IL BORDO DEL PASSAGGIO E' BLU, il colore dei link e della rotaia.
   Il verde resta allo stato del treno. */
html :is(.rm-evi-card, .bl-coll-es, .rm-sres-station, .bl-chip, .bl-pillar,
         .rm-card, .bl-route-card, .rm-mt-row, .rm-chip-guess, .bl-miei-card,
         .rm-news-chip):hover,
html :is(.ph-chip, .rm-stat, .bl-stat):is(a):hover {
    border-color: rgba(var(--rm-rail-rgb), .55);
}

/* Sollevamenti piu' corti: 3-4 px su una scheda intera sono un salto. */
html :is(.rm-card, .bl-pillar, .bl-route-card, .bl-tdg, .rm-evi-card):hover,
html :is(.bl-stat, .rm-stat):is(a):hover {
    transform: translateY(-1px);
}

/* 1. SUL TELEFONO NIENTE SOLLEVAMENTO DA HOVER: il tocco lo lasciava
   acceso. La risposta al dito la da' :active, qui sotto. */
@media (hover: none) {
    html :is(.rm-btn, .btn, .rm-card, .card, .rm-evi-card, .bl-viaggio, .bl-coll-es,
             .rm-sres-station, .bl-chip, .bl-stat, .bl-pillar, .bl-tdg, .rm-mt-row,
             .ph-chip, .rm-stat, .bl-route-card, .bl-route-hlcard, .rm-chip-guess,
             .rm-chip-stake):hover {
        transform: none;
        box-shadow: none;
    }
}

/* 3. PREMERE SI SENTE. Scala appena sotto l'1, subito (100-160 ms): la
   pagina fa capire di aver ricevuto il tocco prima di cambiare. */
html :is(.rm-btn, .btn, .rm-tema, .rm-burger, .rm-bs-tab, .rm-chip-guess, .rm-chip-stake,
         .bl-chip, .bl-salva, .bl-avvisa, main a.btn-sm, .rm-nav-search button) {
    transition-property: transform, background-color, border-color, color, box-shadow, opacity;
    transition-duration: var(--t-fast, 120ms);
    transition-timing-function: var(--ease-out);
}
html :is(.rm-btn, .btn, .rm-tema, .rm-burger, .rm-bs-tab, .rm-chip-guess, .rm-chip-stake,
         .bl-chip, .bl-salva, .bl-avvisa, main a.btn-sm, .rm-nav-search button):active {
    transform: scale(.97);
}
/* le schede intere scendono meno: una superficie grande che si stringe
   del 3% sembra un difetto */
html :is(.rm-card, .bl-route-card, .rm-evi-card, .bl-pillar, .bl-tdg, .rm-sres-station,
         .bl-coll-es, .bl-viaggio, .rm-mt-row):active {
    transform: scale(.99);
    transition-duration: 80ms;
}

/* Chi chiede meno movimento: niente scale e niente sollevamenti, restano
   i cambi di colore. */
@media (prefers-reduced-motion: reduce) {
    html *:hover, html *:active { transform: none !important; }
}

/* =====================================================================
   ANIMAZIONI (08/10/2026, l'utente: «se vuoi mettere animazioni o
   modifiche sostanziali al css fai pure»). Poche e corte: il sito si
   usa tante volte al giorno, e un'animazione vista cento volte deve
   sparire dietro alla risposta. Nessuna sopra i 220 ms.
   ===================================================================== */

/* LA TENDINA DELLA RICERCA si apriva di colpo (hidden -> visibile). Ora
   scende di 4 px e appare in 160 ms, dal campo verso il basso; si chiude
   subito, senza animazione: chi ha scelto non deve aspettare. */
html .ac-box:not([hidden]) {
    transform-origin: top center;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@starting-style {
    html .ac-box:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.985); }
}

/* IL MENU DEL TELEFONO: stessa entrata, dall'alto. */
@media (max-width: 1100px) {
    html .rm-nav-collapse.is-open {
        transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    }
    @starting-style {
        html .rm-nav-collapse.is-open { opacity: 0; transform: translateY(-6px); }
    }
}

/* IL CAMBIO DI PAGINA. Mentre arriva la pagina nuova quella vecchia si
   attenua appena (oltre alla barra in alto): il clic e' stato sentito.
   La nuova entra con una dissolvenza di 200 ms e 4 px di salita; solo
   opacita' e trasformazione, che non costano niente al browser. Parte da
   META' opacita', non da zero: dove il browser non fa girare le
   animazioni (scheda nascosta, anteprime) la pagina resta leggibile.
   Le barre dei grafici NON crescono: sono dati, e se l'animazione non
   partisse resterebbero schiacciate a dire un numero falso. */
html body.pjax-busy main { opacity: .55; transition: opacity 150ms var(--ease-out); }
html main { animation: bl-pagina-entra 200ms var(--ease-out) both; }
@keyframes bl-pagina-entra {
    from { opacity: .5; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html main { animation: none; }
    html .ac-box:not([hidden]), html .rm-nav-collapse.is-open { transition: none; }
}