/* ===========================================
   CLST Neon - Effetti 3D
   Cerca Lavoro Sicuro e Trasparente
   =========================================== */

/* --- Contenitore 3D --- */
.clst-3d-container {
	perspective: var(--3d-depth);
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

/* --- Elemento 3D con inclinazione (tilt via JS) --- */
.clst-3d-tilt {
	transition: transform 0.3s ease;
	transform-style: preserve-3d;
	will-change: transform;
}

/* --- Card 3D con profondità --- */
.clst-3d-card {
	background: rgba(10, 10, 10, 0.8);
	backdrop-filter: blur(10px);
	border: 1px solid var(--neon-primary);
	border-radius: 15px;
	padding: 30px;
	transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
	transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.clst-3d-card:hover {
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.7),
		0 0 40px var(--neon-glow);
}

/* --- Parallax 3D --- */
.clst-3d-parallax {
	position: relative;
	transform-style: preserve-3d;
	perspective: var(--3d-depth);
}

.clst-3d-parallax .layer {
	position: absolute;
	transition: transform 0.1s ease-out;
}

/* --- Effetto Cubo 3D --- */
.clst-3d-cube {
	position: relative;
	transform-style: preserve-3d;
	animation: clst-cube-rotate 10s infinite linear;
	margin: 60px auto;
}

.clst-3d-cube .face {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 240, 255, 0.1);
	border: 2px solid var(--neon-primary);
	box-shadow: inset 0 0 50px var(--neon-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--neon-primary);
	text-shadow: 0 0 20px var(--neon-glow);
}

.clst-3d-cube .face-front  { transform: translateZ(100px); }
.clst-3d-cube .face-back   { transform: rotateY(180deg) translateZ(100px); }
.clst-3d-cube .face-right  { transform: rotateY(90deg) translateZ(100px); }
.clst-3d-cube .face-left   { transform: rotateY(-90deg) translateZ(100px); }
.clst-3d-cube .face-top    { transform: rotateX(90deg) translateZ(100px); }
.clst-3d-cube .face-bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes clst-cube-rotate {
	0%   { transform: rotateX(0deg) rotateY(0deg); }
	100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* --- Elementi flottanti 3D --- */
.clst-3d-float {
	animation: clst-float-3d 3s ease-in-out infinite;
}

@keyframes clst-float-3d {
	0%, 100% {
		transform: translateY(0px) rotateX(0deg);
	}
	50% {
		transform: translateY(-20px) rotateX(5deg);
	}
}