/* Work Marquee (compat version) */

#work-marquee {
  position: relative;
  width: 100vw;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#work-marquee .marquee-row {
  /* default: no offset; override inline with style="padding-left: 30%;" on a row */
  padding-left: 0;
}

#work-marquee .marquee-track {
  display: flex;
  align-items: center;
  gap: 2rem;                        /* spacing between items */
  width: max-content;
  will-change: transform;
  /* use longhand so JS can override duration cleanly */
  animation-name: wmarquee;
  animation-duration: 40s;          /* JS will override for consistent speed */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#work-marquee .marquee-row.reverse .marquee-track {
  animation-direction: reverse;     /* opposite direction for second row */
}

#work-marquee .marquee-item {
  /* fixed width per item for stable animation */
  flex: 0 0 clamp(240px, 45vw, 520px);
}

#work-marquee .work-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #0f0f10;              /* fallback while video loads */
  transition: filter 300ms ease, opacity 300ms ease, transform 300ms ease;
}

@media (min-width: 1024px) {
  #work-marquee .work-media { filter: grayscale(100%); opacity: 0.5; }
  #work-marquee .work-media:hover { filter: grayscale(0%); opacity: 1; }
}

/* Pause marquee on hover (optional) */
#work-marquee .marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes wmarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* we duplicate items in JS */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #work-marquee .marquee-track { animation: none; }
}