/* ============================================================
   EXTRAS PAGE — additions on top of album.css
   Kept in its own file rather than edited into album.css, since
   this animation is specific to this page's postcards strip and
   isn't something the main album site needs.
   ============================================================ */

/* Ported from the postcards project's .filmstrip-viewport /
   .filmstrip-track / @keyframes scroll-strip — same mechanism
   (duplicate the row, animate translateX(0) -> translateX(-50%),
   pause on hover), just renamed so it doesn't collide with this
   site's own .filmstrip class and re-themed isn't needed since
   it's transform/opacity only. */

.marquee-viewport{
  width: 100%;
  overflow: hidden;
  padding: 8px 0 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track{
  display: flex;
  width: max-content;
  gap: 18px;
  animation: marquee-scroll linear infinite;
}

/* Fewer than POSTCARDS_STATIC_THRESHOLD cards (see extras.js) and the
   track isn't duplicated or animated — just centered, same fallback
   the postcards project uses for small sections. */
.marquee-track.static{
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.marquee-viewport:hover .marquee-track{
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}