/* ───── VAPOR marquee section ─────
   Standalone moving ticker. Three sizes (small/medium/huge), four color
   modes (accent/ink/outline/invert), all sharing the .marquee primitive. */

.vp-marquee-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-3);
}
.vp-marquee-section .marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}
.vp-marquee-section .marquee__sep {
  font-family: var(--font-display);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

/* ── Size variants ── */
.vp-marquee-section--small .marquee__item,
.vp-marquee-section--small .marquee__sep {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
}
.vp-marquee-section--small { padding-block: var(--space-3); }

.vp-marquee-section--medium .marquee__item,
.vp-marquee-section--medium .marquee__sep {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.vp-marquee-section--medium { padding-block: var(--space-5); }

.vp-marquee-section--huge .marquee__item,
.vp-marquee-section--huge .marquee__sep {
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.92;
}
.vp-marquee-section--huge { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ── Color modes ── */
.vp-marquee-section--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-block: 1px solid var(--color-accent-ink);
}
.vp-marquee-section--accent .marquee__item,
.vp-marquee-section--accent .marquee__sep { color: var(--color-accent-ink); }

.vp-marquee-section--ink {
  background: var(--color-bg);
  color: var(--color-text);
  border-block: 1px solid var(--color-border);
}
.vp-marquee-section--ink .marquee__item { color: var(--color-text); }
.vp-marquee-section--ink .marquee__sep  { color: var(--color-accent); opacity: 1; }

.vp-marquee-section--outline {
  background: var(--color-bg);
  color: var(--color-text);
  border-block: 1px solid var(--color-border);
}
.vp-marquee-section--outline .marquee__item {
  -webkit-text-stroke: 1px var(--color-text);
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 240ms var(--ease);
}
.vp-marquee-section--outline:hover .marquee__item {
  -webkit-text-fill-color: var(--color-text);
}
.vp-marquee-section--outline .marquee__sep { color: var(--color-accent); opacity: 1; }

.vp-marquee-section--invert {
  background: var(--color-text);
  color: var(--color-bg);
  border-block: 1px solid var(--color-text);
}
.vp-marquee-section--invert .marquee__item,
.vp-marquee-section--invert .marquee__sep { color: var(--color-bg); }

/* Pause on hover for legibility */
.vp-marquee-section:hover .marquee__track { animation-play-state: paused; }