/* =====================================================================
   Products page — premium 3D layer (js/product3d.js)
   Scoped under html.product-3d (added only when motion is allowed).
   ===================================================================== */

/* ---- Spotlight: one 3D space from the container down to the icon ----
   container (perspective) > stage (scroll + mouse tilt) > slide (cover-flow
   position) > visual / content (depth layers) > icon (extruded block).
   Every level keeps preserve-3d so the depths stay real. */
.product-3d .product-spotlight .container {
	perspective: 1800px;
	perspective-origin: 50% 40%;
}

.product-3d .spotlight-stage {
	perspective: none;
	transform-style: preserve-3d;
	transform: rotateX(var(--sp-rx, 0deg)) rotateY(var(--sp-ry, 0deg));
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glass blur would flatten the 3D children, and a see-through card would
   show the neighbours behind it, so the slide gets a solid surface (the
   dark theme's own surface colour already is). */
.product-3d .spotlight-slide {
	backdrop-filter: none;
	background: linear-gradient(135deg, #ffffff, #f4f8ff);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.9s;
}

/* Cover-flow: the neighbours stay in view, turned toward the centre.
   All positions share one function list so they interpolate cleanly;
   the rest wait far back in the middle. */
.product-3d .spotlight-slide {
	transform: translateX(0) translateZ(-900px) rotateY(0deg);
}

.product-3d .spotlight-slide.is-prev,
.product-3d .spotlight-slide.is-next {
	visibility: visible;
	opacity: 0.4;
	pointer-events: none;
}

.product-3d .spotlight-slide.is-prev {
	transform: translateX(-62%) translateZ(-480px) rotateY(50deg);
}

.product-3d .spotlight-slide.is-next {
	transform: translateX(62%) translateZ(-480px) rotateY(-50deg);
}

.product-3d .spotlight-slide.active {
	transform: translateX(0) translateZ(0) rotateY(0deg);
	z-index: 2;
}

.product-3d .spotlight-visual,
.product-3d .spotlight-content {
	transform-style: preserve-3d;
}

.product-3d .spotlight-visual {
	transform: translateZ(70px);
}

.product-3d .spotlight-content {
	transform: translateZ(35px);
}

.product-3d .spotlight-features {
	transform: translateZ(25px);
}

/* Content cascades in whenever a slide becomes active. */
.product-3d .spotlight-slide.active .spotlight-content > * {
	animation: spot-content-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-3d .spotlight-slide.active .spotlight-content > :nth-child(1) { animation-delay: 0.15s; }
.product-3d .spotlight-slide.active .spotlight-content > :nth-child(2) { animation-delay: 0.23s; }
.product-3d .spotlight-slide.active .spotlight-content > :nth-child(3) { animation-delay: 0.31s; }
.product-3d .spotlight-slide.active .spotlight-content > :nth-child(4) { animation-delay: 0.39s; }
.product-3d .spotlight-slide.active .spotlight-content > :nth-child(5) { animation-delay: 0.47s; }

@keyframes spot-content-in {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, -120px) rotateY(-25deg);
	}
}

/* Feature chips flip in one by one. */
.product-3d .spotlight-slide.active .spotlight-feature-chip {
	display: inline-block;
	animation: spot-chip-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-3d .spotlight-slide.active .spotlight-feature-chip:nth-child(1) { animation-delay: 0.5s; }
.product-3d .spotlight-slide.active .spotlight-feature-chip:nth-child(2) { animation-delay: 0.6s; }
.product-3d .spotlight-slide.active .spotlight-feature-chip:nth-child(3) { animation-delay: 0.7s; }

@keyframes spot-chip-in {
	from {
		opacity: 0;
		transform: rotateX(-90deg);
	}
}

/* ---- Extruded icon block on a holographic pedestal ---- */
.product-3d .spotlight-icon,
.product-3d .spotlight-stage:hover .spotlight-icon {
	transform-style: preserve-3d;
	transform: translateZ(40px);
	animation: spot-icon-swing 7s ease-in-out infinite alternate;
	transition: none;
}

@keyframes spot-icon-swing {
	0% { rotate: y -30deg; }
	100% { rotate: y 30deg; }
}

.product-3d .spotlight-slide.active .spotlight-icon {
	animation: spot-icon-arrive 1.1s cubic-bezier(0.16, 1, 0.3, 1) both, spot-icon-swing 7s 1.1s ease-in-out infinite alternate;
}

@keyframes spot-icon-arrive {
	from {
		rotate: y -210deg;
		translate: 0 -60px 0;
	}
	to {
		rotate: y -30deg;
		translate: 0 0 0;
	}
}

.product-3d .spotlight-icon i {
	transform: translateZ(26px);
	text-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

/* Depth slices behind the face (added by js/product3d.js) give the
   block real thickness as it turns. */
.spot-icon-layer {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	filter: brightness(calc(0.95 - var(--l) * 0.04));
	transform: translateZ(calc(var(--l) * -3px));
	pointer-events: none;
}

.spot-pedestal {
	position: absolute;
	left: 50%;
	bottom: -95px;
	width: 260px;
	height: 260px;
	margin-left: -130px;
	transform-style: preserve-3d;
	transform: rotateX(78deg);
	pointer-events: none;
}

.spot-pedestal span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px dashed rgba(56, 189, 248, 0.55);
	box-shadow: 0 0 22px rgba(56, 189, 248, 0.35), inset 0 0 22px rgba(56, 189, 248, 0.25);
	animation: spot-ring-spin 14s linear infinite;
}

.spot-pedestal span:nth-child(2) {
	inset: 34px;
	border: 2px solid rgba(155, 81, 224, 0.5);
	border-top-color: transparent;
	border-bottom-color: transparent;
	animation-duration: 8s;
	animation-direction: reverse;
}

.spot-pedestal span:nth-child(3) {
	inset: 78px;
	border: none;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.55), rgba(37, 99, 235, 0.15) 55%, transparent 70%);
	box-shadow: none;
	animation: spot-core-pulse 2.8s ease-in-out infinite;
}

@keyframes spot-ring-spin {
	to { transform: rotate(360deg); }
}

@keyframes spot-core-pulse {
	0%, 100% { opacity: 0.6; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.1); }
}

