@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/shape.css');
@import url('tokens/spacing.css');
@import url('tokens/base.css');

/* Recent work carousel.
   Ported from the supplied image-auto-slider spec, then converted from a CSS
   keyframe animation to a natively scrollable strip driven by requestAnimationFrame
   (see Work in app.jsx), so visitors can drag, swipe and hold it. Touch uses native
   scrolling for momentum; mouse uses a pointer-drag handler. */
.c2c-marquee-mask {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.c2c-marquee-mask::-webkit-scrollbar { display: none; }
.c2c-marquee-mask.is-dragging { cursor: grabbing; }

.c2c-marquee-track { display: flex; width: max-content; user-select: none; }
.c2c-marquee-track img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

.c2c-marquee-item { transition: transform .3s ease, filter .3s ease; }
.c2c-marquee-item:hover { transform: scale(1.05); filter: brightness(1.1); }

/* Auto-playing motion must be stoppable. The rAF loop checks this too and does
   not advance; the strip stays fully draggable. */
@media (prefers-reduced-motion: reduce) {
  .c2c-marquee-item, .c2c-marquee-item:hover { transition: none; transform: none; filter: none; }
}