/* ============================================================
   Dimostrazione "gift card" della sezione #funzioni di /ristoranti/:
   una macchina che stampa la card quando si sceglie il taglio. Riusa la
   finestra generica (.rt-win*, definita in menu.css: questo file va DOPO).

   ⚠️ DIREZIONE (decisa guardando la reference dell'utente — il widget scuro
   che stampa lo scontrino): **il widget è PIATTO e minimale**. Superfici a
   tinta unita, angoli tondi, un solo livello di contrasto fra scocca e
   pannello incassato, nessun bevel, nessun riflesso, nessuna estrusione sui
   tasti. Lo **skeuomorfismo sta tutto nella stampa e nel foglio stampato**:
   la feritoia, la carta che scende a scatti, l'ombra di contatto sotto la
   card, la finitura laminata. Del documento "Cassette Gift Card SKEUOMORPHIC"
   resta questo — non la meccanica a cassetta (rocchetti e nastro facevano
   sembrare la stampante una musicassetta, che nella reference non c'è).
   ============================================================ */

.rt-win--gift .rt-win__frame {
  /* ⚠️ Larghezza e altezza esplicite, non `aspect-ratio` + `max-width: 100%`:
     `.rt-win` è una griglia e la traccia si allarga fino al contenuto (stesso
     inciampo già pagato sulla finestra della newsletter). */
  --gc-fh: min(88dvh, 740px);
  height: var(--gc-fh);
  width: min(calc(var(--gc-fh) / 1.42), calc(100vw - 2 * clamp(1.4rem, 3vh, 2rem)));
  border-radius: 30px;
  background: var(--gc-bg);
}

.gc {
  --gc-bg: #f4f2ec;
  --gc-shell: #2f2e2b;      /* scocca */
  --gc-deck: #1e1d1b;       /* pannello incassato */
  --gc-key: #383633;        /* tasto a riposo */
  --gc-key-on: #4b4844;     /* tasto scelto */
  --gc-fg: #f0eee9;
  --gc-dim: #9a968f;
  /* geometria della parte bassa della macchina: da questi tre valori dipende
     dove cade il taglio da cui esce la card (vedi `.gc-out`) */
  --gc-pad: clamp(0.55rem, 1.5%, 0.75rem);   /* padding della scocca */
  --gc-slot-h: 10px;                          /* altezza della feritoia */
  --gc-slot-top: 0.5rem;                      /* stacco dal pannello */
  --gc-slot-gap: 0.2rem;                      /* labbro sotto la feritoia */
  /* palette pop delle card (documento §2.1) */
  --gc-verde: #00b140;
  --gc-giallo: #ffd000;
  --gc-lilla: #c4b5fd;
  --gc-arancio: #ff4500;

  position: absolute; inset: 0;
  background: var(--gc-bg);
  color: #14120e;
  font-family: var(--ff-sans);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1rem, 3.4%, 1.7rem) clamp(1rem, 4.5%, 1.8rem) clamp(0.9rem, 2.6%, 1.3rem);
  overflow: hidden;
}

/* ---------------- la macchina (piatta) ----------------
   ⚠️ LA MACCHINA NON HA `z-index`: deve NON creare uno stacking context,
   altrimenti i suoi pezzi si comportano come un blocco unico e la card può
   solo stargli tutta sopra o tutta sotto — che è esattamente il difetto per
   cui sembrava uscire da sotto il widget invece che dalla feritoia.
   Senza contesto proprio, i figli si ordinano nella pila della pagina e si
   può infilare la card in mezzo:
     z 3 · testata e pannello  (la card ci passa DIETRO: è ancora dentro)
     z 2 · la card
     z 1 · feritoia (+ il fondo della scocca, che dipinge ancora più sotto)
   Il risultato è che il foglio esce dal TAGLIO e si appoggia sopra il labbro
   inferiore, come nella reference. */
.gc-machine {
  position: relative;
  width: 100%;
  border-radius: 24px;
  padding: var(--gc-pad);
  background: var(--gc-shell);
  /* unica concessione al rilievo: l'ombra che stacca il widget dal fondo */
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.55);
}

