/* ==========================================================================
   Schede che rispondono al cursore e al dito (kit card-hover-8-10, CEO 8/10:
   «su queste card fai effetto hover da PC e mobile, dove se vai su si muovono,
   poi assicurati che tutte le pagine facciano»).

   Un solo gesto per tutto il sito:
   - computer (mouse): la scheda sale di 4 px, prende un'ombra leggera e un
     velo di colore; l'icona Lava fa un piccolo salto storto. 220 ms, curva
     del sito. Premuta col mouse scende di 2 px e si stringe appena.
   - tastiera: le schede cliccabili hanno l'anello di fuoco e salgono uguale.
   - telefono: le schede si stringono al tocco e tornano con la
     molla (classe dal JS, dopo 90 ms fermi come tbp-interaction-motion: niente
     saltello mentre si scorre). Le schede sotto la piega entrano salendo una
     volta sola (solo con JS, solo col dito, mai con «riduci movimento»).
   - «riduci movimento»: niente spostamenti, restano ombra e colore.

   Regole del movimento (tbp-tokens.css): si animano solo transform, le
   proprieta' singole (translate/rotate/scale) e opacity; colori in «breve».
   La scheda sale con transform e si preme con scale: cosi' si somma al
   premuto di tbp-interaction-motion (che usa scale/translate) invece di
   litigarci. Niente bordi colorati di accento, niente spostamento della
   pagina (transform non cambia l'impaginazione). Mappa esclusa.
   ========================================================================== */

:root {
  --tbp-cm-durata: 220ms;
  --tbp-cm-curva: var(--tbp-moto-curva, cubic-bezier(.22, 1, .36, 1));
  --tbp-cm-molla: var(--tbp-moto-molla, cubic-bezier(.28, 1.6, .36, 1));
  --tbp-cm-sale: -4px;
  --tbp-cm-ombra: 0 14px 28px -12px rgba(8, 72, 40, .30), 0 2px 6px rgba(8, 72, 40, .08);
  --tbp-cm-velo: rgba(8, 72, 40, .035);
  --tbp-cm-anello: #084828;
}
html[data-tbp-theme="dark"] {
  --tbp-cm-ombra: 0 14px 28px -10px rgba(0, 0, 0, .60), 0 2px 6px rgba(0, 0, 0, .35);
  --tbp-cm-velo: rgba(255, 255, 255, .045);
  --tbp-cm-anello: #9BDBB5;
}

/* --------------------------------------------------------------------------
   1. A riposo: solo le transizioni. Nessuna regola qui cambia come appare
      una scheda ferma (controllo pixel per pixel a 390 e 1440).
   -------------------------------------------------------------------------- */

/* Schede piene (fondo o bordo): salgono, ombra e velo. */
html body .tbp-az .tbp-az__offerta,
html body #tbp-car li.tbp-car__voce.tbp-car__voce,
html body #tbp-car li.tbp-car__percorso.tbp-car__percorso,
html body .tbp-ver .tbp-ver__schede .tbp-ver__voce,
html body .tbp-ver .tbp-ver__lato,
html body a.tbp-ep-attesa__voce,
html body li.tbp-ep-evento,
html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera,
html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale,
/* Schede con la foto: salgono e prendono l'ombra; la foto dentro si avvicina. */
html body a.tbp-ep-tessera,
/* Schede aperte (senza fondo): sale tutta la scheda, senza ombra. */
html body article.tbp-ep-trad__voce,
/* Schede in cui sale la parte disegnata (foto, tondo, targa del logo). */
html body a.tbp-ep-esp .tbp-ep-esp__foto,
html body a.tbp-ep-persona .tbp-ep-persona__volto,
html body #tbp-il-progetto a.tbp-pr__logo .tbp-pr__targa.tbp-pr__targa {
  transition:
    transform var(--tbp-cm-durata) var(--tbp-cm-curva),
    scale var(--tbp-cm-durata) var(--tbp-cm-curva),
    box-shadow var(--tbp-cm-durata) var(--tbp-cm-curva),
    background-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva),
    border-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva) !important;
}

