/*
 * Ensoul <3 Eva
 * Misure prese dal sito live (evapoles.it, Twenty Twenty-Four).
 * Le dimensioni dei blocchi North sono classi Tailwind con !important che
 * leggono variabili CSS: qui si cambiano le variabili, non le proprietà.
 */

:root {
	--eva-red: var(--wp--preset--color--contrast, #ff0000);
	--eva-red-logo: var(--wp--preset--color--accent-1, #e20e0a);
	--eva-red-dark: var(--wp--preset--color--accent-3, #b20202);
	--eva-bg: var(--wp--preset--color--base, #1c1c1c);
}

/* Su body e non su :root: ensoul-blocks-variables.css del tema arriva dopo e
   ridefinirebbe le stesse variabili su :root */
body {
	/* testo 16,8px / 26px e titoli 40px / 48px, come sul live */
	--text-paragraph-base: 1.05rem;
	--text-paragraph-base--line-height: 1.55;
	--text-heading-base: 40px;
	--text-heading-base--line-height: 1.2;
	/* North aggiunge spaziatura alle lettere: sul sito originale non c'è */
	--tracking-heading: 0;
	--tracking-paragraph: normal;
}

#date,
#contatti,
#bio {
	scroll-margin-top: 0;
}

/* Paragrafi e titoli North: niente margini di default, le distanze le decidono le sezioni */
.wp-block-ensoul-content p,
.wp-site-blocks > header p,
.wp-site-blocks > footer p {
	margin: 0;
}

/* ---------- Logo (hero e barra) ---------- */

/* Il blocco logo si stringe sul suo contenuto e si centra: i max-width in %
   dei figli North lo farebbero collassare a 0, quindi li tolgo qui */
.eva-logo {
	--spacing-container-heading: none;
	--spacing-container-paragraph: none;
}

.eva-logo > div {
	/* @container/inner di North mette container-type: inline-size, che azzera la larghezza intrinseca */
	container-type: normal;
	row-gap: 0;
	width: max-content;
	margin-inline: auto;
	align-items: stretch;
}

/* Crenatura del sito originale: la V si avvicina alla A */
.eva-logo .eva-v {
	margin-left: 2px;
	margin-right: -20px;
}

.eva-logo p,
.eva-logo h1,
.eva-logo h2 {
	text-transform: uppercase;
	white-space: nowrap;
}

/* Riga sopra, allineata all'inizio della E */
.eva-logo p:first-child {
	letter-spacing: 0.6px;
	margin-left: 23px;
	text-align: left;
	position: relative;
	z-index: 1;
}

/* EVA */
.eva-logo h1,
.eva-logo h2 {
	--text-heading-base: 10.5rem;
	--tw-leading: 1.15;
	font-family: var(--wp--preset--font-family--dela-gothic-one);
	font-weight: 700;
	color: var(--eva-red-logo);
	letter-spacing: 0;
	padding: 0 20px;
	margin-top: -40px;
}

.eva-logo h2 a {
	color: inherit;
	text-decoration: none;
}

/* POLES */
.eva-logo p:last-child {
	font-family: var(--wp--preset--font-family--dela-gothic-one);
	--text-paragraph-base: 1.575rem;
	letter-spacing: 42px;
	margin-top: -20px;
	margin-left: 30px;
}

/* Su schermi stretti il logo è al 70% (EVA 7,35rem invece di 10,5): tutte le
   misure in scala, così sopratitolo e POLES restano dove sono sul desktop */
@media (max-width: 600px) {
	.eva-logo h1,
	.eva-logo h2 {
		--text-heading-base: 7.35rem;
		margin-top: -28px;
		padding: 0 14px;
	}

	.eva-logo p:first-child {
		--text-paragraph-base: 11.76px;
		letter-spacing: 0.42px;
		margin-left: 16px;
	}

	.eva-logo p:last-child {
		--text-paragraph-base: 17.64px;
		letter-spacing: 29.4px;
		margin-top: -14px;
		margin-left: 21px;
	}
}

/* ---------- Hero: la foto compare e poi sfuma ---------- */

.eva-hero {
	position: relative;
	overflow: hidden;
}

.eva-hero__img {
	/* a tutto schermo (esce dal contenitore centrale dell'hero); il taglio lo
	   decide il punto focale del blocco */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(100vw - var(--scrollbar-compensation, 0px));
	height: 100%;
	margin-left: calc((100vw - var(--scrollbar-compensation, 0px)) / -2);
	opacity: 0;
	animation: eva-hero-fade 4s ease-in-out 1s forwards;
	pointer-events: none;
}

.eva-hero__img figure {
	width: 100%; /* l'!mx-auto di North in un flex la stringerebbe sull'immagine */
	height: 100%;
}

.eva-hero__img img {
	height: 100%;
}

/* posterizzazione dell'intro in WebGL, sopra le figure (eva.js) */
.eva-hero__poster-gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* versione posterizzata sopra la foto vera, sfumata dall'intro (eva.js) */
.eva-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	object-fit: cover;
}

/* La section annidata è un elemento flex centrato: senza larghezza collassa a 0 */
.eva-hero > div > section {
	width: 100%;
	position: relative;
	z-index: 1;
}

/* Con GSAP attivo eva.js sposta il livello del logo in body (.eva-logo-layer):
   fixed e centrato, la timeline lo porta in alto al centro e lo riduce.
   Sta in body perché il blending agisce solo dentro il proprio contesto di
   sovrapposizione: dentro l'hero si fonderebbe solo con la foto */
.eva-logo-layer {
	mix-blend-mode: difference;
	position: fixed;
	inset: 0 0 auto;
	/* altezza fissa (schermo con la barra del browser visibile): con inset 0 sui
	   telefoni il riquadro cambiava altezza quando la barra appare o sparisce
	   e il logo, centrato, saltava */
	height: 100vh;
	height: 100svh;
	z-index: 101;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.eva-logo-layer .eva-logo > div {
	will-change: transform;
}

/* Il contenitore interno dell'hero ha z-10! di North, che crea un contesto di
   sovrapposizione: senza alzare l'hero, le sezioni dopo coprono il logo fixed */
.eva-has-hero .eva-hero {
	z-index: 101;
	/* sta sopra la barra: senza questo copre i link "date" e "contatti" */
	pointer-events: none;
}

.eva-has-hero .eva-bar {
	z-index: 102;
}

/* Il logo è sempre cliccabile: riporta in cima (eva.js) */
.eva-logo-layer .eva-logo > div {
	pointer-events: auto;
	cursor: pointer;
}

/* La barra resta visibile: i link li fa comparire GSAP, il logo piccolo non serve */
.eva-has-hero .eva-bar {
	opacity: 1;
	visibility: visible;
}

/* visibility e non display: North gli mette block! (display con !important) */
.eva-has-hero .eva-bar .eva-logo--mini {
	visibility: hidden;
}

@keyframes eva-hero-fade {
	0% { opacity: 0.1; }
	51% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.eva-hero__img {
		animation: none;
	}
}

/* ---------- Intro: la foto si scopre a macchia, poi arriva il logo ---------- */

/* Prima che parta eva.js (classe eva-js messa nell'head) foto e logo sono
   nascosti; se lo script non parte, dopo 3s compaiono comunque */
.eva-js .eva-hero__img,
.eva-js .eva-hero .eva-logo {
	opacity: 0;
	animation: eva-failsafe 0.6s ease-out 3s forwards;
}

@keyframes eva-failsafe {
	to { opacity: 1; }
}

/* Con l'intro attiva comandano GSAP e il clipPath (macchia) */
.eva-has-hero .eva-hero__img,
.eva-has-hero .eva-logo-layer .eva-logo {
	opacity: 1;
	animation: none;
}

/* il clipPath della macchia lo applica eva.js in linea (un id per immagine) */

/* Uscita: macchie del colore di fondo che coprono la foto dal centro */
.eva-hole {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--eva-bg);
	pointer-events: none;
}

/* ---------- Barra sticky: logo dell'hero al 50%, senza fondo ---------- */

/* In difference come il logo: rosso sul fondo scuro, nero sulla banda rossa */
.eva-bar {
	mix-blend-mode: difference;
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-out, visibility 0.4s;
	--spacing-container-content-padded: 1340px; /* 1280 + 30px di padding North per lato */
}

.eva-stuck .eva-bar {
	opacity: 1;
	visibility: visible;
}

.eva-bar > div {
	flex-direction: row;
	align-items: flex-start;
	padding-top: 24px;
}

.eva-bar a {
	pointer-events: auto;
	color: var(--eva-red);
	text-decoration: none;
}

.eva-bar > div > p {
	flex: 0 0 auto;
	--text-paragraph-base: 0.85rem;
}

.eva-bar .eva-logo--mini {
	pointer-events: auto;
}

/* il blocco centrale (w-full di North) si restringe: su mobile spingeva
   "contatti" fuori dallo schermo */
.eva-bar > div > div {
	flex: 1 1 0;
	min-width: 0;
}

.eva-logo--mini > div {
	transform: scale(0.5);
	transform-origin: top center;
	margin-top: 0;
	margin-bottom: -50%;
}

/* ---------- Tre foto + citazione ---------- */

.eva-intro {
	--spacing-container-content-padded: 1340px;
	--spacing-columns: 1.2rem;
	--spacing-columns-y: 1.2rem;
	--spacing-container-paragraph: 620px;
}

.eva-intro img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top; /* ritratti: la testa non va tagliata */
}

.eva-intro p {
	--text-paragraph-base: 1.85rem;
	--tw-leading: 1.2;
	margin-inline: auto;
}

/* Foto asimmetriche: proporzioni diverse e partenze sfalsate; eva-parallax.js
   dà a ognuna una velocità diversa allo scroll */
@media (min-width: 768px) {
	.eva-intro .wp-block-ensoul-column:nth-child(1) img {
		aspect-ratio: 2 / 3;
	}

	.eva-intro .wp-block-ensoul-column:nth-child(2) {
		margin-top: 22vh;
	}

	.eva-intro .wp-block-ensoul-column:nth-child(2) img {
		aspect-ratio: 4 / 5;
	}

	.eva-intro .wp-block-ensoul-column:nth-child(3) {
		margin-top: 9vh;
	}

	.eva-intro .wp-block-ensoul-column:nth-child(3) img {
		aspect-ratio: 3 / 4;
	}
}

/* ---------- Tour dates ---------- */

.eva-dates {
	--spacing-container-content-padded: 1350px;
}

.eva-dates h2 {
	white-space: nowrap;
}

/* ---------- Booking (CF7) ---------- */

.eva-booking {
	overflow-x: clip; /* la foto sporge a destra: niente scroll orizzontale */
}

.eva-booking > div {
	align-items: center;
	position: relative;
}

.eva-booking .wpcf7 {
	width: 100%;
	max-width: 466px;
	position: relative;
	z-index: 1; /* sopra la foto */
}

.eva-booking .wp-block-ensoul-heading {
	position: relative;
	z-index: 1;
}

/* Foto dietro il form: centrata sul form e spostata a destra per sporgere.
   Centratura e parallasse le fa GSAP (eva.js), quindi qui niente transform;
   ribaltamento, rotazione e halftone li fa il piano WebGL (eva-curtains.js).
   Senza WebGL ribalta e ruota l'immagine il CSS */
.eva-booking-photo {
	position: absolute;
	top: 58%;
	left: 50%;
	width: min(600px, 88vw);
	/* abbastanza a destra che il form (466px, centrato) non copra Eva, che
	   nella foto ribaltata parte da circa un quarto della larghezza */
	margin-left: 420px;
	z-index: 0;
	pointer-events: none;
}

.eva-booking-photo figure + figure {
	display: none; /* North stampa una figura desktop e una mobile */
}

.eva-booking-photo img {
	display: block;
	width: 100%;
	height: auto;
	transform: scaleX(-1) rotate(-5deg);
}

.eva-booking-gl {
	position: absolute;
	inset: -15%;
	pointer-events: none;
}

@media (max-width: 767px) {
	.eva-booking-photo {
		margin-left: 14vw;
	}
}

.eva-booking .wpcf7 p {
	margin: 0 0 14px;
}

.eva-booking .wpcf7 label {
	display: block;
}

.eva-booking .wpcf7 input:not([type="submit"]),
.eva-booking .wpcf7 textarea {
	width: 100%;
	padding: 14px 20px;
	background: var(--eva-bg); /* pieno: la foto dietro non traspare */
	color: #9c9c9c;
	border: 1px solid #ebebeb;
	border-radius: 0;
	font: inherit;
	font-size: 16px;
	line-height: 28px;
	box-sizing: border-box;
}

.eva-booking .wpcf7 input[type="date"] {
	color-scheme: dark;
}

.eva-booking .wpcf7 input[type="submit"] {
	padding: 11px 28px;
	background: #f4f4f4;
	color: #111111;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
	cursor: pointer;
}

.eva-booking .wpcf7 input[type="submit"]:hover {
	opacity: 0.85;
}

/* ---------- Bio ---------- */

.eva-bio {
	/* testo della bio a 19px */
	--text-paragraph-base: 19px;
	--spacing-container-content-padded: 910px;
	--spacing-container-content: 850px;
	--spacing-container-paragraph: 100%;
	--spacing-container-heading: 100%;
}

/* fondo nero pieno (anche per i bordi curvi delle fasce video: eva-arcs.js) */
.eva-bio {
	--eva-bio-bg: #000;
	background: var(--eva-bio-bg);
}

.eva-bio .eva-dim {
	color: var(--eva-red-dark);
}

.eva-video--4-3 iframe,
.eva-video--4-3 .eva-yt {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* Anteprima YouTube (il player si carica al clic: eva-yt.js) */
.eva-yt {
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 32px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
}

.eva-yt img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* retina WebGL dell'anteprima (eva-curtains.js), sotto il pulsante play */
.eva-yt-gl {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.eva-yt__play {
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--eva-bg);
	transition: scale 0.2s ease-out;
}

.eva-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--eva-red);
}

