/* ============================================================
   Supreme News Ticker — Frontend
   ============================================================ */

/* ── Bar ──────────────────────────────────────────────────── */
#supreme-ticker {
  --snt-bg:        #1e293b;
  --snt-color:     #ffffff;
  --snt-label-bg:  #e11d48;
  --snt-speed:     40s;
  --snt-height:    38px;
  --snt-font-size: 13px;

  position: relative;
  width: 100%;
  height: var(--snt-height);
  background: var(--snt-bg);
  color: var(--snt-color);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--snt-font-size);
  line-height: 1;

  /* Subtle bottom border for definition */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Stick to top of screen on scroll */
#supreme-ticker.snt-sticky {
  position: sticky;
  top: 0;
}

/* ── Label pill ───────────────────────────────────────────── */
.snt-label {
  flex-shrink: 0;
  padding: 0 14px;
  height: 100%;
  background: var(--snt-label-bg);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Angled right edge */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 22px;
  user-select: none;
}

/* ── Viewport (clips the scrolling track) ─────────────────── */
.snt-viewport {
  flex: 1;
  overflow: hidden;
  height: 100%;
  position: relative;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* ── Track (the moving row) ───────────────────────────────── */
.snt-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: snt-scroll var(--snt-speed) linear infinite;
}

.snt-track.snt-paused {
  animation-play-state: paused;
}

.snt-inner {
  display: inline-block;
  padding: 0 60px 0 0; /* gap between the two copies */
  opacity: 0.92;
  letter-spacing: 0.01em;
}

/* The actual keyframe — scrolls exactly one copy width */
@keyframes snt-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Pause / Play button ──────────────────────────────────── */
.snt-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 100%;
  background: rgba(255,255,255,0.07);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.10);
  color: var(--snt-color);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
}

.snt-toggle:hover {
  opacity: 1;
  background: rgba(255,255,255,0.14);
}

/* ── Reduced-motion: stop animation, show as static ──────── */
@media (prefers-reduced-motion: reduce) {
  .snt-track {
    animation: none;
    overflow: hidden;
  }
  .snt-viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .snt-inner:last-child { display: none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  #supreme-ticker {
    --snt-height: 34px;
    --snt-font-size: 12px;
  }
  .snt-label { padding-right: 18px; }
}