/* ========== TICKER / BLINKIES ========== */
.ticker {
  max-width: 1400px;
  margin: 12px auto 26px;
}

.ticker__mask {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 10px 0;

  background: rgba(15, 10, 18, 0.40);
  box-shadow:
    0 0 40px rgba(255, 79, 216, 0.10),
    inset 0 0 0 1px rgba(255, 200, 170, 0.10);
  backdrop-filter: blur(10px);
}

/* subtle edge fade so it feels “masked” */
.ticker__mask::before,
.ticker__mask::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.ticker__mask::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 6, 14, 1), rgba(10, 6, 14, 0));
}

.ticker__mask::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 6, 14, 1), rgba(10, 6, 14, 0));
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  padding: 0 18px;

  animation: tickerScroll 26s linear infinite;
  will-change: transform;
}

/* pause on hover so people can admire your blinkies */
.ticker__mask:hover .ticker__track {
  animation-play-state: paused;
}

.blinky {
  height: 24px;            /* change to 32px if your blinkies are bigger */
  width: auto;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px rgba(255, 79, 216, 0.35));
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because we duplicated the set */
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}