.eva-yt:hover .eva-yt__play,
.eva-yt:focus-visible .eva-yt__play {
	scale: 1.1;
}

/* ---------- Banda rossa ---------- */

.eva-quote {
	--spacing-container-paragraph: 620px;
	/* rientro di 20px dai lati come sul live: un bordo del colore di fondo
	   non sposta la sezione full-width (un margin la spingerebbe a destra) */
	border-inline: 20px solid var(--eva-bg);
	box-sizing: border-box;
}

.eva-quote p {
	margin-inline: auto;
	--text-paragraph-base: 40px;
	--text-paragraph-base--line-height: 1.2;
	font-family: var(--wp--preset--font-family--cardo);
}

/* ---------- Footer ---------- */

/* Il blockGap di TT25 lascia una striscia di sfondo sopra il footer */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.eva-footer__video {
	width: 790px; /* 527px + 50% */
	max-width: 100%;
}

.eva-footer__video .video-content {
	width: 100%; /* North mette w-fit ai video caricati: resterebbero a 480px */
}

.eva-footer__video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* North stampa un <video> desktop e uno mobile, ma md:hidden non è nel suo CSS
   compilato e si vedrebbero tutti e due: il file è lo stesso, resta il primo */
.eva-footer__video video + video {
	display: none;
}

