/*
 * Zarboutan Matériaux — Maquette isolée : logo ZM en rotation 3D continue
 * CSS natif uniquement. Aucune librairie externe.
 * Ne concerne que cette page de démonstration — n'affecte ni le header
 * réel, ni la page 976, ni le logo actuellement utilisé sur le site.
 */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	height: 100%;
	background: radial-gradient(circle at 50% 40%, #10160f 0%, #050704 100%);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.zl-demo-banner {
	position: relative;
	z-index: 10;
	background: #1a2e1a;
	color: #b7e6bd;
	text-align: center;
	padding: 10px 16px;
	font-size: 14px;
	border-bottom: 1px solid #2f5a37;
}

.zl-stage-wrap {
	min-height: calc(100vh - 41px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
}

/* ---------- Scène 3D du logo ---------- */

.zl-logo-stage {
	position: relative;
	width: min(46vw, 420px);
	aspect-ratio: 1 / 1;
	perspective: 1000px;
}

/* L'objet "pièce/médaillon" : face avant, face arrière, tranche.
   Tourne comme un seul bloc rigide (transform appliqué ici par le JS). */
.zl-logo-coin {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.zl-face {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: var(--zl-logo-url);
	background-size: cover;
	background-position: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow:
		0 2px 0 rgba(255, 255, 255, 0.06) inset,
		0 -6px 14px rgba(0, 0, 0, 0.45) inset;
}

.zl-face--front {
	transform: translateZ(var(--zl-half-thickness, 18px));
}

.zl-face--back {
	transform: translateZ(calc(var(--zl-half-thickness, 18px) * -1)) rotateY(180deg);
	filter: brightness(0.8) saturate(0.9);
}

/* Reflet lumineux discret sur la face avant, son intensité/position sont
   pilotées par le JS en fonction de l'angle de rotation courant. */
.zl-face-sheen {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle at var(--zl-sheen-x, 50%) var(--zl-sheen-y, 32%),
		rgba(255, 255, 255, 0.38) 0%,
		rgba(255, 255, 255, 0.08) 30%,
		rgba(255, 255, 255, 0) 62%
	);
	mix-blend-mode: overlay;
	opacity: var(--zl-sheen-opacity, 1);
	pointer-events: none;
}

/* Tranche du médaillon : construite dynamiquement en JS à partir de fines
   lamelles disposées en cylindre (rotateY + translateZ). Chaque lamelle
   n'est visible que lorsqu'elle fait face à la caméra (backface-visibility),
   ce qui donne, mises bout à bout, une véritable épaisseur visible en
   profil au lieu d'un disque plat qui disparaîtrait à 90°. */
.zl-rim {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.zl-rim-seg {
	position: absolute;
	left: 50%;
	top: 50%;
	background: linear-gradient(180deg, #4a7c59 0%, #2f5a37 45%, #1a2e1a 100%);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Ombre dynamique projetée au sol ; sa largeur suit l'angle de rotation
   (plus étroite quand le logo est de profil, comme un vrai objet). */
.zl-logo-shadow {
	position: absolute;
	left: 50%;
	bottom: -8%;
	width: 82%;
	height: 22%;
	transform: translate(-50%, 0) scaleX(1);
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.25) 45%,
		transparent 75%
	);
	filter: blur(18px);
	will-change: transform;
	z-index: -1;
}

.zl-caption {
	position: absolute;
	left: 50%;
	bottom: -56px;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.04em;
	opacity: 0.6;
	white-space: nowrap;
}

/* ---------- MOBILE : rotation plus lente et simplifiée (géré aussi en JS) ---------- */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
	.zl-logo-shadow {
		transform: translate(-50%, 0) scaleX(0.9) !important;
	}
}

/* ---------- Accessibilité : prefers-reduced-motion → logo statique ---------- */
@media (prefers-reduced-motion: reduce) {
	.zl-logo-coin {
		transform: none !important;
	}

	.zl-logo-shadow {
		transform: translate(-50%, 0) scaleX(1) !important;
	}

	.zl-face-sheen {
		opacity: 1 !important;
	}
}