/**
 * Northstar Core — styles for widgets this plugin registers.
 * Design tokens stay in the Elementor Kit; this file only holds what the
 * widget's own markup needs in order to work at all.
 */

.nsc-marquee { overflow: hidden; }

.nsc-marquee__track {
  display: flex;
  width: max-content;
  animation: nsc-marquee-scroll 38s linear infinite;
}

.nsc-marquee--reverse .nsc-marquee__track { animation-direction: reverse; }
.nsc-marquee--pausable:hover .nsc-marquee__track { animation-play-state: paused; }

.nsc-marquee__group {
  display: flex;
  flex-wrap: nowrap;
  gap: 52px;
  padding-inline-end: 52px;
}

.nsc-marquee__item {
  white-space: nowrap;
  font-family: var(--e-global-typography-accent-font-family), monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--e-global-color-subtle);
}

/* The track holds the group twice, so half a loop returns to the start. */
@keyframes nsc-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nsc-marquee__track { animation: none; }
  .nsc-marquee { overflow-x: auto; }
}