/*
 * Le regole strutturali (position/height/width/z-index dei 3 container:
 * .hero-scroll-track, .hero-scroll-stage, .hero-scroll-left, .hero-scroll-right)
 * NON stanno più qui: vivono nel pannello "Custom CSS" di ciascun elemento
 * in Elementor (tab Advanced), vedi elementor-custom-css.md nella cartella
 * del plugin per il testo pronto da incollare.
 *
 * Motivo: quel pannello compila le regole con selettore
 * ".elementor-element.elementor-element-<id>" (2 classi), che batte sempre
 * ".e-con" di Elementor (1 classe) per specificità — senza bisogno di
 * !important e senza dipendere dall'ordine di caricamento dei fogli di stile.
 *
 * Qui restano solo le regole sui figli interni al widget Shortcode, che sono
 * markup nostro (non generato/stilizzato da Elementor) e quindi non hanno
 * conflitti di specificità.
 */

/*
 * Il widget Shortcode di Elementor (.elementor-widget-shortcode) e il suo
 * wrapper interno (.elementor-shortcode) sono div con height:auto: siccome
 * il <video> al loro interno è position:absolute (fuori dal flusso), questi
 * wrapper collassano a 0px di altezza. Il video calcola quindi il suo
 * height:100% rispetto a un contenitore alto 0 e sparisce.
 * Diamo loro un'altezza esplicita pari al container DX.
 */
.hero-scroll-right,
.hero-scroll-right .elementor-widget-shortcode,
.hero-scroll-right .elementor-shortcode {
	height: 100%;
}

.hero-scroll-right .thv-random-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback: se JS non è attivo/disponibile, niente animazione ma layout 50/50 resta corretto */
.no-js .hero-scroll-right {
	width: 50%;
}

/*
 * Appena l'espansione parte (classe aggiunta da scroll-effect.js quando
 * --thv-progress supera una soglia minima), il video passa sopra al testo
 * di sinistra invece di restarci sotto. Il container ha già un suo
 * z-index impostato nel Custom CSS di Elementor (2 classi di specificità,
 * vedi elementor-custom-css.md): la nostra classe di stato aggiunge
 * anch'essa 2 classi, quindi pari specificità — vince chi carica per
 * ultimo, non affidabile. !important toglie ogni ambiguità.
 */
.hero-scroll-right.hero-scroll-right--on-top {
	z-index: 3 !important;
}

/*
 * Pulsante muto/audio, aggiunto da audio-toggle.js solo quando il gruppo
 * video ha "Abilita audio" attivo. Posizionato rispetto al container DX
 * (.hero-scroll-right, position: relative/absolute impostato in Elementor),
 * che è il primo antenato posizionato.
 */
/*
 * Il bottone è un cerchio con icona quando a riposo. Quando ha la classe
 * "thv-audio-toggle--hint" (aggiunta da audio-toggle.js per qualche secondo
 * dopo il caricamento, SOLO se il tentativo automatico di attivare l'audio
 * non è riuscito — cosa che succede spesso: i browser bloccano l'audio non
 * richiesto dall'utente per i visitatori senza cronologia di interazione
 * col sito) si allarga a pillola mostrando anche il testo, per farsi notare.
 * Lo stesso allargamento avviene anche al passaggio del mouse, in ogni momento.
 *
 * !important su ogni proprietà critica: Elementor definisce ".elementor-kit-N
 * button" (classe + elemento, specificità superiore alla nostra singola
 * classe) con il suo stile bottone globale (padding 10px 20px, bordi, ecc.),
 * che altrimenti vince e distrugge le dimensioni/il layout di questo bottone.
 */
.thv-audio-toggle {
	position: absolute !important;
	right: 16px !important;
	bottom: 16px !important;
	top: auto !important;
	left: auto !important;
	z-index: 3 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 20px !important;
	background: rgba( 0, 0, 0, 0.55 ) !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	cursor: pointer !important;
	overflow: hidden !important;
	text-align: left !important;
	white-space: nowrap !important;
	transition: width 0.35s ease, background-color 0.2s ease !important;
}

.thv-audio-toggle:hover,
.thv-audio-toggle.thv-audio-toggle--hint {
	width: 190px !important;
	background: rgba( 0, 0, 0, 0.75 ) !important;
}

.thv-audio-toggle__icon {
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

.thv-audio-toggle svg {
	width: 20px !important;
	height: 20px !important;
	fill: currentColor !important;
}

.thv-audio-toggle__label {
	flex: 0 0 auto !important;
	font-size: 13px !important;
	line-height: 40px !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	transition: opacity 0.2s ease !important;
	padding: 0 14px 0 0 !important;
	margin: 0 !important;
	color: #fff !important;
}

.thv-audio-toggle:hover .thv-audio-toggle__label,
.thv-audio-toggle.thv-audio-toggle--hint .thv-audio-toggle__label {
	opacity: 1 !important;
	transition-delay: 0.1s !important;
}

.thv-audio-toggle.thv-audio-toggle--hint {
	animation: thv-audio-pulse 1.8s ease-in-out infinite;
}

@keyframes thv-audio-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0.3 );
	}
	50% {
		box-shadow: 0 0 0 6px rgba( 255, 255, 255, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.thv-audio-toggle.thv-audio-toggle--hint {
		animation: none;
	}
}