/* ==================================================================
   reel.css, le récapitulatif de fin d'ouverture.

   Une bobine horizontale à accrochage, défilée par le navigateur
   lui-même : elle suit le doigt au pixel près et ne coûte presque rien.
   Chaque carte ne reçoit qu'une transformée et une opacité, calculées
   selon sa distance au centre ; aucun flou, aucun reflet.
   ================================================================== */

.reel {
  --rw: 260px;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  perspective: 1200px;
  /* un fondu sur les bords : on voit qu'il reste des cartes */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.reel::-webkit-scrollbar { display: none; }
.reel.is-grabbing { cursor: grabbing; scroll-snap-type: none; }

.reel-track {
  display: flex;
  align-items: center;
  gap: calc(var(--rw) * -0.06);
  /* de quoi centrer la première et la dernière carte */
  padding: 26px calc(50% - var(--rw) / 2);
  transform-style: preserve-3d;
}

.reel-item {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.reel-card {
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  transition: transform .12s linear, opacity .12s linear;
}
/* l'arrivée : les cartes montent une à une */
.reel-card > .card {
  --w: var(--rw);
  animation: reel-in .7s var(--ease-back) both;
  animation-delay: var(--delay);
}
@keyframes reel-in {
  from { opacity: 0; transform: translateY(60px) rotate(4deg) scale(.9); }
}

/* Les cartes de côté ne sont que des aperçus : pas de lueur ni de liseré
   tournant, que la carte centrale garde seule. */
.reel-item .card-bg { display: none; }
.reel-item:not(.is-center) .card::after { opacity: 0 !important; }
.reel-item:not(.is-center) .card-front::before,
.reel-item:not(.is-center) .card-frame::before { animation-play-state: paused; }
.reel-item.is-center .card { cursor: pointer; }
.reel-item:not(.is-center) .card { cursor: pointer; }

/* le sol lumineux sous la carte centrale */
.reel-item.is-center::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: -22px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--aura) 55%, transparent), transparent);
  opacity: .8;
  pointer-events: none;
}

.reel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.reel-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 40%, rgba(255,255,255,.12));
  cursor: pointer;
  transition: width .35s var(--ease-back), background .25s, box-shadow .25s;
}
.reel-dot.is-on {
  width: 26px;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
}

@media (prefers-reduced-motion: reduce) {
  .reel-card > .card { animation: none; }
}