/* =========================================================
   Pillola di stato sulla card — segue il puntatore
   Vedi js/card-pill.js per il movimento e il montaggio.

   LA SCENA, in ordine: la freccia del cursore sparisce e al suo posto
   cresce un gettone rotondo GRIGIO con un lucchetto APERTO; la staffa si
   carica all'indietro (anticipazione), scatta chiusa; nello scatto il
   gettone si fa SCURO; poi si allarga in pillola e la scritta esce da
   dietro il lucchetto.

   Tre motivi per cui la staffa e' in @keyframes e non in transition,
   contro la regola generale del progetto: (1) e' una sequenza a tre
   tempi — carica, scatta, si assesta — e una transition ne sa fare uno
   solo; (2) ogni tempo ha la sua curva (carica lenta, scatto accelerato,
   assestamento morbido), e le curve per segmento esistono solo nei
   keyframe; (3) non c'e' niente da interrompere a meta': se esci col
   puntatore sparisce tutta la pillola, non si torna indietro.
   ========================================================= */

:root {
  --pill-enter: 200ms;
  --pill-exit: 130ms;
  /* Il gettone e' un cerchio: padding uguale sopra/sotto e ai lati, e
     l'icona grande abbastanza da vedere la staffa muoversi (a 14px il
     movimento c'era ma non si leggeva). */
  --pill-icona: 24px;
  --pill-pad-y: 11px;
  --pill-pad-x-chiusa: 11px; /* = pad-y, cioe' cerchio perfetto */
  --pill-pad-x-aperta: 18px;
  --pill-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Il gate (hover: hover) valeva per TUTTO: su mobile la pillola non
   esisteva proprio. Ora resta solo su cio' che ha senso solo col mouse
   — nascondere la freccia — mentre la pillola vive ovunque: al tocco la
   fa comparire js/card-pill.js al centro della thumb (vedi li'). */
@media (hover: hover) and (pointer: fine) {
  .js .card {
    cursor: none;
  }

  /* Il titolo della card e' ora un <a> vero: da solo riporterebbe la
     freccia di sistema proprio dove la pillola dice "Open project". */
  .js .card a {
    cursor: none;
  }
}

/* La pillola vive nella CARD, non nella thumb: cosi' segue il
   puntatore anche sul titolo — che sembra cliccabile (si sottolinea in
   hover) e deve dire la stessa cosa della foto. */
.card {
  position: relative;
}

.card__pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3; /* sopra foto (1) e scarabocchio (0) */
  /* Non deve mai rubare il puntatore: e' un'etichetta, non un
     bersaglio. Senza, il puntatore ci finisce sopra e la card crede
     che tu sia uscito — lampeggio infinito. */
  pointer-events: none;

  display: flex;
  align-items: center;
  padding: var(--pill-pad-y) var(--pill-pad-x-chiusa);
  border-radius: 999px;
  white-space: nowrap;

  font-family: var(--font-family-base);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
  /* Grigio finche' il lucchetto e' aperto: neutro, non promette
     niente. Si incupisce quando la staffa scatta — e' li' che la card
     ti dice di no. Due token gia' esistenti, nessun colore nuovo. */
  background: var(--color-grey-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);

  /* --pill-x/y li scrive js/card-pill.js a ogni fotogramma; lo scarto
     del 50% centra la pillola sulla punta del puntatore. */
  transform: translate3d(var(--pill-x, 0px), var(--pill-y, 0px), 0)
    translate(-50%, -50%) scale(var(--pill-scale, 0.5));
  opacity: 0;
  /* USCITA, che e' la scena al contrario e compressa: prima rientra la
     scritta, il gettone torna tondo, e solo allora si rimpicciolisce
     verso il puntatore e svanisce. Prima andava via tutto insieme in
     130ms e si leggeva come uno sfarfallio, non come un'uscita.

     Il colore NON torna grigio: si e' chiuso, resta chiuso. Il reset a
     grigio e' un salto istantaneo messo a 260ms, cioe' a pillola gia'
     invisibile — serve solo a preparare il prossimo passaggio. Stessa
     cosa per la scala dell'icona. */
  transition:
    padding 120ms var(--pill-ease-out),
    --pill-scale 150ms var(--pill-ease-out) 60ms,
    opacity 130ms var(--pill-ease-out) 60ms,
    background-color 0s linear 260ms;
  will-change: transform, opacity;
}

/* Mai da scale(0): niente al mondo compare dal nulla. */
.card__pill.is-visible {
  opacity: 1;
  --pill-scale: 1;
  padding-inline: var(--pill-pad-x-aperta);
}

.card__pill-icona {
  display: block;
  flex: none;
  width: var(--pill-icona);
  height: var(--pill-icona);
  overflow: visible;
  /* Arriva un filo piu' grande e si assesta: contro-scala rispetto al
     gettone che sta crescendo, cosi' il lucchetto e' subito leggibile
     invece di essere piccolo come tutto il resto nel primo istante. */
  transform: scale(1.18);
  /* Reset istantaneo a uscita finita (vedi sopra): se tornasse a 1.18
     durante l'uscita, il lucchetto si gonfierebbe mentre il gettone si
     rimpicciolisce — due movimenti contrari nello stesso oggetto. */
  transition: transform 0s linear 260ms;
}

.card__pill.is-visible .card__pill-icona {
  transform: scale(1);
  transition: transform 340ms var(--pill-ease-out);
}

/* ---------- 1. La staffa: carica, scatta, si assesta ----------
   Il perno e' la gamba destra (15.8, 11.4 nel viewBox): l'altra si
   solleva e ruota via, come su un lucchetto vero. transform-box:
   view-box perche' le coordinate del perno sono quelle del viewBox,
   non del riquadro del tracciato. */
.card__pill-arco {
  transform-box: view-box;
  transform-origin: 15.8px 11.4px;
  /* Lo stato base e' CHIUSA, non aperta. In uscita la classe se ne va
     e con lei l'animazione: l'elemento torna a questo valore. Con base
     "aperta" la staffa scattava indietro di 34 gradi in un fotogramma,
     ed era la cosa piu' brutta di tutta l'uscita. Il lucchetto si e'
     chiuso: resta chiuso mentre se ne va, non si sbulloneria da solo.
     L'apertura vive solo dentro i keyframe (0%), che e' l'unico posto
     in cui serve.

     La transition serve al caso limite: se esci col puntatore MENTRE
     la staffa sta ancora scattando, invece di teletrasportarsi a
     chiusa ci arriva scivolando, mentre la pillola svanisce. */
  transform: rotate(0deg);
  transition: transform 150ms var(--pill-ease-out);
}

.card__pill[data-stato="coming-soon"].is-visible .card__pill-arco {
  /* Parte a pillola gia' ferma e visibile (150ms): prima la chiusura
     finiva dentro la dissolvenza d'entrata e non la vedeva nessuno. */
  animation: pill-staffa 400ms both 150ms;
}

@keyframes pill-staffa {
  /* ANTICIPAZIONE: prima di chiudersi si apre ancora un po'. E' il
     respiro all'indietro che rende leggibile il colpo in avanti —
     senza, lo scatto arriva dal nulla e sembra un cambio di stato. */
  0% {
    transform: rotate(34deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  38% {
    transform: rotate(45deg);
    /* Lo scatto ACCELERA: e' l'unico punto del sito dove ci vuole una
       ease-in, perche' qui non e' un'interfaccia che risponde, e' un
       oggetto che cade in sede. */
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.2);
  }
  /* Passa OLTRE lo zero e sparisce un attimo dietro il corpo del
     lucchetto (disegnato sopra): e' il rinculo del colpo, si sente ma
     non si vede. */
  58% {
    transform: rotate(-6deg);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ---------- 2. Il colore cambia NELLO scatto ----------
   150ms di ritardo + il 58% di 400ms = 382ms: l'istante in cui la
   staffa tocca il fondo. Il colore cambia li', non prima e non dopo,
   cosi' si legge come conseguenza del colpo e non come una cosa a
   parte che succede nel frattempo.

   ---------- 3. Poi il gettone si allarga in pillola ---------- */
.card__pill[data-stato="coming-soon"].is-visible {
  background: var(--color-grey-3);
  transition:
    opacity var(--pill-enter) var(--pill-ease-out),
    --pill-scale var(--pill-enter) var(--pill-ease-out),
    background-color 200ms var(--pill-ease-out) 375ms,
    padding 240ms var(--pill-ease-out) 470ms;
}

.card__pill-testo {
  display: block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  /* Rientra per prima, ed e' l'unica cosa che in uscita va piu' veloce
     di tutto il resto: e' l'ultima arrivata, e' la prima ad andarsene. */
  transition:
    max-width 110ms var(--pill-ease-out),
    margin-left 110ms var(--pill-ease-out),
    opacity 80ms var(--pill-ease-out);
}

/* La misura vera la mette js/card-pill.js in --pill-testo-w: cosi' la
   corsa finisce esattamente quando il testo e' tutto fuori, senza
   tempo morto. Sono proprieta' di layout, si', ma su un elemento in
   position:absolute — fuori dal flusso, nessun fratello da
   ricalcolare. */
.card__pill[data-stato="coming-soon"].is-visible .card__pill-testo {
  max-width: var(--pill-testo-w, 140px);
  margin-left: var(--space-2);
  opacity: 1;
  transition:
    max-width 240ms var(--pill-ease-out) 470ms,
    margin-left 240ms var(--pill-ease-out) 470ms,
    opacity 200ms var(--pill-ease-out) 500ms;
}

/* "Open project" non ha niente da chiudere: e' BLU da subito — il
   grigio del gettone chiuso e' lo stato di attesa, il blu e' l'invito
   ad andare — e la scritta esce senza aspettare nessuno scatto. */
.card__pill[data-stato="open"] {
  background: var(--color-blue);
}

.card__pill[data-stato="open"].is-visible {
  transition:
    opacity var(--pill-enter) var(--pill-ease-out),
    --pill-scale var(--pill-enter) var(--pill-ease-out),
    padding 220ms var(--pill-ease-out) 60ms;
}

.card__pill[data-stato="open"].is-visible .card__pill-testo {
  max-width: var(--pill-testo-w, 140px);
  margin-left: var(--space-2);
  opacity: 1;
  transition:
    max-width 220ms var(--pill-ease-out) 60ms,
    margin-left 220ms var(--pill-ease-out) 60ms,
    opacity 180ms var(--pill-ease-out) 80ms;
}

.card__pill[data-stato="open"] .card__pill-icona {
  transition: transform var(--pill-exit) var(--pill-ease-out);
}

.card__pill[data-stato="open"].is-visible .card__pill-icona {
  transform: scale(1) translateX(2px);
  transition: transform var(--pill-enter) var(--pill-ease-out) 140ms;
}

@media (prefers-reduced-motion: reduce) {
  /* Resta la dissolvenza (dice che e' comparso qualcosa), sparisce
     tutta la messinscena: la pillola arriva gia' fatta — lucchetto
     chiuso, scura, scritta fuori. */
  .card__pill,
  .card__pill.is-visible,
  .card__pill[data-stato="coming-soon"].is-visible,
  .card__pill[data-stato="open"].is-visible {
    --pill-scale: 1;
    padding-inline: var(--pill-pad-x-aperta);
    transition: opacity var(--pill-exit) var(--pill-ease-out);
  }

  .card__pill[data-stato="coming-soon"] {
    background: var(--color-grey-3);
  }

  .card__pill.is-visible {
    transition: opacity var(--pill-enter) var(--pill-ease-out);
  }

  .card__pill-arco,
  .card__pill[data-stato="coming-soon"].is-visible .card__pill-arco {
    transform: rotate(0deg);
    animation: none;
  }

  .card__pill-testo,
  .card__pill[data-stato="coming-soon"].is-visible .card__pill-testo,
  .card__pill[data-stato="open"].is-visible .card__pill-testo {
    max-width: var(--pill-testo-w, 140px);
    margin-left: var(--space-2);
    opacity: 1;
    transition: none;
  }

  .card__pill-icona,
  .card__pill.is-visible .card__pill-icona,
  .card__pill[data-stato="open"].is-visible .card__pill-icona {
    transform: none;
    transition: none;
  }
}


/* ---------- Al tocco ----------
   Su mobile non c'e' un puntatore da seguire: la pillola compare al
   CENTRO della thumb (la posizione la calcola js/card-pill.js, che
   riusa le stesse --pill-x/y) e la foto si incupisce sotto, cosi' il
   "no" non e' solo un'etichetta che galleggia ma un cambio di stato
   della card intera. Stessa scena del desktop, stesso lucchetto. */
.card__image {
  transition: filter 260ms var(--pill-ease-out);
}

.card--bloccata .card__image {
  filter: brightness(0.62);
}

/* Il tocco non ha un "esci col dito": la pillola si toglie da sola dopo
   un attimo (vedi ATTESA_TOCCO in js/card-pill.js). Qui serve solo che
   l'oscuramento se ne vada insieme a lei. */
@media (prefers-reduced-motion: reduce) {
  .card__image {
    transition: none;
  }
}

/* La scala e' una custom property animata: senza registrarla il browser
   la interpolerebbe come stringa, cioe' a scatti fra 0.92 e 1. */
@property --pill-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5;
}