.eva-footer a {
	color: var(--eva-red);
	text-decoration: underline;
}

/* ---------- curtains.js: immagini e video in WebGL ---------- */

/* Canvas sopra i contenuti (le sezioni hanno z-10 di North) ma sotto il logo
   fisso (101) e la barra (102) */
.eva-curtains {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

/* Quando il piano WebGL è pronto, l'elemento originale resta solo per il layout */
.eva-plane-ready img,
.eva-plane-ready video,
.eva-intro-done .eva-hero-gl img {
	opacity: 0;
}

/* ---------- Testi parola per parola ---------- */

/* Finché eva-words.js non ha diviso le parole (classe eva-words messa
   nell'head), i testi restano nascosti; se lo script non parte, dopo 3s
   compaiono comunque */
.eva-words .wp-block-ensoul-content p.font-paragraph,
.eva-words .wp-block-ensoul-content .wp-block-ensoul-heading,
.eva-words .eva-footer p {
	opacity: 0;
	animation: eva-failsafe 0.6s ease-out 3s forwards;
}

/* Il logo dell'hero non va nascosto qui (ha la sua intro), e nemmeno i social
   del footer (non animati) */
.eva-words .eva-hero .wp-block-ensoul-heading,
.eva-words .eva-hero p.font-paragraph,
.eva-words .eva-footer__social p {
	opacity: 1;
	animation: none;
}

.eva-word {
	display: inline-block;
}

/* Lettere del titolo delle date, piegate da eva-arcs.js con i bordi rossi */
.eva-char {
	display: inline-block;
	transform-origin: center;
}

/* La sottolineatura di un link non arriva agli inline-block al suo interno:
   le parole divise da eva-words.js la ereditano esplicitamente */
a .eva-word {
	text-decoration: inherit;
}

/* Elemento di riferimento della scia del mouse (flowmap): a schermo intero,
   invisibile, serve solo a curtains per dimensionare il piano */
.eva-flowmap {
	position: fixed;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Campi del booking: entrano in sequenza (eva-words.js) */
.eva-words .eva-booking .wpcf7 form > p {
	opacity: 0;
	animation: eva-failsafe 0.6s ease-out 3s forwards;
}

/* ---------- "please scroll" in fondo all'hero ---------- */

#eva-scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 40px;
	/* sui telefoni l'hero è alto 100vh (barre del browser nascoste): con le
	   barre visibili il fondo dell'hero è coperto, quindi si sale della
	   differenza tra viewport grande e piccolo (0 sul desktop) */
	bottom: calc(40px + 100vh - 100svh);
	translate: -50% 0;
	z-index: 2;
	--text-paragraph-base: 0.8rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--eva-red);
}

