/* Outpath Solutions Image Cube - rotating 3D cube */

.outpath-image-cube-scene {
	--outpath-image-cube-size: 200px;
	--outpath-image-cube-speed: 12s;
	--outpath-image-cube-vspeed: 10s;
	--outpath-image-cube-perspective: 4;
	--outpath-image-cube-radius: 0px;
	width: var(--outpath-image-cube-size);
	height: var(--outpath-image-cube-size);
	margin: 2em auto;
	perspective: calc(var(--outpath-image-cube-size) * var(--outpath-image-cube-perspective));
	position: relative;
}

/* Outer layer: horizontal rotation (around the Y axis) */
.outpath-image-cube-rot-y {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: outpath-image-cube-spin-y var(--outpath-image-cube-speed) linear infinite;
}

/* Inner layer: the cube; rotates vertically when the -has-v class is set */
.outpath-image-cube-cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(-15deg); /* slight tilt so top/bottom are visible */
}

.outpath-image-cube-cube.outpath-image-cube-has-v {
	transform: none;
	animation: outpath-image-cube-spin-x var(--outpath-image-cube-vspeed) linear infinite;
}

/* Reverse rotation direction */
.outpath-image-cube-dir-reverse .outpath-image-cube-rot-y,
.outpath-image-cube-dir-reverse .outpath-image-cube-cube.outpath-image-cube-has-v {
	animation-direction: reverse;
}

/* Pause on hover */
.outpath-image-cube-pause-hover:hover .outpath-image-cube-rot-y,
.outpath-image-cube-pause-hover:hover .outpath-image-cube-cube.outpath-image-cube-has-v {
	animation-play-state: paused;
}

.outpath-image-cube-face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.06);
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: var(--outpath-image-cube-radius);
}

.outpath-image-cube-face img {
	width: 85%;
	height: 85%;
	object-fit: contain;
	display: block;
}

.outpath-image-cube-face-1 { transform: rotateY(0deg)   translateZ(calc(var(--outpath-image-cube-size) / 2)); }
.outpath-image-cube-face-2 { transform: rotateY(90deg)  translateZ(calc(var(--outpath-image-cube-size) / 2)); }
.outpath-image-cube-face-3 { transform: rotateY(180deg) translateZ(calc(var(--outpath-image-cube-size) / 2)); }
.outpath-image-cube-face-4 { transform: rotateY(270deg) translateZ(calc(var(--outpath-image-cube-size) / 2)); }
.outpath-image-cube-face-5 { transform: rotateX(90deg)  translateZ(calc(var(--outpath-image-cube-size) / 2)); }
.outpath-image-cube-face-6 { transform: rotateX(-90deg) translateZ(calc(var(--outpath-image-cube-size) / 2)); }

@keyframes outpath-image-cube-spin-y {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

@keyframes outpath-image-cube-spin-x {
	from { transform: rotateX(0deg); }
	to   { transform: rotateX(360deg); }
}

/* Soft ground shadow under the cube */
.outpath-image-cube-shadow::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9%;
	width: 72%;
	height: 14%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 70%);
	z-index: -1;
	pointer-events: none;
}

/* Respect the visitor's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.outpath-image-cube-rot-y,
	.outpath-image-cube-cube.outpath-image-cube-has-v {
		animation: none;
	}
	.outpath-image-cube-rot-y {
		transform: rotateY(-30deg);
	}
	.outpath-image-cube-cube,
	.outpath-image-cube-cube.outpath-image-cube-has-v {
		transform: rotateX(-20deg);
	}
}

/* Thumbnail sizing in the admin */
.outpath-image-cube-thumb {
	max-width: 100px;
	height: auto;
	border: 1px solid #ccd0d4;
	padding: 3px;
	background: #fff;
}