/*
 * DaisyUI-style 3D hover cards — featured product gallery images only.
 * https://daisyui.com/components/hover-3d/
 */

.ps-featured-bento .ps-hover-3d {
	--ps-hover-3d-transform: 0, 0;
	--ps-hover-3d-shadow: 0rem 0rem;
	--ps-hover-3d-ease: linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
	display: grid;
	width: 100%;
	perspective: 75rem;
	filter:
		drop-shadow(var(--ps-hover-3d-shadow) 0.1rem rgb(0 0 0 / 2%))
		drop-shadow(var(--ps-hover-3d-shadow) 0.2rem rgb(0 0 0 / 2%))
		drop-shadow(var(--ps-hover-3d-shadow) 0.3rem rgb(0 0 0 / 2%))
		drop-shadow(var(--ps-hover-3d-shadow) 0.4rem rgb(0 0 0 / 2%));
	transition: filter ease-out 400ms;
}

.ps-featured-bento .ps-hover-3d > :nth-child(n + 2) {
	isolation: isolate;
	z-index: 1;
}

.ps-featured-bento .ps-hover-3d > :first-child {
	position: relative;
	overflow: hidden;
	grid-area: 1 / 1 / 4 / 4;
	transform: rotate3d(var(--ps-hover-3d-transform), 0, 10deg);
	transition:
		transform var(--ps-hover-3d-ease) 500ms,
		scale var(--ps-hover-3d-ease) 500ms,
		outline-color ease-out 500ms;
	outline: 0.5px solid transparent;
	outline-offset: -1px;
}

.ps-featured-bento .ps-hover-3d:hover {
	--ps-hover-3d-ease: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
}

.ps-featured-bento .ps-hover-3d:hover > :first-child {
	outline-color: rgb(255 255 255 / 7%);
	scale: 1.05;
}

.ps-featured-bento .ps-hover-3d > :nth-child(n + 2) {
	scale: 1.2;
}

.ps-featured-bento .ps-hover-3d > :nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
.ps-featured-bento .ps-hover-3d > :nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
.ps-featured-bento .ps-hover-3d > :nth-child(4) { grid-area: 1 / 3 / 2 / 4; }
.ps-featured-bento .ps-hover-3d > :nth-child(5) { grid-area: 2 / 1 / 3 / 2; }
.ps-featured-bento .ps-hover-3d > :nth-child(6) { grid-area: 2 / 3 / 3 / 4; }
.ps-featured-bento .ps-hover-3d > :nth-child(7) { grid-area: 3 / 1 / 4 / 2; }
.ps-featured-bento .ps-hover-3d > :nth-child(8) { grid-area: 3 / 2 / 4 / 3; }
.ps-featured-bento .ps-hover-3d > :nth-child(9) { grid-area: 3 / 3 / 4 / 4; }

.ps-featured-bento .ps-hover-3d:has(> :nth-child(2):hover) {
	--ps-hover-3d-transform: -1, 1;
	--ps-hover-3d-shadow: -0.5rem -0.5rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(3):hover) {
	--ps-hover-3d-transform: -1, 0;
	--ps-hover-3d-shadow: 0rem -0.5rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(4):hover) {
	--ps-hover-3d-transform: -1, -1;
	--ps-hover-3d-shadow: 0.5rem -0.5rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(5):hover) {
	--ps-hover-3d-transform: 0, 1;
	--ps-hover-3d-shadow: -0.5rem 0rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(6):hover) {
	--ps-hover-3d-transform: 0, -1;
	--ps-hover-3d-shadow: 0.5rem 0rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(7):hover) {
	--ps-hover-3d-transform: 1, 1;
	--ps-hover-3d-shadow: -0.5rem 0.5rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(8):hover) {
	--ps-hover-3d-transform: 1, 0;
	--ps-hover-3d-shadow: 0rem 0.5rem;
}

.ps-featured-bento .ps-hover-3d:has(> :nth-child(9):hover) {
	--ps-hover-3d-transform: 1, -1;
	--ps-hover-3d-shadow: 0.5rem 0.5rem;
}

.ps-featured-bento .ps-hover-3d__zone {
	margin: 0;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ps-featured-bento .ps-hover-3d,
	.ps-featured-bento .ps-hover-3d > :first-child {
		transition: none !important;
		filter: none !important;
	}

	.ps-featured-bento .ps-hover-3d > :first-child {
		transform: none !important;
		scale: 1 !important;
	}
}