.monolith-marquee {
  width: 100%;
}

/* Viewport = clipping frame */
.monolith-marquee__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 2.25rem; /* CLS防止 */
  display: flex;
  align-items: center;

  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Track moves */
.monolith-marquee__track {
  display: flex;
  will-change: transform;
}

/* Inner chunks (JS clones this) */
.monolith-marquee__track-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Text style */
.monolith-marquee__text {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;

  transition: opacity 180ms linear; /* ticker fade */
}
.monolith-marquee__text.is-fading {
  opacity: 0;
}

/* Pause on hover */
.monolith-marquee[data-pause="1"]:hover .monolith-marquee__track {
  animation-play-state: paused;
}

/* Background mode = click-through */
.monolith-marquee[data-bg="1"] {
  pointer-events: none;
}

/* ticker mode: no scroll animation */
.monolith-marquee[data-mode="ticker"] .monolith-marquee__track {
  animation: none !important;
  transform: translateX(0) !important;
}

/* Motion-reduction */
@media (prefers-reduced-motion: reduce) {
  .monolith-marquee__track {
    animation: none !important;
    transform: translateX(0) !important;
  }
}