/* ──────────────────────────────────────────────────────────────
   Poster Marquee — css/marquee.css
   Seamless infinite scroll strip of clickable poster images.

   Tune these three variables to adjust the look:
   ────────────────────────────────────────────── */
:root {
  --mq-speed:  45s;    /* lower = faster */
  --mq-gap:    10px;   /* space between posters */
  --mq-height: 300px;  /* poster strip height on desktop */
}

/* ── Outer container ── */
.poster-marquee {
  overflow: hidden;
  margin: 4rem 0;
  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

/* ── Scrolling track ── */
.poster-marquee__track {
  display: flex;
  gap: var(--mq-gap);
  width: max-content;
  animation: mq-scroll var(--mq-speed) linear infinite;
  will-change: transform;
}

/* Pause on hover (desktop) */
.poster-marquee:hover .poster-marquee__track {
  animation-play-state: paused;
}

@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Individual linked poster tile ── */
.marquee-item {
  display: block;
  flex-shrink: 0;
  height: var(--mq-height);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(240, 239, 232, 0.07);
  transition: border-color 0.2s;
}

.marquee-item:hover {
  border-color: rgba(240, 239, 232, 0.25);
}

.marquee-item:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 2px;
}

.marquee-item img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
  transition: opacity 0.2s, transform 0.3s;
}

.marquee-item:hover img {
  opacity: 0.85;
  transform: scale(1.02);
}

/* ── Reduced-motion: stop scrolling, show as a static wrap ── */
@media (prefers-reduced-motion: reduce) {
  .poster-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }

  .poster-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  /* hide duplicate set when static */
  .poster-marquee__track .marquee-dupe {
    display: none;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  :root {
    --mq-height: 180px;
    --mq-speed:  30s;
    --mq-gap:    8px;
  }
}

@media (max-width: 480px) {
  :root {
    --mq-height: 140px;
  }
}