/**
 * marquee.css — Novagroup Infinite Marquee Component
 * CSS-animation-driven infinite horizontal scroll.
 * Pauses on hover and respects prefers-reduced-motion.
 * ALL values reference tokens from css/tokens.css.
 */

/* ============================================================
 * MARQUEE TRACK
 * ============================================================ */
.marquee {
  overflow: hidden;
  position: relative;
  /* Fade edges for premium feel */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ============================================================
 * MARQUEE INNER (also supports .marquee__track alias) — doubled items for seamless loop
 * ============================================================ */
.marquee__inner,
.marquee__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-7);
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 35s var(--ease-linear) infinite;
  will-change: transform;
}

/* Pause on hover — CSS owns the pause now (the JS hover-slow handlers were
 * removed so the two no longer fight). Hovering the track itself would never
 * fire mid-scroll, so scope to the marquee container. (#11) */
.marquee:hover .marquee__inner,
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* second copy seamlessly takes over */
}

/* ============================================================
 * MARQUEE ITEM
 * ============================================================ */
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-navy);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-fog);
  background-color: var(--c-white);
  transition: border-color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

.marquee__item:hover {
  border-color: var(--c-copper);
}

/* Icon-box: a crafted token, not a ghost outline. Navy-mid fill so it reads
 * as an object, faint copper border, copper-bright icon on hover (the marquee
 * pauses on hover so the lift is legible). (id:marquee-icon-box-low-contrast) */
.marquee__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--c-navy-mid);
  border: 1px solid rgba(184, 115, 51, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--c-copper);
  transition:
    border-color var(--dur-short) var(--ease-out),
    color        var(--dur-short) var(--ease-out);
}

.marquee__item-icon svg {
  width: 20px;
  height: 20px;
}

.marquee__item:hover .marquee__item-icon {
  border-color: var(--c-copper);
  color: var(--c-copper-bright);
}

/* Separator dot between items */
.marquee__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--c-fog);
  flex-shrink: 0;
}

/* ============================================================
 * DARK VARIANT
 * ============================================================ */
.marquee--dark .marquee__item {
  background-color: var(--c-navy-mid);
  border-color: rgb(255 255 255 / 0.1);
  color: var(--c-white);
}

.marquee--dark .marquee__item-icon {
  color: var(--c-copper);
}

.marquee--dark .marquee__dot {
  background-color: rgb(255 255 255 / 0.2);
}

/* ============================================================
 * MOBILE DENSITY — tighten items + reduce edge fade so more than one
 * pill is visible at 390px instead of wide empty navy gaps (#27)
 * ============================================================ */
@media (max-width: 600px) {
  .marquee__inner,
  .marquee__track {
    gap: var(--sp-4);
  }

  .marquee__item {
    min-width: 104px;
    padding: var(--sp-2) var(--sp-3);
  }

  .marquee {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  }
}

/* ============================================================
 * REDUCED MOTION — stop animation entirely
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee__inner,
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    white-space: normal;
  }
}