/* ══ Vivo: il livello che da corpo e movimento ═══════════════════════
   Tre cose, tutte reversibili e tutte rispettose di chi ha chiesto al
   sistema di ridurre il movimento:

   1. PULSANTI IN RILIEVO — l'ombra piena spostata (niente sfumature:
      un blocco netto, come la stampa) li stacca dalla pagina. Al
      passaggio si alzano, premendo si schiacciano sull'ombra. E' il
      "3D" che sta bene a un giornale: fisico, non lucido.

   2. SCHEDE IN RILIEVO — stessa idea sulle piastrelle del catalogo,
      sulle schede articolo e sui riquadri del profilo.

   3. COMPARSA ALLO SCORRIMENTO — le sezioni entrano salendo di poco
      e sfumando dentro, una dopo l'altra. Le classi le mette vivo.js:
      senza JavaScript la pagina resta perfettamente visibile.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Pulsanti ─────────────────────────────────────────────────── */
.fmt-btn, .invia, .esci, .pf-btn, .pf-mini,
.hero-azioni a, .art-filtro, .member-link,
.nl-btn, [data-salva], .mp-accedi {
  transition: transform 150ms cubic-bezier(.2,.8,.3,1),
              box-shadow 150ms cubic-bezier(.2,.8,.3,1),
              background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.fmt-btn, .invia, .esci, .pf-btn,
.hero-azioni a, .member-link, .nl-btn, .mp-accedi {
  box-shadow: 3px 3px 0 var(--vivo-ombra, rgba(17,19,15,.85));
}
.fmt-btn:hover, .invia:hover, .esci:hover, .pf-btn:hover,
.hero-azioni a:hover, .member-link:hover, .nl-btn:hover,
.fmt-btn:focus-visible, .invia:focus-visible, .esci:focus-visible,
.pf-btn:focus-visible, .hero-azioni a:focus-visible,
.member-link:focus-visible, .nl-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--vivo-ombra, rgba(17,19,15,.85));
}
.fmt-btn:active, .invia:active, .esci:active, .pf-btn:active,
.hero-azioni a:active, .member-link:active, .nl-btn:active, .mp-accedi:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--vivo-ombra, rgba(17,19,15,.85));
}

/* nel tema scuro l'ombra nera annega: si usa il filo chiaro del bordo */
[data-theme="dark"] body { --vivo-ombra: rgba(232,232,226,.28); }
body { --vivo-ombra: rgba(17,19,15,.85); }

/* Il segnalibro e l'omino sono comandi piccoli: il rilievo pieno li
   farebbe sembrare pulsanti d'azione. A loro basta la pressione. */
[data-salva]:active { transform: scale(.9); }
.member-link.member-in { box-shadow: none; }
.member-link.member-in:hover { transform: none; }

/* ── 2. Schede ───────────────────────────────────────────────────── */
.tile, .art-card, .plan, .pf-scheda, .sl-blocco {
  transition: transform 240ms cubic-bezier(.2,.8,.3,1),
              box-shadow 240ms cubic-bezier(.2,.8,.3,1);
}
.tile:hover, .art-card:hover, .plan:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--vivo-ombra, rgba(17,19,15,.85));
}
/* la piastrella del catalogo ha gia una sua alzata: questa la sostituisce
   in blocco cosi non si sommano */
.tile:hover { filter: none; }

/* ── 3. Comparsa allo scorrimento ───────────────────────────────── */
.vivo-su {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms cubic-bezier(.2,.7,.3,1),
              transform 640ms cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--vivo-ritardo, 0ms);
  will-change: opacity, transform;
}
.vivo-su.in-vista { opacity: 1; transform: none; }

/* ── Le fotografie ───────────────────────────────────────────────
   Cornice editoriale unica per tutte: filo d'inchiostro, ombra piena
   come i pulsanti, didascalia in maiuscoletto. Una foto senza cornice
   sembra incollata; con la cornice giusta sembra scelta. */
.foto-vort { margin: 26px 0 0; }
.foto-vort img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--vivo-ombra, rgba(17,19,15,.85));
  filter: saturate(.92) contrast(1.02);
}
.foto-vort figcaption {
  margin-top: 10px; color: var(--muted);
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
/* la fascia larga: bassa e ritagliata, da testata di giornale */
.foto-banner { margin: 34px 0 8px; }
.foto-banner img { height: clamp(180px, 26vw, 300px); object-fit: cover; }

/* ── Rispetto per chi ha chiesto meno movimento ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vivo-su { opacity: 1; transform: none; transition: none; }
  .fmt-btn:hover, .invia:hover, .esci:hover, .pf-btn:hover,
  .hero-azioni a:hover, .member-link:hover, .nl-btn:hover,
  .tile:hover, .art-card:hover, .plan:hover { transform: none; }
}