feat: carousel.css (snap, native markers, reduce-motion-gated effects)

src/carousel.css

@@ -0,0 +1,57 @@
+/* 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;
+      }
+    }
+  }
+}