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

/* ---- Services grid cover-flow ----
   Depth and fade use the separate "translate"/"opacity" properties; the
   two-axis tilt goes on "transform" only once the reveal animation has
   finished and only while the card isn't hovered (the hover tilt in
   tilt3d.js sets its own inline transform). */
.services-3d .services-fan .premium-card-white {
	translate: 0 0 var(--fan-z, 0px);
	opacity: var(--fan-o, 1);
	transition: translate 0.2s linear, opacity 0.2s linear;
}

.services-3d .services-fan .premium-card-white.revealed:not(:hover) {
	transform: rotateX(var(--fan-rx, 0deg)) rotateY(var(--fan-ry, 0deg));
	transition: transform 0.2s linear, translate 0.2s linear, opacity 0.2s linear, box-shadow 0.35s ease;
}

/* ---- Card hover: coin-spin icon + photo pops forward ---- */
.services-3d .service-card-icon-badge {
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transform-style: preserve-3d;
}

.services-3d .premium-card-white:hover .service-card-icon-badge {
	transform: perspective(400px) translateZ(40px) rotateY(360deg) scale(1.12);
}

.services-3d .premium-card-white .premium-img img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-3d .premium-card-white:hover .premium-img img {
	transform: perspective(700px) translateZ(36px) scale(1.04) !important;
}

/* ---- "Learn More" popup swings open in 3D ---- */
.services-3d .service-modal-overlay {
	perspective: 1400px;
}

.services-3d .service-modal-overlay .service-modal {
	transform: rotateX(18deg) rotateY(-22deg) translateZ(-180px) scale(0.92);
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.services-3d .service-modal-overlay.open .service-modal {
	transform: none;
	opacity: 1;
}

.services-3d .service-modal-overlay.open .service-modal .service-modal-icon {
	animation: modal-icon-pop 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modal-icon-pop {
	from {
		transform: perspective(400px) rotateY(-180deg) scale(0.6);
		opacity: 0;
	}
}