#eva-scroll-hint span {
	display: inline-block;
	animation: eva-hint-bob 2.4s ease-in-out infinite;
}

@keyframes eva-hint-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* nascosto finché l'intro non lo fa comparire (sicurezza a 3s se il JS non parte) */
.eva-js #eva-scroll-hint {
	opacity: 0;
	animation: eva-failsafe 0.6s ease-out 3s forwards;
}

.eva-has-hero #eva-scroll-hint {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	#eva-scroll-hint span {
		animation: none;
	}
}

/* ---------- TOUR DATES: titolo sticky ---------- */

/* La colonna del titolo si allunga quanto l'elenco, il titolo resta fermo a
   metà schermo mentre scorrono le date (0.6em = metà dell'altezza della riga,
   line-height 1.2) */
.eva-dates .ensoul-columns-block {
	align-items: stretch;
}

.eva-dates .wp-block-ensoul-column:first-child .wp-block-ensoul-heading {
	position: sticky;
	top: calc(50vh - 0.6em);
}

/* ---------- Video ---------- */

.eva-video iframe,
.eva-video video {
	border-radius: 32px;
}

/* ---------- Spazi verticali ---------- */

/* Tutti gli spazi verticali dentro le sezioni sono spacer North (altezza
   personalizzata, uguale ovunque) modificabili da Gutenberg: il gap automatico
   tra i blocchi dei contenitori North va a zero */
