/*
 * Rope Curve Carousel — structural CSS only. No colours, fonts, radii or shadows.
 * Without JS or with prefers-reduced-motion the cards are a plain scroll-snap row.
 * Style the cards, rope stroke, clips and controls in your own stylesheet.
 */
[data-rope-carousel] { position: relative; width: 100%; }
[data-rope-carousel] [data-rc-strip] { list-style: none; margin: 0; display: flex; gap: 16px; overflow-x: auto; padding: 24px 16px 32px; scroll-snap-type: x mandatory; }
[data-rope-carousel] [data-rc-card] { flex: 0 0 min(76vw, 300px); scroll-snap-align: center; }
[data-rope-carousel] [data-rc-rope] { display: none; }

/* Active (JS running, motion allowed) */
/* Tunables, zero specificity so any rule of yours overrides them */
:where([data-rope-carousel]) {
  --rc-fade: 4%;              /* edge fade width; 0% for hard edges */
  --rc-pivot: -11px;          /* y of the clip, relative to the card top: the point cards swing from */
}
[data-rope-carousel][data-rc-ready] {
  overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rc-fade), #000 calc(100% - var(--rc-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--rc-fade), #000 calc(100% - var(--rc-fade)), transparent);
}
[data-rope-carousel][data-rc-ready].is-dragging { cursor: grabbing; }
[data-rope-carousel][data-rc-ready] [data-rc-rope] { display: block; position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; overflow: visible; }
[data-rope-carousel][data-rc-ready] [data-rc-rope] path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-rope-carousel][data-rc-ready] [data-rc-strip] { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; scroll-snap-type: none; }
[data-rope-carousel][data-rc-ready] [data-rc-card] { position: absolute; top: 0; left: 0; width: var(--rc-card-width); flex: none; transform-origin: 50% var(--rc-pivot); will-change: transform; }