/* ============================================================
   PIXEL ÉTINCELLE — SLIDER 3D IMMERSIF (RÉALISATIONS)
   Bandeau WebGL en coverflow courbé. Si WebGL est indisponible,
   en erreur, ou si l'utilisateur préfère moins d'animation, ce
   bloc reste vide et le bandeau de secours (.pf-marquee-wrap)
   défini juste après dans le HTML reste visible à la place.
   ============================================================ */

.pf-3d-zone {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 460px;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  overflow: hidden;
  display: none;
}
.pf-3d-zone.is-active { display: block; }

.pf-3d-zone canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.pf-3d-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: pf-3d-hint-in 0.6s var(--ease-out) 0.8s forwards, pf-3d-hint-out 0.6s var(--ease-out) 5s forwards;
}

@keyframes pf-3d-hint-in { to { opacity: 1; } }
@keyframes pf-3d-hint-out { to { opacity: 0; } }

@media (max-width: 700px) {
  .pf-3d-zone { height: 320px; }
}