/* ============================================================
   PIXEL ÉTINCELLE — BANDEAU RÉALISATIONS EN COVERFLOW
   Défilement horizontal infini, cartes inclinées façon éventail,
   cliquables (ouvrent la même modale que la grille filtrable).
   ============================================================ */

/* S'appuie sur .marquee-wrap / .marquee-track / .is-scrolling / .is-visible
   déjà gérés par initMarquee() en JS — ces classes n'ajoutent que les
   ajustements visuels propres au bandeau de réalisations. */
.pf-marquee-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding: var(--space-10) 0;
  perspective: 1400px;
}

.pf-marquee-track {
  padding: 0 var(--gutter);
  transform-style: preserve-3d;
}
.pf-marquee-track.is-scrolling { animation-name: pf-marquee-scroll; animation-duration: 52s; }

@keyframes pf-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pf-mini-card {
  flex-shrink: 0;
  width: 250px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--neu-raised-700);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.5s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.pf-mini-card.is-visible { opacity: 1; }
.pf-mini-card.is-hovered { box-shadow: -10px -10px 24px var(--neu-light-600), 18px 18px 36px var(--neu-dark-600); z-index: 2; }

.pf-mini-img { width: 100%; height: 100%; }
.pf-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.pf-mini-card[data-cat="graph"] .pf-mini-img img { object-fit: contain; padding: var(--space-4); }

@media (max-width: 700px) {
  .pf-mini-card { width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-marquee-track.is-scrolling { animation: none; }
  .pf-mini-card { opacity: 1; transform: none !important; transition: none; }
}