/* Schede del catalogo (Il feed, Cerca, Catalogo): l'ombra era gia' loro
   (tbp-ui-cleanup.css), qui si aggiunge solo la salita. */
html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card.tbp-exp-card {
  transition:
    transform var(--tbp-cm-durata) var(--tbp-cm-curva),
    box-shadow .16s ease !important;
}

/* Volti di chi insegna: il loro foglio vieta transform e transizioni sul
   bottone (tbp-volti.css), quindi qui sale con la proprieta' singola translate. */
html body .tbp-volti-pagina .tbp-volto.tbp-volto {
  transition: translate var(--tbp-cm-durata) var(--tbp-cm-curva) !important;
}

/* Foto dentro le schede che hanno il bordo che taglia (overflow hidden). */
html body a.tbp-ep-tessera > img,
html body a.tbp-ep-esp .tbp-ep-esp__foto img,
html body a.tbp-ep-persona .tbp-ep-persona__volto img {
  transition: opacity 1s, scale 380ms var(--tbp-cm-curva);
}

/* Icone Lava (e la cornice delle icone di Verificati e Hobbisti, il distintivo
   tondo dei Servizi). L'opacita' resta quella della comparsa delle immagini. */
html body :is(.tbp-az__offerta, .tbp-az__noi-lista > li, .tbp-ver__voce, .tbp-ver__lato li, .tbp-ver__passo, .tbp-faq__tessera, .tbp-faq__canale, .tbp-pr__ruolo, .tbp-pr__tipo, .tbp-hub__sezione) :is(img.tbp-lava-icon, .tbp-ver__icona, .tbp-hub__distintivo) {
  transition:
    opacity 1s,
    translate var(--tbp-cm-durata) var(--tbp-cm-curva),
    rotate var(--tbp-cm-durata) var(--tbp-cm-curva),
    scale var(--tbp-cm-durata) var(--tbp-cm-curva);
}

