/* ============================================================
   Le due carte dei tarocchi — Carola & Riccardo

   TESI: una carta stampata, non una carta lucida. Il riferimento è il
   Rider-Waite-Smith del 1909: cartoncino avorio invecchiato, un filetto
   nero pesante intorno all'illustrazione, numero d'arcano in testa, targa
   del nome in fondo. Zero metallo. Il pregio viene dalla carta,
   dall'inchiostro e dal taglio, non da un gradiente che finge l'oro.

   MONDO: avorio (#F7F1E1 → #E6DBC0) + inchiostro (--ink) + un seppia
   caldo per le foto. Nessun accento cromatico: la carta è tutta sui
   toni della carta, e a staccarla dalla pagina ci pensano il filetto
   nero e l'ombra, non un cambio di colore.

   Il file sta separato perché la carta è un oggetto a sé: la usa
   index.html nell'hero e carte.html per guardarla in grande.
   ============================================================ */

/* ---------- Tavolo ---------- */
.cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.5rem, 3.5vw, 1.6rem);
}

/* Il formato è quello vero del tarocco (2,75 × 4,75 pollici → 0,58),
   molto più alto della carta da poker: è la proporzione, prima di
   qualunque ornamento, a farlo riconoscere come un tarocco. */
.card {
  width: clamp(108px, 29vw, 158px);
  /* due ombre: una stretta e scura sotto il bordo, dove il cartoncino
     tocca il tavolo, e una larga e diffusa più in basso. Una sola
     ombra morbida fa galleggiare la carta invece di appoggiarla. */
  filter: drop-shadow(0 1px 1px rgba(40, 34, 22, 0.28))
          drop-shadow(0 10px 18px rgba(40, 34, 22, 0.2));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.55s ease;
}

/* appoggiate sul tavolo, una contro l'altra */
.card--sposa { transform: rotate(-3.5deg); }
.card--sposo { transform: rotate(3deg); }

/* sollevate per guardarle meglio: si raddrizzano e l'ombra si allontana */
.card--sposa:hover { transform: rotate(-1deg) translateY(-8px); }
.card--sposo:hover { transform: rotate(1deg) translateY(-8px); }
.card:hover {
  filter: drop-shadow(0 2px 2px rgba(40, 34, 22, 0.22))
          drop-shadow(0 20px 30px rgba(40, 34, 22, 0.26));
}

.card svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Il testo stampato sulla carta ---------- */
/* Dichiarati a 16 e 9px, ma il viewBox li rimpicciolisce: a carta piena
   escono sui 10 e 6px reali. L'asse ottico va quindi inchiodato in basso
   a mano — `auto` lo calcola sulla misura dichiarata e manda in stampa
   grazie troppo sottili per sopravvivere. */
.tarot-name,
.tarot-num {
  font-variation-settings: "opsz" 7;
  fill: #35291D;
}
/* Il nome riempie il nastro. Pesante e con la spaziatura stretta: il
   maiuscoletto sottile e spaziato è l'etichetta da sito di matrimonio,
   non il titolo di un tarocco. */
.tarot-name { font-size: 21px; font-weight: 700; letter-spacing: 1.4px; }
/* "IL VIAGGIO" è due lettere più lungo di "LA SPOSA" e a 21px scavalca il
   filetto interno del nastro di una decina di unità. Scende di due punti,
   e la spaziatura con lui: è l'unico nome che ha bisogno dell'eccezione. */
.tarot-name--lungo { font-size: 19px; letter-spacing: 1.1px; }
/* Il numero è lo scherzo, ma il titolo resta il titolo: il cartiglio gli
   dà il suo posto, e non serve che sia grande quanto il nome. */
.tarot-num { font-size: 15px; font-weight: 600; letter-spacing: 2.4px; }
/* Le due carte in fondo alla pagina portano un anno intero: MMXXVI a 15px
   misura 89 unità e il cartiglio ne è larga 88, quindi uscirebbe dai lati.
   Scende a 13px con la spaziatura più stretta, e nel markup il cartiglio
   di quelle due carte è ingrandito di un quinto: 73 unità dentro 100. */
