/* ============================================================
   PIXEL ÉTINCELLE — GALERIE CIRCULAIRE 3D (RÉALISATIONS)
   Roue de projets en 3D pur CSS (perspective + rotateY + translateZ),
   pilotée par assets/js/portfolio-circular.js.

   Si la 3D CSS n'est pas supportée, ou si l'utilisateur préfère
   moins d'animation, le script ne construit rien : le bandeau de
   secours (.pf-marquee-wrap, juste après dans le HTML) reste
   affiché à la place.
============================================================ */

.pf-circ-zone {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: min(82vh, 780px);
  min-height: 480px;
  margin-top: var(--space-10);
  margin-bottom: var(--space-6);
  display: none;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.pf-circ-zone.is-active { display: block; }
.pf-circ-zone.is-dragging { cursor: grabbing; }

.pf-circ-stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
}

.pf-circ-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.pf-circ-card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  border: none;
  cursor: pointer;
  will-change: transform, opacity;
}

.pf-circ-img { position: absolute; inset: 0; }
.pf-circ-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-circ-card[data-cat="graph"] .pf-circ-img img { object-fit: contain; padding: var(--space-6); background: var(--bg-elevated); }

.pf-circ-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(to top, rgba(10,10,18,.92) 10%, rgba(10,10,18,.35) 65%, transparent 100%);
}
.pf-circ-overlay .tag { margin-bottom: var(--space-2); }
.pf-circ-overlay h3 { font-size: var(--fs-md); color: var(--text-primary); line-height: var(--lh-snug); }

.pf-circ-nav {
  position: absolute; bottom: var(--space-6); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: var(--space-4); z-index: 1001;
}
.pf-circ-nav-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--bg-elevated); box-shadow: var(--neu-raised-600);
  color: var(--text-primary); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--dur-fast), color var(--dur-fast);
}
.pf-circ-nav-btn:hover, .pf-circ-nav-btn:focus-visible { box-shadow: var(--neu-inset-600); color: var(--accent-primary); }

.pf-circ-hint {
  position: absolute; left: 50%; top: 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;
  z-index: 1001;
  animation: pf-circ-hint-in 0.6s var(--ease-out) 0.8s forwards, pf-circ-hint-out 0.6s var(--ease-out) 5s forwards;
}
@keyframes pf-circ-hint-in { to { opacity: 1; } }
@keyframes pf-circ-hint-out { to { opacity: 0; } }

@media (max-width: 700px) {
  .pf-circ-zone { height: min(66vh, 560px); min-height: 420px; }
  .pf-circ-nav-btn { width: 42px; height: 42px; }
}