/* --------------------------------------------------------------------------
   2. Computer: il cursore sopra la scheda.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

  /* Colore: vale anche con «riduci movimento». */
  html body .tbp-az .tbp-az__offerta:hover,
  html body #tbp-car li.tbp-car__voce.tbp-car__voce:hover,
  html body #tbp-car li.tbp-car__percorso.tbp-car__percorso:hover,
  html body .tbp-ver .tbp-ver__schede .tbp-ver__voce:hover,
  html body .tbp-ver .tbp-ver__lato:hover,
  html body a.tbp-ep-attesa__voce:hover,
  html body li.tbp-ep-evento:hover {
    background-image: linear-gradient(var(--tbp-cm-velo), var(--tbp-cm-velo));
    box-shadow: var(--tbp-cm-ombra);
  }
  html body a.tbp-ep-tessera:hover,
  html body a.tbp-ep-esp:hover .tbp-ep-esp__foto,
  html body a.tbp-ep-persona:hover .tbp-ep-persona__volto,
  html body #tbp-il-progetto a.tbp-pr__logo:hover .tbp-pr__targa.tbp-pr__targa {
    box-shadow: var(--tbp-cm-ombra);
  }
  /* FAQ: si tiene il filo interno che il foglio delle domande da' al passaggio. */
  html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera:hover,
  html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale:hover {
    background-image: linear-gradient(var(--tbp-cm-velo), var(--tbp-cm-velo));
    box-shadow: inset 0 0 0 1px var(--fq-anello, rgba(8, 72, 40, .3)), var(--tbp-cm-ombra) !important;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* La scheda sale. */
  html body .tbp-az .tbp-az__offerta:hover,
  html body #tbp-car li.tbp-car__voce.tbp-car__voce:hover,
  html body #tbp-car li.tbp-car__percorso.tbp-car__percorso:hover,
  html body .tbp-ver .tbp-ver__schede .tbp-ver__voce:hover,
  html body .tbp-ver .tbp-ver__lato:hover,
  html body a.tbp-ep-attesa__voce:hover,
  html body li.tbp-ep-evento:hover,
  html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera:hover,
  html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale:hover,
  html body a.tbp-ep-tessera:hover,
  html body article.tbp-ep-trad__voce:hover,
  html body a.tbp-ep-esp:hover .tbp-ep-esp__foto,
  html body a.tbp-ep-persona:hover .tbp-ep-persona__volto,
  html body #tbp-il-progetto a.tbp-pr__logo:hover .tbp-pr__targa.tbp-pr__targa,
  html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card.tbp-exp-card:hover:not(.is-dragging) {
    transform: translateY(var(--tbp-cm-sale));
  }
  html body .tbp-volti-pagina .tbp-volto.tbp-volto:hover {
    translate: 0 var(--tbp-cm-sale);
  }

  /* Premuta col mouse: scende di 2 px e si stringe appena (solo le cliccabili). */
  html body #tbp-car li.tbp-car__voce.tbp-car__voce:hover:active,
  html body #tbp-car li.tbp-car__percorso.tbp-car__percorso:hover:active,
  html body a.tbp-ep-attesa__voce:hover:active,
  html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera:hover:active,
  html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale:hover:active,
  html body a.tbp-ep-tessera:hover:active,
  html body a.tbp-ep-esp:hover:active .tbp-ep-esp__foto,
  html body a.tbp-ep-persona:hover:active .tbp-ep-persona__volto,
  html body #tbp-il-progetto a.tbp-pr__logo:hover:active .tbp-pr__targa.tbp-pr__targa {
    transform: translateY(-2px);
    scale: .985;
    transition-duration: var(--tbp-moto-tocco, 80ms) !important;
  }

  /* La foto dentro si avvicina appena. */
  html body a.tbp-ep-tessera:hover > img,
  html body a.tbp-ep-esp:hover .tbp-ep-esp__foto img,
  html body a.tbp-ep-persona:hover .tbp-ep-persona__volto img {
    scale: 1.04;
  }

  /* L'icona fa un piccolo salto storto: nelle schede e nelle righe con icona
     (Ci pensiamo noi, passi, ruoli del Progetto, sezioni dei Servizi). */
  html body :is(.tbp-az__offerta, .tbp-az__noi-lista > li, .tbp-ver__voce, .tbp-ver__lato li, .tbp-ver__passo, .tbp-faq__tessera, .tbp-faq__canale, .tbp-pr__ruolo, .tbp-pr__tipo):hover :is(img.tbp-lava-icon, .tbp-ver__icona),
  html body .tbp-hub__sezione:hover .tbp-hub__distintivo {
    translate: 0 -3px;
    rotate: -4deg;
    scale: 1.04;
  }
}

/* --------------------------------------------------------------------------
   3. Tastiera: anello di fuoco sulle schede cliccabili, e salgono uguale.
   -------------------------------------------------------------------------- */