.tarot-num--anno { font-size: 13px; letter-spacing: 1.4px; }

/* ---------- Il mazzetto ---------- */
/* Le carte in fondo alla pagina non sono l'hero: sono due link. Stanno
   nella stessa lingua della coppia — stessa pergamena, stesso inchiostro,
   stesso nastro — ma più piccole, perché le protagoniste restano quelle
   sopra. Carta e invito a cliccare stanno dentro lo stesso <a>: il
   bersaglio è uno solo, e chi naviga da tastiera prende un fuoco solo. */
.deck {
  display: block;
  width: clamp(104px, 27vw, 138px);
  margin: var(--sp-4) auto 0;
  text-decoration: none;
}

.deck-stack { position: relative; display: block; }

.deck-card {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(40, 34, 22, 0.28))
          drop-shadow(0 8px 14px rgba(40, 34, 22, 0.2));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.deck-card svg { display: block; width: 100%; height: auto; }

/* la scoperta sta nel flusso e detta la misura, le due coperte stanno
   dietro sovrapposte: sfalsate quel tanto che basta a vedere due bordi */
.deck-card--sopra { position: relative; transform: rotate(-1.5deg); }
.deck-card--mezzo { position: absolute; inset: 0; transform: rotate(5deg); }
.deck-card--sotto { position: absolute; inset: 0; transform: rotate(-9deg); }

/* sfogliato: il mazzo si apre un po' e si alza, come le carte dell'hero */
.deck:hover .deck-card--sopra,
.deck:focus-visible .deck-card--sopra { transform: rotate(0deg) translateY(-8px); }
.deck:hover .deck-card--mezzo,
.deck:focus-visible .deck-card--mezzo { transform: rotate(9deg) translate(7px, -2px); }
.deck:hover .deck-card--sotto,
.deck:focus-visible .deck-card--sotto { transform: rotate(-14deg) translate(-7px, -2px); }

/* il regalo è una carta sola: niente mazzo da sfogliare */
.deck--sola .deck-card--sopra { transform: rotate(-2.5deg); }
.deck--sola:hover .deck-card--sopra,
.deck--sola:focus-visible .deck-card--sopra { transform: rotate(-0.5deg) translateY(-8px); }

.deck-cue {
  display: block;
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  color: var(--wine);
  border-bottom: 1px solid transparent;
  width: fit-content;
  margin-inline: auto;
  padding-bottom: 0.2em;
  transition: border-color 0.2s ease;
}
.deck:hover .deck-cue { border-bottom-color: var(--wine); }

.deck:focus-visible { outline: 2px solid var(--wine); outline-offset: 10px; }

@media (prefers-reduced-motion: reduce) {
  .deck-card { transition: none; }
}

/* ---------- La carta in cima a regali.html ---------- */
/* La stessa carta che in home è il link a questa pagina. Qui non linka
   niente: è arrivata dove doveva portare, e resta l'illustrazione della
   pagina. Appoggiata storta come quelle dell'hero, e si raddrizza se le
   passi sopra: è l'unica cosa che fa. */
.carta-regalo { margin-bottom: var(--sp-4); }
.carta-regalo .card { transform: rotate(-2.5deg); }
.carta-regalo .card:hover { transform: rotate(-0.5deg) translateY(-8px); }

/* ---------- La pagina di prova ---------- */
/* Solo carte.html: index.html non carica niente di tutto questo. */
.carte-lab {
  max-width: 62rem;
  margin-inline: auto;
  padding: 3rem 1.5rem 5rem;
}
.carte-lab h1 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-style: italic;
  text-align: center;
}
.carte-lab p {
  max-width: 32rem;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.carte-lab .cards { margin-top: 3.5rem; }

/* la coppia alla misura dell'hero, e poi una carta sola in grande */
.carte-lab .cards--grande { margin-top: 4.5rem; }
.carte-lab .cards--grande .card { width: min(320px, 78vw); }

.carte-lab-nota code { overflow-wrap: anywhere; }
.carte-lab-nota {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  font-style: italic;
  font-size: 0.95rem;
}