.wp-block-ensoul-content .wp-block-ensoul-spacing-wrapper > div,
.eva-footer > div {
	row-gap: 0;
}

/* ---------- Dela Gothic One: più spazio tra le parole ---------- */

/* I titoli sono in Dela Gothic One (stili globali): spazi più larghi.
   Escluso il luogo delle date, che è un h3 in Epilogue */
:is(h1, h2, h3, h4, h5, h6, .wp-block-ensoul-heading):not(.eva-tour__place) {
	word-spacing: 0.2em;
}

/* ---------- Footer: Instagram e Facebook ai due lati, 10px dal fondo ---------- */

.eva-footer__social {
	position: absolute;
	left: 0;
	right: 0;
	/* stessa distanza dal bordo del testo del menu in alto (27,5px) */
	bottom: 27.5px;
	/* allineati a "date" e "contatti" della barra: stessa larghezza (1280 +
	   30px per lato) e stesso padding, che qui North non mette */
	--spacing-container-content-padded: 1340px;
	--spacing-container-content: 1340px;
}

/* interlinea 1: il bordo basso del testo cade proprio alla distanza indicata.
   Stessa grandezza delle voci del menu, senza sottolineatura */
.eva-footer__social p {
	--tw-leading: 1;
	--text-paragraph-base: 0.85rem;
}