/* Light beam from the pedestal up to the icon. */
.spot-beam {
	position: absolute;
	left: 50%;
	bottom: 34px;
	width: 160px;
	height: 200px;
	margin-left: -80px;
	background: linear-gradient(0deg, rgba(56, 189, 248, 0.35), rgba(56, 189, 248, 0));
	clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
	filter: blur(2px);
	animation: spot-beam-flicker 3.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes spot-beam-flicker {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.95; }
}

/* Particles orbiting the icon on tilted paths. */
.spot-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 250px;
	height: 250px;
	margin: -125px 0 0 -125px;
	transform-style: preserve-3d;
	transform: rotateX(68deg) rotateY(var(--tilt));
	pointer-events: none;
}

.spot-orbit i {
	position: absolute;
	inset: 0;
	animation: spot-ring-spin var(--speed) linear infinite;
	animation-delay: var(--delay);
	transform-style: preserve-3d;
}

.spot-orbit i::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 8px #67e8f9, 0 0 18px #2563eb;
	transform: rotateX(-68deg);
}

/* ---- Product grid: cards deal in from a tilted floor ---- */
.product-3d .luxury-products .row > div {
	perspective: 1200px;
}

.product-3d .luxury-products .luxury-card {
	rotate: x var(--deal-rx, 0deg);
	translate: var(--deal-x, 0px) 0 var(--deal-z, 0px);
	transform-origin: 50% 100%;
}

/* Icon spins like a coin and lifts off the card on hover. */
.product-3d .luxury-card .luxury-icon {
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-3d .luxury-card:hover .luxury-icon {
	transform: translateZ(45px) rotateY(360deg) scale(1.08);
}

/* Jumping to a card from a category pill spins it once in 3D. */
.product-3d .luxury-card.product-card-highlight {
	animation: product-card-highlight-pulse 1.2s ease, product-card-spin 1s 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes product-card-spin {
	from { rotate: y 0deg; }
	to { rotate: y 360deg; }
}

/* Category pills lift toward the viewer. */
.product-3d .product-category-nav {
	perspective: 600px;
}

.product-3d .category-pill {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.product-3d .category-pill:hover,
.product-3d .category-pill.active {
	transform: translateZ(40px) rotateX(12deg);
	box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22);
}

/* ---- Small screens: one slide at a time, lighter effects ---- */
@media (max-width: 992px) {
	.product-3d .spotlight-slide.is-prev,
	.product-3d .spotlight-slide.is-next {
		visibility: hidden;
		opacity: 0;
	}

	.product-3d .spot-orbit {
		width: 190px;
		height: 190px;
		margin: -95px 0 0 -95px;
	}

	.product-3d .spot-pedestal {
		width: 200px;
		height: 200px;
		margin-left: -100px;
		bottom: -75px;
	}

	.product-3d .spot-beam {
		bottom: 24px;
		height: 150px;
	}
}