/* Strato di movimento di Arya's Club.
   CSS puro e non SASS di proposito: su Picostrap il bundle lo genera un compilatore
   dentro il Customizer, a mano, e non va toccato da qui.

   Le regole sotto `.ns-anim` nascondono gli elementi PRIMA del primo disegno. La
   classe la mette uno <script> in linea in <head>, che non viene stampato affatto
   quando LiveCanvas e' in modifica. Senza JavaScript la classe non esiste, queste
   regole non si applicano, e il sito si vede tutto.

   L'elenco dei selettori qui sotto deve coincidere con quello registrato in
   js/ns-animazioni.js: lo verifica migration/tools/verifica-animazioni.mjs.

   Il blocco di nascondimento sta dentro `@media (prefers-reduced-motion:
   no-preference)` per la ragione scritta nella specifica al §8.3: chi ha chiesto
   meno movimento non deve trovare il contenuto nascosto in attesa che il
   JavaScript lo scopra. Annullare il nascondimento a posteriori (con una regola
   `opacity: 1` sotto `prefers-reduced-motion: reduce`) non basterebbe: quella
   regola colpisce `[data-ns-anim]`, un attributo che mette il JavaScript, quindi
   fra il primo disegno e l'esecuzione dello script il contenuto resterebbe
   invisibile proprio a chi ha chiesto di essere lasciato in pace. Non nascondere
   affatto e' piu' semplice e piu' sicuro. */

@media ( prefers-reduced-motion: no-preference ) {

.ns-anim .module-testo .wysiwyg-content > *,
.ns-anim .module-hero_con_descrizione .container p,
.ns-anim .ns-card,
.ns-anim .module-buttons .btn,
.ns-anim .module-faqs .accordion-item,
.ns-anim .module-menu .menu-list > div,
.ns-anim .module-elenco_link p,
.ns-anim .module-elenco_menu .p-0,
.ns-anim .ns-anim-breve,
.ns-anim .module-titolo_sezione h1,
.ns-anim .module-titolo_sezione h2,
.ns-anim .module-titolo_sezione h3,
.ns-anim .module-titolo_sezione h1 + div,
.ns-anim .module-titolo_sezione h2 + div,
.ns-anim .module-titolo_sezione h3 + div,
.ns-anim .module-menu h2,
.ns-anim .title-hero-with-description,
.ns-anim .opacity-change,
.ns-anim .ns-anim-parole,
.ns-anim .module-immagine img,
.ns-anim .ns-card .card-image,
.ns-anim .module-gallery img,
.ns-anim #event-container,
.ns-anim #event-container .button-cta,
.ns-anim #event-menu .col { opacity: 0; }

}

/* .ns-anim-no e' la rinuncia che un redattore mette per dire "lascia stare questo
   blocco": elementi() nel JS la rispetta e non gli assegna mai data-ns-anim, ma le
   regole sopra nascondono per selettore puro, senza eccezione, quindi senza questa
   protezione un elemento dentro .ns-anim-no che corrisponde a uno degli otto
   selettori resterebbe invisibile per sempre. Vale per l'elemento stesso e per i
   suoi discendenti. */
.ns-anim .ns-anim-no,
.ns-anim .ns-anim-no * { opacity: 1 !important; }

/* La maschera: la parola emerge da un bordo netto invece di comparire in dissolvenza.
   `overflow: hidden` sul contenitore, il movimento sul figlio. `inline-block` serve a
   entrambi o la trasformazione non si applica. */
[data-ns-parola] {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
[data-ns-parola] > span {
	display: inline-block;
	will-change: transform;
}

/* Il contenitore della parallasse: taglia ciò che esce, e non cambia il flusso. */
[data-ns-contenitore] {
	overflow: hidden;
	position: relative;
	line-height: 0;
}
[data-ns-contenitore] > img {
	will-change: transform;
}

/* ── Micro-interazioni ──────────────────────────────────────────────────────
   Solo CSS: il puntatore non ha bisogno di JavaScript, e cosi' funzionano anche
   se lo strato di movimento e' spento. */

/* La card evento si solleva e la foto dentro cresce. La foto cresce DENTRO il
   contenitore, che taglia: senza `overflow: hidden` uscirebbe dai bordi. */
.ns-card {
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ns-card .card-image {
	overflow: hidden;
}
.ns-card .card-image img {
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ns-card:hover {
	transform: translateY(-6px);
}
.ns-card:hover .card-image img {
	transform: scale(1.015);
}

/* Il bottone: il colore entra da sinistra invece di comparire. */
.btn-primary {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.btn-primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0.16;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: -1;
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
	transform: scaleX(1);
}

/* I link nel testo: la sottolineatura cresce da sinistra. */
.wysiwyg-content a,
.module-elenco_link a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	text-decoration: none;
}
.wysiwyg-content a:hover,
.wysiwyg-content a:focus-visible,
.module-elenco_link a:hover,
.module-elenco_link a:focus-visible {
	background-size: 100% 1px;
}

/* L'immagine di un modulo immagine. */
.module-immagine {
	overflow: hidden;
}
.module-immagine img {
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.module-immagine:hover img {
	transform: scale(1.01);
}

/* Il focus da tastiera. Oggi non c'e': chi naviga con il Tab non sa dove si trova.

   `!important` sul solo contorno, e con una ragione precisa: Bootstrap azzera il
   contorno (`outline: 0`) su diciassette selettori di classe in
   `css-output/bundle.css` - `.form-control:focus`, `.form-select:focus`,
   `.btn:focus-visible`, `.form-check-input:focus`, `.nav-link:focus-visible`,
   `.accordion-button:focus`, `.page-link:focus`, `.btn-close:focus` e altri.
   Sono specificita' (0,2,0) contro la (0,1,1) delle righe qui sotto, e per giunta
   quel foglio e' accodato DOPO questo: anche pareggiando la specificita' si
   perderebbe per ordine. Misurato sul checkout, la pagina con piu' campi del
   sito: `input[name=billing_first_name]` a fuoco dava `outline: none 0px`, con
   `.form-control:focus { outline: 0 }` di bundle.css a vincere. Enumerare quei
   diciassette selettori con una specificita' piu' alta invecchierebbe al primo
   aggiornamento di Bootstrap; un anello di focus e' invece una garanzia che non
   deve poter essere spenta da un componente. `border-radius` resta senza
   `!important`: non e' una garanzia, e non deve raddrizzare bottoni tondi. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
	border-radius: 2px;
}

/* Chi ha chiesto meno movimento ne riceve meno: niente e' nascosto, niente si muove. */
@media ( prefers-reduced-motion: reduce ) {
	.ns-anim [data-ns-anim] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.ns-card,
	.ns-card .card-image img,
	.btn-primary::before,
	.wysiwyg-content a,
	.module-elenco_link a,
	.module-immagine img {
		transition: none !important;
	}
}
