/* ─── Animations ────────────────────────────────────────────────────── */

@keyframes pulse-live {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.8); }
}

@keyframes scroll-strip {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes carousel-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes bounce-ball {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes run-legs {
  0%, 100% { transform: rotate(-10deg); }
  50%       { transform: rotate(10deg); }
}

@keyframes swim-arm {
  0%, 100% { transform: rotate(-25deg); }
  50%       { transform: rotate(25deg); }
}

@keyframes dance {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%       { transform: rotate(8deg)  translateY(-5px); }
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  45%       { transform: translateY(-8px); }
}

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Strip ─────────────────────────────────────────────────────────── */

.strip-track {
  display: flex;
  width: max-content;
  animation: scroll-strip 28s linear infinite;
}

/* ─── Carousel ───────────────────────────────────────────────────────── */

.carousel-track {
  display: flex;
  width: max-content;
  animation: carousel-slide 18s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

/* ─── Live badge ─────────────────────────────────────────────────────── */

.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E05545;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #E05545;
  animation: pulse-live 1.4s ease-out infinite;
}

/* ─── Kente stripe ───────────────────────────────────────────────────── */

.kente-stripe {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #C4A520 0 16px,
    #E05545 16px 26px,
    #7EC4C8 26px 36px,
    #3D5A47 36px 46px,
    #CF6028 46px 56px,
    #C4A520 56px 72px
  );
}


/* ─── Score rows ─────────────────────────────────────────────────────── */

.score-row {
  animation: fade-slide-in 0.5s ease-out both;
}

/* ─── SVG icon animations ────────────────────────────────────────────── */

.icon-ball     { animation: bounce-ball 0.8s ease-in-out infinite; }
.icon-legs     { animation: run-legs   0.5s ease-in-out infinite; }
.icon-arm      { animation: swim-arm   0.7s ease-in-out infinite; }
.icon-dance    { animation: dance      1.0s ease-in-out infinite; }
.icon-jump     { animation: jump       1.2s ease-in-out infinite; }