/* ═══════════════════════════════════════════════════════════════════════════
   punta.css — effetti comandati dal puntatore.

   Seconda famiglia della libreria, accanto a scorre (comanda lo scorrimento) e
   solo (non comanda nessuno).

   ── L'avvertenza che vale per tutta la famiglia ───────────────────────────
   Sul telefono **non succede niente**, e non è un difetto da correggere: senza
   puntatore non c'è nulla da seguire. Quindi una sezione costruita su questi
   effetti deve reggersi in piedi anche da ferma — composizione, gerarchia,
   testo — perché è così che la vedrà la maggioranza dei visitatori.
   Il modulo non parte nemmeno, su un dispositivo a tocco: nessun ascoltatore,
   nessun consumo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── scia — le immagini restano indietro lungo il percorso del cursore ─────
   Le figure vivono in un piano fisso sopra la pagina ma trasparente ai clic.
   Nessuna entra nel flusso: si accendono, si spengono, non spostano niente. */
[data-punta="scia"] { position: relative; isolation: isolate; }
.punta-piano {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.punta-orma {
  position: absolute; top: 0; left: 0;
  width: var(--punta-misura, 16rem); aspect-ratio: 4 / 3;
  margin: calc(var(--punta-misura, 16rem) / -2.66) 0 0 calc(var(--punta-misura, 16rem) / -2);
  opacity: 0; will-change: transform, opacity;
  transition: opacity var(--punta-spegni, 900ms) ease,
              transform var(--punta-spegni, 900ms) cubic-bezier(.22,1,.36,1);
}
.punta-orma img { width: 100%; height: 100%; object-fit: cover; display: block; }
.punta-orma.punta-viva { opacity: 1; }
/* Il contenuto vero sta sopra la scia, sempre leggibile */
/* Un velo chiaro sfumato fra le fotografie e il testo: senza, le immagini che
   passano sotto le parole le rendono illeggibili per un istante — lo stesso
   accorgimento di `magnetica` e di `sciame`. La tinta la dà il tema. */
[data-punta="scia"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(102% 74% at 50% 47%,
      rgba(var(--punta-scia-tinta, 250,248,246), .92) 0%,
      rgba(var(--punta-scia-tinta, 250,248,246), .80) 26%,
      rgba(var(--punta-scia-tinta, 250,248,246), .34) 54%,
      rgba(var(--punta-scia-tinta, 250,248,246), 0) 78%);
}
[data-punta="scia"] > :not(.punta-piano) { position: relative; z-index: 2; }

/* ── sciame — foto sparse che si spostano verso il puntatore ───────────────
   L'opposto di `magnetica` di moto.js, dove scappano. Qui accompagnano: il
   movimento è più lento e più corto, altrimenti sembra che inseguano. */
[data-punta="sciame"] { position: relative; isolation: isolate; }
[data-punta="sciame"] .punta-carta { position: relative; z-index: 1; will-change: transform; }
[data-punta="sciame"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(102% 74% at 50% 47%,
      rgba(var(--punta-sciame-tinta, 250,248,246), .96) 0%,
      rgba(var(--punta-sciame-tinta, 250,248,246), .86) 24%,
      rgba(var(--punta-sciame-tinta, 250,248,246), .38) 51%,
      rgba(var(--punta-sciame-tinta, 250,248,246), 0) 76%);
}
[data-punta="sciame"] > :not(.punta-piano):not(.punta-carta) {
  position: relative;
  z-index: 3;
}

/* ── calamita — l'elemento si sporge verso il cursore che gli passa vicino ─
   Da usare sui pochi elementi che devono essere toccati: la chiamata all'azione,
   il numero di telefono. Su tutto il resto diventa un tic. */
[data-punta="calamita"] { display: inline-flex; will-change: transform; }

/* ── inclina — una carta con uno strato che segue il puntatore in 3D ────── */
[data-punta="inclina"] { perspective: var(--punta-inclina-prospettiva, 800px); }
[data-punta="inclina"] .punta-inclina-strato {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── prossimita — carte che crescono vicino al puntatore ────────────────── */
[data-punta="prossimita"] .punta-prossimita-carta {
  transform-origin: center;
  will-change: transform;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .punta-piano { display: none; }
  [data-punta="sciame"] .punta-carta,
  [data-punta="calamita"],
  [data-punta="inclina"] .punta-inclina-strato,
  [data-punta="prossimita"] .punta-prossimita-carta { transform: none !important; }
}

/* ── polvere — la tela dei granelli ───────────────────────────────────────
   Sta sotto il contenuto e non riceve clic: è decorazione, e il testo sopra
   deve restare selezionabile. Il colore dei granelli lo eredita dal testo, o
   lo si passa con data-tinta. */
[data-punta="polvere"] { position: relative; isolation: isolate; }
[data-punta="polvere"] > .punta-polvere {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
[data-punta="polvere"] > :not(.punta-polvere) { position: relative; z-index: 1; }

/* ── accende — le lettere che cambiano colore a onda ──────────────────────
   Solo il colore cambia: nessuna trasformazione, così la riga non balla
   sotto il dito mentre la si legge. */
[data-punta="accende"] { cursor: default; }
[data-punta="accende"] .punta-parola { display: inline-block; white-space: nowrap; }
[data-punta="accende"] .punta-lettera {
  display: inline-block; transition: color 220ms cubic-bezier(.22,1,.36,1);
}