/* PromotionStudio Extras: base tokens + marquee */
:root{
  --ps-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --ps-font-sans: "Plus Jakarta Sans", "Manrope", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --ps-bg: #0b0b0c;
  --ps-fg: #eaeaea;
  --ps-fg-dim: #b5b5b5;
  --ps-accent: #8AFF61;
}

.ps-dark {
  background: var(--ps-bg);
  color: var(--ps-fg);
}

.ps-marquee{
  --ps-speed: 20s;
  --ps-gap: 3rem;
  --ps-size: clamp(2.4rem, 6vw, 8rem);
  --ps-weight: 800;
  font-family: var(--ps-font-display);
  font-weight: var(--ps-weight);
  font-size: var(--ps-size);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  user-select: none;
  white-space: nowrap;
  padding-block: 0.25em;
}

.ps-marquee .ps-track{
  display: flex;
  gap: var(--ps-gap);
  width: max-content;
  will-change: transform;
  animation: ps-scroll-left var(--ps-speed) linear infinite;
}

.ps-marquee[data-direction="right"] .ps-track{
  animation-name: ps-scroll-right;
}

.ps-marquee[data-pause="true"]:hover .ps-track{
  animation-play-state: paused;
}

.ps-marquee .ps-segment{
  flex: 0 0 auto;
  padding-right: var(--ps-gap);
}

/* Seamless loop: move by half the combined width (two segments) */
@keyframes ps-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ps-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Optional helper classes */
.ps-lead{
  font-family: var(--ps-font-sans);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--ps-fg-dim);
}

.ps-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--ps-font-sans);
  border: 1px solid currentColor; border-radius: 999px;
  padding: .6em 1.1em; text-decoration: none;
}

.ps-btn--accent{ background: var(--ps-accent); color:#0b0b0c; border-color: transparent; }