/* carousel.css — snap track, hidden scrollbar, native markers, opt-in effects */
.track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-marker-group: after; /* native dots where supported */
}
.track::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* one swipe = one slide */
}

/* native CSS markers (Chrome 135+, Safari 18.2+) */
.slide::scroll-marker {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.slide::scroll-marker:target-current {
  opacity: 1;
}

/* Motion only when the user hasn't asked to reduce it. */
@media (prefers-reduced-motion: no-preference) {
  .track {
    scroll-behavior: smooth;
  }

  /* opt-in tactile effect; degrades to plain snap where unsupported */
  @supports (animation-timeline: view()) {
    .track.fx .slide {
      animation: slide-fx linear both;
      animation-timeline: view(inline);
    }
    @keyframes slide-fx {
      entry 0%,
      exit 100% {
        scale: 0.9;
        opacity: 0.5;
      }
      cover 50% {
        scale: 1;
        opacity: 1;
      }
    }
  }
}