/* Product card "light-up" hover effect (lamps). Points set in admin: inc/product-light.php */
.product-card__zoom {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 285 / 320;
	transform-origin: 50% 50%;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-card__zoom > .product-card__image {
	display: block;
	height: 100%;
	transition: filter 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card__lights {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Core: soft warm bulb, no hard white spot */
.product-card__glow {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	mix-blend-mode: screen;
	opacity: 0;
	scale: 0.85;
	background: radial-gradient(
		circle,
		rgba(255, 250, 240, 0.7) 0%,
		color-mix(in srgb, var(--glow, #ffb347) 75%, #fff) 16%,
		color-mix(in srgb, var(--glow, #ffb347) 42%, transparent) 40%,
		color-mix(in srgb, var(--glow, #ffb347) 12%, transparent) 62%,
		transparent 76%
	);
	filter: blur(3px);
	/* leaving: dim a little faster than it warmed up */
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.6, 1), scale 0.9s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Halo: wide, faint light spilling onto the wall / floor; blooms slower than the core */
.product-card__glow::before {
	content: '';
	position: absolute;
	inset: -150%;
	border-radius: 50%;
	opacity: 0;
	scale: 0.75;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--glow, #ffb347) 34%, transparent) 0%,
		color-mix(in srgb, var(--glow, #ffb347) 16%, transparent) 30%,
		color-mix(in srgb, var(--glow, #ffb347) 5%, transparent) 52%,
		transparent 70%
	);
	transition: opacity 1s cubic-bezier(0.4, 0, 0.6, 1), scale 1.4s cubic-bezier(0.4, 0, 0.6, 1);
}

@media (hover: hover) {
	.product-card:hover .product-card__zoom > .product-card__image,
	.product-card:focus-visible .product-card__zoom > .product-card__image {
		/* dim the studio light so the lamp reads as "on" */
		filter: brightness(0.82) contrast(1.05) saturate(1.04);
	}

	.product-card:hover .product-card__glow,
	.product-card:focus-visible .product-card__glow {
		opacity: var(--glow-i, 1);
		scale: 1;
		/* turning on: gentle, dimmer-like ramp */
		transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), scale 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.product-card:hover .product-card__glow::before,
	.product-card:focus-visible .product-card__glow::before {
		opacity: 1;
		scale: 1;
		transition: opacity 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s, scale 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

.product-card:hover .product-card__zoom,
.product-card:focus-visible .product-card__zoom {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.product-card__zoom,
	.product-card__zoom > .product-card__image,
	.product-card__glow,
	.product-card__glow::before {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}