/* The band is a dark window in both themes (Q-2 "a"): the wrapper carries the field and half the old margin. */
.dark-window {
  margin-block: var(--sp-7);
  background: var(--c-field);
  color: var(--c-text);
  overflow: hidden;
}

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  user-select: none;
  border-block: 1px solid var(--c-raise-2);
  padding-block: var(--sp-5);
  margin-block: var(--sp-7);
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: inline-flex;
  gap: var(--sp-7);
  flex-shrink: 0;
  animation: marquee 38s linear infinite;
  align-items: center;
  white-space: nowrap;
}

.marquee__track > * {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 2.4vw, 2.4rem);
  font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 500;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-7);
}

.marquee__track > .marquee__brand {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  background: var(--pm-gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.marquee__track > *::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 6px rgba(196, 0, 173, 0.55))
          drop-shadow(0 0 18px rgba(115, 0, 139, 0.35));
  animation: marqueeOrnamentSpin 22s linear infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><defs><radialGradient id='c' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23F4DEF8'/><stop offset='35%25' stop-color='%23C400AD'/><stop offset='100%25' stop-color='%2373008B' stop-opacity='0'/></radialGradient><linearGradient id='r' x1='0' y1='0' x2='1' y2='0'><stop offset='0%25' stop-color='%23C400AD'/><stop offset='100%25' stop-color='%23C400AD' stop-opacity='0'/></linearGradient></defs><circle cx='24' cy='24' r='6.5' fill='url(%23c)'/><circle cx='24' cy='24' r='2.4' fill='%23F4DEF8'/><line x1='24' y1='24' x2='37.6' y2='8.6' stroke='url(%23r)' stroke-width='2' stroke-linecap='round'/><line x1='24' y1='24' x2='3.6' y2='25.1' stroke='url(%23r)' stroke-width='2' stroke-linecap='round'/><line x1='24' y1='24' x2='20.5' y2='44.7' stroke='url(%23r)' stroke-width='2' stroke-linecap='round'/></svg>");
}

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

@keyframes marqueeOrnamentSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee__track > *::after { animation: none; }
}