/* ==========================================================================
   video.css — il pulsante di avvio sui video che aspettano un clic.
   09/09/2026.

   Sta FUORI dai nove strati comuni di IDEALMEDICA_LC_STRATI, e non e' una
   dimenticanza: gli strati li carica solo una pagina LiveCanvas, mentre uno
   dei due video sta nella home, che e' costruita col builder Avia e di quel
   guscio non prende niente. Questo foglio lo accoda un gancio suo, acceso da
   "<video" nel contenuto — vedi il blocco 3-bis in loader.php.

   Per lo stesso motivo qui dentro non si usano le custom property dei token:
   in home --lc-* non esiste. I due colori sono scritti per esteso, e sono gli
   stessi del badge "Immagine AI" (05-card.css) perche' i due elementi
   convivono sulla stessa immagine.
   ========================================================================== */

/* Il contenitore lo marca il JavaScript. La regola c'e' comunque perche' il
   pulsante e' in posizione assoluta: se il guscio non fosse posizionato,
   andrebbe a cercare il primo antenato che lo e' — che su queste due pagine
   sarebbe la sezione, e il pulsante finirebbe a centro pagina. */
.lc-video-guscio {
	position: relative;
}

.lc-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	/* Sopra il video, sotto il badge "Immagine AI" che sta in un angolo e non
	   si sovrappone mai: nessuno dei due deve rubare il clic all'altro. */
	z-index: 2;
	transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.lc-video-play svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Fondo e anello: gli stessi valori del badge. L'anello non e' decorativo —
   sotto il disco puo' esserci tanto una parete bianca quanto una giacca blu,
   e senza bordo il pulsante sparisce su una delle due. */
.lc-video-play circle {
	fill: rgba(10, 32, 50, .62);
	stroke: rgba(255, 255, 255, .85);
	stroke-width: 3;
}

.lc-video-play path {
	fill: #fff;
}

.lc-video-play:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

/* Il contorno di focus e' esplicito: su tutto il resto del sito i link .btn
   hanno "outline: none" anche con :focus-visible vero (PARTICOLARITA-TEMA §9),
   e qui non si eredita quel difetto. */
.lc-video-play:focus-visible {
	outline: 3px solid #44ade3;
	outline-offset: 3px;
}

/* Mentre il filmato scorre il pulsante se ne va. "visibility: hidden" e non
   la sola opacita': a zero resterebbe cliccabile e raggiungibile col Tab,
   cioe' un comando invisibile in mezzo alla pagina. */
.lc-video-guscio.lc-video-in-corso .lc-video-play {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 575.98px) {
	.lc-video-play {
		width: 58px;
		height: 58px;
	}
}

/* Un pulsante che si ingrandisce sotto il dito e' proprio il moto che questa
   preferenza esiste per fermare. Resta tutto il resto: comparsa, scomparsa e
   riproduzione non dipendono dall'animazione. */
@media (prefers-reduced-motion: reduce) {
	.lc-video-play {
		transition: none;
	}
	.lc-video-play:hover {
		transform: translate(-50%, -50%);
	}
}