.gc-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.35rem 0.65rem;
}
.gc-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: #45423e;
}
.gc-mark svg { width: 16px; height: 16px; fill: #cfcbc4; }
/* pastiglia in alto a destra: è il tasto "Home" della reference, qui usato
   per il nome del locale */
.gc-pill {
  margin-left: auto; flex: none;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  background: #3c3a36;
  color: var(--gc-fg);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  white-space: nowrap;
}

/* ---- pannello incassato ---- */
.gc-panel {
  position: relative; z-index: 3;   /* la card, salendo, ci sparisce dietro */
  border-radius: 18px;
  padding: clamp(0.9rem, 2.4%, 1.2rem);
  background: var(--gc-deck);
}
.gc-panel__head { display: flex; align-items: flex-start; gap: 1rem; color: var(--gc-fg); }
.gc-panel__l { min-width: 0; }
.gc-panel__t {
  display: block;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.6vh, 1.3rem); letter-spacing: -0.02em;
}
.gc-panel__s { display: block; margin-top: 0.15rem; font-size: 0.84rem; color: var(--gc-dim); }
.gc-total { margin-left: auto; text-align: right; flex: none; }
.gc-total i {
  display: block; font-style: normal;
  font-size: 0.72rem; color: var(--gc-dim);
}
.gc-total b {
  display: block; margin-top: 0.05rem;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.3rem, 3.4vh, 1.7rem); letter-spacing: -0.03em;
  color: var(--gc-fg);
  font-variant-numeric: tabular-nums;
}

/* ---- tasti dei tagli ----
   Piatti come la pastiglia in alto: la "meccanica" è solo un affondamento
   brevissimo alla pressione (documento §4.1: 50-80ms), non un'estrusione. */
