/* Pagina «contatti» (/contatti/, /en/contact/): stili propri del gruppo in-arrivo-contatti, con il prefisso .contatti- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js. */

/* ---------- Intro: testo a sinistra, il biglietto con l'indirizzo a destra ---------- */
.contatti-intro .lead { margin-bottom: var(--space-6); }
.contatti-punti { max-width: 52ch; }
.contatti-punti li span { color: var(--text-muted); }

/* Il biglietto: una carta con il marchio, l'indirizzo grande e il pulsante. Con un puntatore fine si inclina leggermente
   (data-inclina in effetti.js imposta --mx e --my; senza JavaScript o con il movimento ridotto restano 0). */
.contatti-biglietto { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--ombra-forte); padding: var(--space-8); transform: perspective(1200px) rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 7deg)); }
.contatti-biglietto::before { content: ""; position: absolute; z-index: -1; right: -30%; bottom: -55%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-soft), transparent 68%); pointer-events: none; }
.contatti-biglietto-testa { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.contatti-sigillo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-deep), var(--brand-bright)); color: #FFFFFF; box-shadow: 0 8px 20px rgba(30, 123, 255, .3); }
.contatti-biglietto-nome { display: grid; font-weight: 700; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.contatti-biglietto-nome small { font-weight: 500; font-size: .8125rem; color: var(--text-muted); letter-spacing: 0; }
.contatti-indirizzo { margin-bottom: var(--space-6); }
.contatti-indirizzo .mail-grande { color: var(--text); text-decoration-color: var(--brand-bright); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.contatti-indirizzo .mail-grande:hover { color: var(--primary); }
.contatti-biglietto .actions { margin-bottom: 0; }
/* tablet: il biglietto non si allarga a tutta la colonna */
@media (max-width: 899.98px) { .contatti-biglietto { max-width: 560px; margin-inline: auto; } }
/* La rotta (decorativa): da te a noi, un punto che viaggia lungo una linea tratteggiata. La linea e' un container (inline-size):
   il punto si muove con transform in unita' cqw, non cambiando left, cosi' il ciclo non rifa' il layout */
.contatti-rotta { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 0; font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.contatti-rotta-linea { flex: 1; position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); container-type: inline-size; }
.contatti-rotta-linea i { position: absolute; top: -5px; left: calc(100% - 12px); display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-bright); box-shadow: 0 0 0 4px rgba(30, 123, 255, .22); }

/* ---------- Cosa scriverci: due carte con elenchi ---------- */
.contatti-elenco { gap: var(--space-2); }
.contatti-elenco .ico { width: 20px; height: 20px; margin: 3px 0 0; color: var(--success); }
.contatti-elenco li span { color: var(--text-muted); }

/* ---------- Nota sulla privacy: come il «Parliamo chiaro», con il lucchetto ---------- */
.contatti-nota { border-left-color: var(--success); }
.contatti-nota .ico { color: var(--success); }

/* ---------- Movimento (solo chi non chiede di ridurlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .contatti-biglietto { transition: transform .3s ease; }
  .contatti-rotta-linea i { animation: contatti-viaggio 5s ease-in-out infinite; }
}
@keyframes contatti-viaggio { 0% { transform: translateX(calc(12px - 100cqw)); opacity: 0; } 8% { opacity: 1; } 70% { transform: none; opacity: 1; } 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }