/* NSM Photo Marquee (2026-09-25): two-row, opposite-direction, seamless photo marquee.
   Replaces the WebGL nsm_circular hero gallery. Pure CSS transform animation. */
.nsm-marquee{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.nsm-marquee__row{
  overflow:hidden;
  width:100%;
}
.nsm-marquee__track{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:max-content;
  will-change:transform;
}
.nsm-marquee__row--left .nsm-marquee__track{
  animation:nsm-marquee-left 36s linear infinite;
}
.nsm-marquee__row--right .nsm-marquee__track{
  animation:nsm-marquee-right 40s linear infinite;
}
.nsm-marquee__card{
  flex:0 0 auto;
  width:104px;
  height:132px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(36,56,63,.10);
  background:#fff;
}
.nsm-marquee__card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@keyframes nsm-marquee-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes nsm-marquee-right{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (min-width:481px){
  .nsm-marquee{ gap:14px; }
  .nsm-marquee__track{ gap:14px; }
  .nsm-marquee__card{ width:140px; height:175px; border-radius:20px; }
}
@media (min-width:1025px){
  .nsm-marquee{ gap:18px; }
  .nsm-marquee__track{ gap:18px; }
  .nsm-marquee__card{ width:172px; height:212px; border-radius:22px; }
}
@media (hover:hover){
  .nsm-marquee__row:hover .nsm-marquee__track{ animation-play-state:paused; }
}
.nsm-marquee--static .nsm-marquee__track{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .nsm-marquee__track{ animation:none; }
}