/* orbit-seven — 홈 H3 Marquee 띠. 홈에서만 싣는다(다른 장에는 마키가 없다).
 * 유일한 무한 반복이다(DESIGN.md 모션 규칙): 호버·포커스 때 멈추고, 멈춤 단추가 있고(WCAG 2.2.2),
 * prefers-reduced-motion 에서는 흐르지 않고 한 줄로 선다. 색은 tokens.css 의 var() 만.
 */

.marquee {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-section);
  background: var(--color-accent-surface);
  color: var(--color-on-accent);
}

.marquee__viewport {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.marquee__track {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 4rem;
}

.marquee__track li {
  display: flex;
  align-items: center;
  padding-left: 2rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-numeral);
  font-size: var(--text-display-2);
  line-height: 1;
  white-space: nowrap;
}

/* 곡명 사이 — 속이 빈 신호 고리 */
.marquee__track li::after {
  content: "";
  flex: none;
  width: 0.34em;
  height: 0.34em;
  margin-left: 2rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--color-on-accent-muted);
}

.marquee__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--spacing-tap);
  height: var(--spacing-tap);
  margin-inline: 0.75rem max(var(--spacing-gutter), env(safe-area-inset-right));
  border-radius: 50%;
  color: var(--color-on-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-on-accent-muted);
  transition: background-color 200ms var(--ease-fluid);
}

.marquee__toggle[hidden] {
  display: none;
}

.marquee__toggle:hover {
  background: var(--color-accent-deep);
}

.marquee :focus-visible {
  outline-color: var(--color-on-accent);
  outline-offset: -5px;
}

.marquee__icon {
  width: 16px;
  height: 16px;
}

.marquee__icon--pause path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.marquee__icon--play {
  display: none;
}

.marquee__icon--play path {
  fill: currentColor;
}

.marquee.is-paused .marquee__icon--pause {
  display: none;
}

.marquee.is-paused .marquee__icon--play {
  display: block;
}

@media (min-width: 64rem) {
  .marquee__track {
    min-height: 6rem;
  }

  .marquee__track li {
    padding-left: 2.5rem;
  }

  .marquee__track li::after {
    margin-left: 2.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 40s var(--ease-marquee) infinite;
  }

  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track,
  .marquee.is-paused .marquee__track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    flex: 1;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .marquee__track--copy,
  .marquee__toggle {
    display: none;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none !important;
  }
}