.gc-keys {
  margin-top: clamp(0.85rem, 2.2%, 1.1rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem;
}
.gc-key {
  font: inherit; cursor: pointer;
  padding: clamp(0.6rem, 1.8vh, 0.85rem) 0.4rem;
  border: 0; border-radius: 13px;
  background: var(--gc-key);
  color: var(--gc-fg);
  transition: background-color 0.18s ease, transform 0.07s ease-out, color 0.18s ease;
}
.gc-key__cap {
  display: block;
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1rem, 2.6vh, 1.2rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gc-key:hover { background: #454340; }
.gc-key:active { transform: scale(0.97); }
.gc-key[aria-pressed="true"] { background: var(--gc-key-on); color: #fff; }
.gc-key:focus-visible { outline: 2px solid #ff7a3d; outline-offset: 3px; }

/* ---- riga di stato: lo spinner della reference ---- */
.gc-state {
  margin-top: clamp(0.8rem, 2.2%, 1.05rem);
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--gc-dim);
  font-size: 0.92rem;
}
.gc-state b { font-weight: 500; }
.gc-state__ico { position: relative; width: 18px; height: 18px; flex: none; display: grid; }
.gc-spin {
  grid-area: 1 / 1;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.45;
}
.gc-check { grid-area: 1 / 1; width: 18px; height: 18px; opacity: 0; color: #26d366; }
.gc.is-printing .gc-state { color: var(--gc-fg); }
.gc.is-printing .gc-spin { opacity: 1; animation: gc-rot 0.85s linear infinite; }
.gc.is-done .gc-state { color: var(--gc-fg); }
.gc.is-done .gc-spin { opacity: 0; }
.gc.is-done .gc-check { opacity: 1; }
@keyframes gc-rot { to { transform: rotate(360deg); } }

/* ---- feritoia: la fessura da cui esce la carta ----
   Sta sotto la card (z 1): appena il foglio esce, gli passa sopra. */
.gc-slot {
  position: relative; z-index: 1;
  height: var(--gc-slot-h); margin: var(--gc-slot-top) 3.5% var(--gc-slot-gap);
  border-radius: 6px;
  background: #131211;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);
}

/* ---------------- la card che esce ----------------
   ⚠️ Il margine negativo NON è a occhio: è esattamente la distanza fra il
   fondo della scocca e il LATO SUPERIORE della feritoia (feritoia + suo
   margine basso + padding della scocca). Così a fine corsa il bordo alto
   della card cade sul taglio, e da lì in giù il foglio copre feritoia e
   labbro — che stanno sotto (z 1 e fondo della scocca). Se cambia uno dei tre
   valori, il taglio si sposta: sono variabili apposta. */
/* ⚠️ QUESTO CONTENITORE È IL TAGLIO. Il suo bordo alto cade esattamente sul
   lato superiore della feritoia (il margine negativo qui sotto è feritoia +
   labbro + padding della scocca) e `overflow: hidden` fa il resto: la card,
   ritirata, è tradotta sopra quel bordo e semplicemente NON ESISTE — non
   c'è nessun pezzo di scocca dietro cui nasconderla, e infatti prima si
   vedeva spuntare sopra la macchina. Uscendo, il foglio compare dalla linea
   del taglio, esattamente come dalla fessura di una stampante.
   Sotto quella linea la card sta SOPRA feritoia e labbro (z 2 contro z 1 e il
   fondo della scocca) e SOTTO testata e pannello (z 3): è dentro la macchina,
   non appoggiata sopra. */
.gc-out {
  position: relative; z-index: 2;
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto; min-height: 0;
  margin-top: calc(-1 * (var(--gc-slot-h) + var(--gc-slot-gap) + var(--gc-pad)));
}
.gc-card {
  /* la tipografia scala con la CARD, non col viewport */
  container-type: inline-size;
  /* ⚠️ Centrata con `margin-inline: auto` e non con una translateX: la
     transform serve tutta al movimento di uscita. Ed è più STRETTA del
     contenitore apposta — così l'ombra del foglio non viene tranciata dal
     taglio ai lati, e le due estremità della feritoia restano in vista. */
  position: absolute; left: 0; right: 0; margin-inline: auto; top: 0;
  width: min(calc(100% - 2 * var(--gc-pad) - 46px), 420px);
  aspect-ratio: 340 / 214;
  border-radius: 14px;
  overflow: hidden;
  color: #0d0d0d;
  background: var(--c-bg);
  /* ⚠️ -112% e non -100%: da ferma la card deve sparire DIETRO IL PANNELLO
     (z 3), non solo sopra il taglio — fra il fondo del pannello e la feritoia
     c'è uno stacco di scocca dove la card, che sta più in alto nella pila, si
     vedrebbe spuntare. */
  transform: translateY(-112%);
  /* uscita a scatti: sono i rulli di trascinamento, non un cassetto che scorre */
  transition: transform 1.15s steps(16, end);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
/* finitura plastificata: un velo speculare in diagonale sul PVC */
.gc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.26) 0 18%, transparent 34% 66%, rgba(255, 255, 255, 0.1) 82% 100%);
  mix-blend-mode: soft-light;
}
.gc.is-printing .gc-card,
.gc.is-feeding .gc-card,
.gc.is-done .gc-card { opacity: 1; }
.gc.is-feeding .gc-card,
.gc.is-done .gc-card { transform: translateY(0); }
/* rientro (cambio taglio): torna dentro liscia e in fretta, non a scatti —
   la carta viene riavvolta, non trascinata */
.gc.is-rewind .gc-card { transform: translateY(-112%); transition: transform 0.4s cubic-bezier(0.5, 0, 0.75, 0); }

.gc-card[data-scheme="lilla"]  { --c-bg: var(--gc-lilla);  --c-sh: var(--gc-giallo); }
.gc-card[data-scheme="verde"]  { --c-bg: var(--gc-verde);  --c-sh: var(--gc-lilla); }
.gc-card[data-scheme="giallo"] { --c-bg: var(--gc-giallo); --c-sh: var(--gc-arancio); }
.gc-card__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.gc-sh { fill: var(--c-sh); }

/* ⚠️ Il margine alto della card è più generoso di quanto sembri necessario:
   la prima striscia resta dietro il labbro della macchina (vedi `.gc-out`), e
   con il marchio più in alto la riga usciva tagliata a metà dalla feritoia. */
.gc-card > span { position: absolute; z-index: 2; }
.gc-card__brand {
  left: 6.5%; top: 11%;
  font-size: 3.4cqw; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap;
}
.gc-card__val {
  right: 6.5%; top: 9%;
  font-family: var(--ff-display); font-weight: 900;
  font-size: 11cqw; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* ⚠️ `max-width` in ch, non in %: "GIFT CARD" va su DUE righe come nelle card
   di riferimento, e la misura deve seguire il corpo del carattere — una
   percentuale della card, che è fluida, a certe larghezze lo rimetteva in
   riga. 6ch sta fra "GIFT" (4) e "GIFT CARD" (9): la riga si spezza sempre. */
.gc-card__big {
  left: 6.5%; top: 33%; max-width: 6ch;
  font-family: var(--ff-display); font-weight: 900;
  font-size: 14cqw; line-height: 0.88; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.gc-card__foot {
  left: 6.5%; right: 6.5%; bottom: 6.5%;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.6rem;
  font-size: 3cqw; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}
.gc-card__foot i { font-style: normal; opacity: 0.72; }
.gc-card__foot i:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.9; }

/* ---- scarica il JPG ---- */
.gc-dl {
  position: relative; z-index: 4;   /* la card è posizionata: senza, ci finisce sotto */
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer;
  padding: 0.6rem 1.1rem; border: 0; border-radius: 999px;
  background: #14120e; color: #f4f2ec;
  transition: transform 0.18s var(--ease), opacity 0.25s ease;
}
.gc-dl[hidden] { display: none; }
.gc-dl:hover { transform: translateY(-2px); }
.gc-dl:focus-visible { outline: 2px solid #ff7a3d; outline-offset: 3px; }
.gc-dl svg { width: 16px; height: 16px; }

.gc-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.gc-note {
  margin-top: 0.7rem;
  font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 700; color: rgba(20, 18, 14, 0.4); text-align: center;
}

/* ---------------- reduced motion ----------------
   Niente spinner né uscita a scatti: la card si trova stampata. */
@media (prefers-reduced-motion: reduce) {
  .gc-card { transition: none; }
  .gc.is-printing .gc-spin { animation: none; }
}

/* ============================================================
   Anteprima nel box della griglia: tre card sfalsate, come il mazzo di
   riferimento. Le stesse forme e gli stessi colori che escono dalla macchina.
   ============================================================ */
.rt-feature__preview--gift {
  background: #efece4;
  display: grid; place-items: center;
  padding: 1.1rem;
}
/* ⚠️ Il mazzo deve stare DENTRO il riquadro dell'anteprima: le card sfalsate
   e ruotate escono dal proprio ingombro, quindi la misura di base è più
   piccola dello spazio disponibile. Con una card più larga le scritte delle
   card dietro venivano tagliate a metà dal bordo del box. */
.rt-gc-fan { position: relative; width: 56%; aspect-ratio: 340 / 214; }
.rt-gc-fan span {
  position: absolute; inset: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--c-bg);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45);
}
.rt-gc-fan span:nth-child(1) { --c-bg: #ffd000; --c-sh: #ff4500; transform: translate(-22%, -17%) rotate(-9deg); }
.rt-gc-fan span:nth-child(2) { --c-bg: #c4b5fd; --c-sh: #ffd000; transform: translate(20%, 17%) rotate(7deg); }
.rt-gc-fan span:nth-child(3) { --c-bg: #00b140; --c-sh: #c4b5fd; }
.rt-gc-fan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-gc-fan b {
  position: absolute; left: 7%; top: 30%; z-index: 2;
  font-family: var(--ff-display); font-weight: 900;
  font-size: 0.86rem; line-height: 0.92; letter-spacing: -0.04em;
  color: #0d0d0d; text-transform: uppercase;
}