html body a.tbp-ep-tessera:focus-visible,
html body a.tbp-ep-attesa__voce:focus-visible,
html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera:focus-visible,
html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale:focus-visible,
html body a.tbp-ep-esp:focus-visible .tbp-ep-esp__foto,
html body a.tbp-ep-persona:focus-visible .tbp-ep-persona__volto,
html body #tbp-il-progetto a.tbp-pr__logo:focus-visible .tbp-pr__targa.tbp-pr__targa {
  outline: 3px solid var(--tbp-cm-anello) !important;
  outline-offset: 3px !important;
}
/* Il link intero ha gia' l'anello sulla parte disegnata: niente secondo anello. */
html body a.tbp-ep-esp:focus-visible,
html body a.tbp-ep-persona:focus-visible,
html body #tbp-il-progetto a.tbp-pr__logo:focus-visible {
  outline: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body a.tbp-ep-tessera:focus-visible,
  html body a.tbp-ep-attesa__voce:focus-visible,
  html body #tbp-faq a.tbp-faq__tessera.tbp-faq__tessera:focus-visible,
  html body #tbp-faq a.tbp-faq__canale.tbp-faq__canale:focus-visible,
  html body a.tbp-ep-esp:focus-visible .tbp-ep-esp__foto,
  html body a.tbp-ep-persona:focus-visible .tbp-ep-persona__volto,
  html body #tbp-il-progetto a.tbp-pr__logo:focus-visible .tbp-pr__targa.tbp-pr__targa,
  html body #tbp-car li.tbp-car__voce.tbp-car__voce:has(:focus-visible),
  html body #tbp-car li.tbp-car__percorso.tbp-car__percorso:has(:focus-visible),
  html body :is(#tbp-results-container, .tbp-exp-card-scope) .tbp-exp-card.tbp-exp-card:has(:focus-visible) {
    transform: translateY(var(--tbp-cm-sale));
  }
}

/* --------------------------------------------------------------------------
   4. Telefono: premuto e ritorno con la molla (classi dal JS).
   -------------------------------------------------------------------------- */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  html body .tbp-az .tbp-az__offerta,
  html body .tbp-ver .tbp-ver__schede .tbp-ver__voce,
  html body .tbp-ver .tbp-ver__lato,
  html body li.tbp-ep-evento,
  html body article.tbp-ep-trad__voce,
  html body #tbp-car li.tbp-car__voce.tbp-car__voce,
  html body #tbp-car li.tbp-car__percorso.tbp-car__percorso,
  html body a.tbp-ep-attesa__voce,
  html body a.tbp-ep-tessera,
  html body a.tbp-ep-esp,
  html body a.tbp-ep-persona,
  html body #tbp-il-progetto a.tbp-pr__logo {
    transition:
      scale var(--tbp-moto-lungo, 380ms) var(--tbp-cm-molla),
      opacity var(--tbp-moto-lungo, 380ms) var(--tbp-cm-curva),
      translate var(--tbp-moto-lungo, 380ms) var(--tbp-cm-curva),
      background-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva),
      border-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva) !important;
  }
  /* Specificita' (1,4,2): batte le transizioni qui sopra e quella d'entrata. */
  html :is(#tbp-car, #tbp-il-progetto, body) :is(li, a, article, div).is-tbp-cm-premuto.is-tbp-cm-premuto.is-tbp-cm-premuto.is-tbp-cm-premuto {
    scale: .98;
    transition-duration: var(--tbp-moto-tocco, 80ms) !important;
    transition-timing-function: var(--tbp-cm-curva) !important;
  }

  /* Entrata: solo se il JS ha messo html.tbp-cm-js e ha marcato la scheda
     (era sotto la piega al caricamento). Senza JS le schede sono sempre visibili. */
  html.tbp-cm-js :is(#tbp-car, #tbp-faq, #tbp-il-progetto, body) .tbp-cm-entra.tbp-cm-entra.tbp-cm-entra {
    transition:
      opacity var(--tbp-moto-lungo, 380ms) var(--tbp-cm-curva),
      translate var(--tbp-moto-lungo, 380ms) var(--tbp-cm-curva),
      scale var(--tbp-moto-lungo, 380ms) var(--tbp-cm-molla),
      background-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva),
      border-color var(--tbp-moto-breve, 160ms) var(--tbp-cm-curva) !important;
  }
  html.tbp-cm-js body .tbp-cm-attesa.tbp-cm-attesa {
    opacity: 0;
    translate: 0 var(--tbp-moto-sposta, 16px);
  }
}
@media print {
  html.tbp-cm-js body .tbp-cm-attesa.tbp-cm-attesa { opacity: 1; translate: none; }
}