/* === css/spotlight.css ===
   Imágenes en blanco y negro que recuperan el color bajo el puntero.
   El overlay gris cubre la imagen y el ratón abre un agujero en su máscara.
   Sin hover (móvil/táctil) la imagen se ve en color normal. */
@property --sr{syntax:"<length>";inherits:true;initial-value:0px}

@media (hover:hover){
	.spotlight{position:relative;--sx:50%;--sy:50%;--sr:0px;transition:--sr .4s ease}
	.spotlight:hover{--sr:190px}
	.spotlight::after{
		content:"";position:absolute;inset:0;pointer-events:none;
		-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);
		-webkit-mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),#0000 0,#0000 55%,#000 100%);
		mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),#0000 0,#0000 55%,#000 100%);
	}
}