/* instagram e facebook senza sottolineatura; "Ensoul" del credito resta sottolineato */
.eva-footer .eva-footer__social p:first-child a,
.eva-footer .eva-footer__social p:last-child a {
	text-decoration: none;
}

/* Easter egg: il Positive Possum spunta sopra "friendly". È un elemento in
   body creato da eva-egg.js (sopra il canvas WebGL); l'immagine arriva dalla
   libreria media, url passato da PHP in --eva-possum */
.eva-possum-egg {
	cursor: default;
}

.eva-possum-pop {
	position: fixed;
	z-index: 103; /* sopra il canvas WebGL (50), il logo (101) e la barra (102) */
	width: 180px;
	aspect-ratio: 1170 / 1158;
	background: var(--eva-possum) center / cover no-repeat;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	opacity: 0;
	/* proprietà separate: rotate (ondeggiamento) e left li muove eva-egg.js
	   a ogni frame, senza transizione; perno alla base, appeso alla parola */
	translate: -50% -100%;
	rotate: -4deg;
	scale: 0.9;
	transform-origin: 50% 100%;
	transition: opacity 0.25s ease, translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.eva-possum-pop.is-visible {
	opacity: 1;
	translate: -50% calc(-100% - 12px);
	scale: 1;
}

.eva-footer__social > div {
	padding-inline: 30px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	column-gap: 24px;
}

.eva-footer__social > div > p:last-child {
	justify-self: end;
}

/* ---------- Bio: fascia rossa dietro i video ---------- */

/* Dentro la bio (stretta) il "full" di North non scatta e il contenitore ha
   w-full! (width con !important): il rosso a tutta finestra lo disegna uno
   pseudo-elemento dietro, il video resta largo come la colonna */
.eva-video-band {
	position: relative;
	isolation: isolate;
}

/* sborda da entrambi i lati (il contenitore della bio non è centrato al
   pixel sulla pagina) e la sezione lo taglia ai bordi della finestra */
.eva-bio {
	overflow-x: clip;
}

.eva-video-band::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background: var(--wp--preset--color--contrast, #ff0000);
	z-index: -1;
}

/* ---------- Bordi curvi delle sezioni rosse (eva-arcs.js) ---------- */

/* Lenti SVG sul bordo alto e basso: sopra il fondo della sezione, sotto i
   contenuti (che stanno nel contenitore z-10 di North) */
.eva-arc {
	position: absolute;
	height: 120px; /* 2 x ROOM in eva-arcs.js */
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.eva-arc--top {
	top: -60px;
}

.eva-arc--bottom {
	bottom: -60px;
}

/* ---------- Bio: foto dietro il titolo ---------- */

/* i contenitori North annidati nella bio sono elementi flex: senza larghezza
   si stringono sul contenuto (titolo a una parola per riga, foto a 0) */
.eva-bio > div > section {
	width: 100%;
	/* North le tira a sinistra col margine negativo del padding: su mobile
	   (padding 30px) la fascia video finiva spostata di 30px a sinistra */
	margin-inline: 0;
}

.eva-bio-head > div {
	position: relative;
}

/* ruotata di qualche grado in senso antiorario, dietro il testo; compare con
   la macchia liquida (eva.js), finché lo script non parte resta nascosta */
.eva-bio-photo {
	position: absolute;
	top: 50%;
	/* centro sul bordo sinistro del testo: metà foto sporge a sinistra */
	left: 0;
	z-index: 0;
	width: 380px;
	max-width: 70%;
	transform: translate(-50%, -50%) rotate(-6deg);
	visibility: hidden;
	pointer-events: none;
}

/* sul desktop la foto sta 140px più a sinistra; su mobile, dove è già a
   metà fuori dal bordo, resterebbe quasi tutta fuori schermo */
@media (min-width: 768px) {
	.eva-bio-photo {
		left: -140px;
	}
}

.eva-bio-photo figure + figure {
	display: none; /* North stampa una figura desktop e una mobile: basta la prima */
}

/* canvas WebGL della foto (eva-curtains.js): più grande della foto per
   contenerne gli angoli quando la rotazione passa al piano */
.eva-bio-gl {
	position: absolute;
	inset: -12%;
	pointer-events: none;
}

.eva-bio-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.eva-bio-head h3 {
	position: relative;
	z-index: 1;
	/* niente parole sole a fine riga ("A", "LE") sulle colonne strette */
	text-wrap: pretty;
}

/* senza GSAP (eva.js non parte) la foto si vede subito, senza macchia */
html:not(.eva-js):not(.eva-has-hero) .eva-bio-photo {
	visibility: visible;
}

/* titoli dei video: a tutta larghezza della fascia, così il centrato funziona */
.eva-video-band .wp-block-ensoul-heading {
	align-self: stretch;
	width: 100%;
}

/* pezzi del logo animati in stagger all'entrata (eva.js) */
.eva-logo-piece {
	display: inline-block;
}

/* su mobile la foto della bio torna centrata sul titolo */
@media (max-width: 767px) {
	.eva-bio-photo {
		left: 50%;
	}

	/* titoli a 40px: su telefoni stretti (360px, Galaxy S23) parole come
	   "Rezophonic" o "dates" uscivano dallo schermo */
	body {
		--text-heading-base: min(40px, 9vw);
	}

	/* parole lunghe (SPERIMENTARE, POTENZIALITÀ) a 40px uscivano dallo schermo */
	.eva-bio-head {
		--text-heading-base: min(40px, 6.4vw);
	}

	/* "Eppure sarebbe ingiusto ingabbiare…" */
	.eva-intro p {
		--text-paragraph-base: min(1.85rem, 6.6vw);
	}
}

/* ---------- Accessibilità ---------- */

/* Focus da tastiera sempre visibile, nel colore del testo */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* "Salta alle date": fuori schermo finché non prende il focus */
.eva-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--eva-bg);
	color: var(--eva-red);
	translate: 0 -200%;
}

.eva-skip:focus {
	translate: 0 0;
}

/* Badge reCAPTCHA nascosto: lo stile inline di Google imposta display ma non
   visibility, quindi basta questo. Google lo consente solo con la dicitura
   vicino al form (aggiunta da ensoul-eva.php) */
.grecaptcha-badge {
	visibility: hidden;
}

.eva-recaptcha-note {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.8;
}

.eva-recaptcha-note a {
	color: inherit;
}