/* ═══ TWIP — barra di navigazione mobile ═════════════════════════════════
   Cinque schede fisse in basso (Esplora · Preferiti · Twip · Messaggi ·
   Profilo), stile app: fondo bianco, filo sopra, icone di linea, etichetta
   sotto, scheda attiva in azzurro Twip. Solo sotto i 760px: da lì in su il
   sito ha la sua testata desktop. Iniettata da tabbar.js. ════════════════ */

/* ── il cambio pagina non si deve leggere come un cambio pagina ──────────
   Con la transizione di vista fra documenti il browser tiene sullo schermo
   l'ultimo fotogramma della pagina che esce e lo dissolve su quella che
   entra: niente sbianco, niente salto. La barra ha un nome proprio, quindi
   non partecipa alla dissolvenza e resta ferma mentre il contenuto cambia —
   è lei il punto fermo che fa sembrare tutto una schermata sola. Chi questa
   regola non la conosce la ignora e naviga come sempre. */
@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.tw-tabbar { display: none; }

@media (max-width: 759px) {
  body.tw2, body.has-tabbar {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .tw-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: #fff; border-top: 1px solid var(--hair, rgba(20,18,28,.10));
    padding-bottom: env(safe-area-inset-bottom);
    font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    /* layer proprio: senza, Safari iOS ridisegna la barra in ritardo durante
       lo scorrimento e per un attimo il fondo bianco non c'è */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    /* fuori dalla dissolvenza: la barra è la stessa, non deve rifarsi */
    view-transition-name: tw-tabbar;
  }

  /* Su iPhone il fondo dello schermo non sta fermo: la barra di Safari
     entra e esce e la zona del tasto home resta fuori dal conto, così
     sotto la barra si vedeva scorrere la pagina. Il bianco prosegue oltre
     il suo bordo inferiore: comunque finisca lo schermo, lì sotto è barra. */
  .tw-tabbar::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 220px; background: #fff; pointer-events: none;
  }

  /* [data-tab] alza la specificità sopra "body.tw2 a", che tinge di azzurro
     tutti i collegamenti del sito: qui il colore lo decide la scheda. */
  .tw-tabbar a[data-tab] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; height: 64px; padding: 0 2px; border: 0; background: none;
    font: inherit; color: var(--ink-3, #8B8799); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tw-tabbar a[data-tab]:hover { color: var(--ink-3, #8B8799); }
  .tw-tabbar a[data-tab]:active { opacity: .6; }

  .tw-tabbar svg {
    width: 24px; height: 24px; display: block; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.3,1.2,.4,1);
  }
  .tw-tabbar .tb-l {
    font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .tw-tabbar a[data-tab].on { color: var(--tw-2, #0F90A8); }
  .tw-tabbar a[data-tab].on svg { stroke-width: 1.9; transform: translateY(-1px); }

  /* Il tocco si vede: l'icona si stringe e rimbalza appena oltre la misura
     prima di tornare a posto. Solo l'icona, l'etichetta sta ferma. */
  .tw-tabbar .tb-ico.tb-tap { animation: tbTap .3s cubic-bezier(.34,1.4,.5,1); }
  @keyframes tbTap {
    0%   { transform: scale(1); }
    38%  { transform: scale(.82); }
    70%  { transform: scale(1.09); }
    100% { transform: scale(1); }
  }

  /* Il cuore che arriva dalla scheda salvata: l'icona batte e per un
     attimo si riempie di rosso, poi torna com'era. È l'atterraggio del
     cuore che vola dalla card (account.js). */
  .tw-tabbar .tb-ico.tb-fav { animation: tbFav .72s cubic-bezier(.3,1.3,.5,1); }
  .tw-tabbar .tb-ico.tb-fav svg { fill: #E0245E; stroke: #E0245E; }
  @keyframes tbFav {
    0%   { transform: scale(1); }
    26%  { transform: scale(1.38); }
    58%  { transform: scale(.92); }
    100% { transform: scale(1); }
  }

  /* Il pallino delle novità sopra Messaggi. */
  .tw-tabbar .tb-ico { position: relative; }
  .tw-tabbar .tb-dot::after {
    content: ""; position: absolute; top: -1px; right: -2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #E0245E; border: 1.5px solid #fff;
  }

  /* La barra prezzo della scheda esperienza si appoggia sopra le schede,
     non ci finisce sotto: due strisce impilate, nessuna coperta. */
  .mobar { bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.exp { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
  .exp-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* Quando la chat di Twipper sale dal fondo, la barra le lascia il posto. */
  body:has(#smode.on) .tw-tabbar { display: none; }
  body:has(#smode.on) { padding-bottom: 0; }

  @media (prefers-reduced-motion: reduce) {
    .tw-tabbar svg { transition: none; }
    .tw-tabbar .tb-ico.tb-tap, .tw-tabbar .tb-ico.tb-fav { animation: none; }
  }
}

/* I riquadri sovrapposti di Preferiti e Messaggi non esistono più:
   ora sono pagine vere (Preferiti.html, Messaggi.html). */