.spotlight-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.spotlight-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(var(--spotlight-size) var(--spotlight-size) at var(--mouse-x, 50%) var(--mouse-y, 50%), hsla(var(--spotlight-color), var(--spotlight-opacity)), transparent 100%);
	opacity: 0;
	transition: var(--spotlight-transition);
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}

.spotlight-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(calc(var(--spotlight-size) * .8) calc(var(--spotlight-size) * .8) at var(--mouse-x, 50%) var(--mouse-y, 50%), hsla(var(--spotlight-color), var(--spotlight-border-opacity)), transparent 100%);
	border-radius: inherit;
	opacity: 0;
	transition: var(--spotlight-transition);
	pointer-events: none;
	z-index: 0;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: 2px;
}

.spotlight-card:hover::after, .spotlight-card:hover::before {
	opacity: 1;
}

.spotlight-card-content {
	position: relative;
	z-index: 2;
	padding: 24px;
	height: 100%;
}

.spotlight-card--border, .spotlight-card[data-variant=border] {
	--spotlight-opacity: 0;
}

.spotlight-card--border::before, .spotlight-card[data-variant=border]::before {
	display: none;
}

.spotlight-card--border::after, .spotlight-card[data-variant=border]::after {
	--spotlight-border-opacity: .8;
	padding: 2px;
}

.spotlight-card--gradient::before, .spotlight-card[data-variant=gradient]::before {
	background: radial-gradient(var(--spotlight-size) var(--spotlight-size) at var(--mouse-x, 50%) var(--mouse-y, 50%), hsla(var(--spotlight-gradient-1), var(--spotlight-opacity)), hsla(var(--spotlight-gradient-2), calc(var(--spotlight-opacity) * .5)), transparent 100%);
}

.spotlight-card--gradient::after, .spotlight-card[data-variant=gradient]::after {
	background: radial-gradient(calc(var(--spotlight-size) * .8) calc(var(--spotlight-size) * .8) at var(--mouse-x, 50%) var(--mouse-y, 50%), hsla(var(--spotlight-gradient-1), var(--spotlight-border-opacity)), hsla(var(--spotlight-gradient-2), calc(var(--spotlight-border-opacity) * .7)), transparent 100%);
}

.spotlight-card--gradient-border::before, .spotlight-card[data-variant=gradient-border]::before {
	display: none;
}

.spotlight-card--gradient-border::after, .spotlight-card[data-variant=gradient-border]::after {
	background: radial-gradient(calc(var(--spotlight-size) * .8) calc(var(--spotlight-size) * .8) at var(--mouse-x, 50%) var(--mouse-y, 50%), hsla(var(--spotlight-gradient-1), .9), hsla(var(--spotlight-gradient-2), .7), transparent 100%);
	padding: 2px;
}

.spotlight-card[data-size=sm] {
	--spotlight-size: 200px;
}

.spotlight-card[data-size=md] {
	--spotlight-size: 350px;
}

.spotlight-card[data-size=lg] {
	--spotlight-size: 500px;
}

.spotlight-card[data-size=xl] {
	--spotlight-size: 700px;
}

.spotlight-card[data-intensity=low] {
	--spotlight-opacity: .08;
	--spotlight-border-opacity: .25;
}

.spotlight-card[data-intensity=medium] {
	--spotlight-opacity: .15;
	--spotlight-border-opacity: .5;
}

.spotlight-card[data-intensity=high] {
	--spotlight-opacity: .25;
	--spotlight-border-opacity: .75;
}

.spotlight-card--autoplay, .spotlight-card[data-autoplay=true] {
	--mouse-x: 50%;
	--mouse-y: 50%;
}

.spotlight-card--autoplay::after, .spotlight-card--autoplay::before, .spotlight-card--proximity::after, .spotlight-card--proximity::before, .spotlight-card[data-autoplay=true]::after, .spotlight-card[data-autoplay=true]::before, .spotlight-card[data-mode=proximity]::after, .spotlight-card[data-mode=proximity]::before {
	opacity: 1;
}

.spotlight-card-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.spotlight-card--disabled::after, .spotlight-card--disabled::before, .spotlight-card[data-disabled=true]::after, .spotlight-card[data-disabled=true]::before {
	display: none;
}

.spotlight-card:focus-visible {
	outline: 2px solid hsla(var(--spotlight-color), .8);
	outline-offset: 2px;
}

.spotlight-card:focus-visible::after, .spotlight-card:focus-visible::before {
	opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
	.spotlight-card::after, .spotlight-card::before {
		transition: none;
	}
	
	.spotlight-card--autoplay::after, .spotlight-card--autoplay::before, .spotlight-card[data-autoplay=true]::after, .spotlight-card[data-autoplay=true]::before {
		animation: none;
		opacity: 1;
		--mouse-x: 50%;
		--mouse-y: 50%;
	}
}