/* ========================================
   HORIZONTAL ANIMATIONS (MODE 1)
   ======================================== */

@keyframes marquee-accelerate {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--seg) * 0.6));
  }
}

@keyframes marquee-fast {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--seg));
  }
}

@keyframes marquee-slow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--seg));
  }
}

@keyframes marquee-slower {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--seg));
  }
}

@keyframes marquee-slowest {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--seg));
  }
}

/* HORIZONTAL ANIMATION CLASSES */

.animate-accelerate {
  animation: marquee-accelerate var(--speed-accel, 1s)
    cubic-bezier(0.33, 0, 0.67, 0.33);
  animation-fill-mode: forwards;
}

.animate-fast {
  animation: marquee-fast var(--speed-fast, 0.45s) linear infinite;
}

.animate-slow {
  animation: marquee-slow var(--speed-slow, 1s) linear infinite;
}

.animate-slower {
  animation: marquee-slower var(--speed-slower, 5s) linear infinite;
}

.animate-slowest {
  animation: marquee-slowest var(--speed-slowest, 20s) linear infinite;
}

.animate-stop {
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ========================================
   VERTICAL ANIMATIONS (MODES 2-6)
   ======================================== */

@keyframes marquee-accelerate-v {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--seg-v) * 0.6));
  }
}

@keyframes marquee-fast-v {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--seg-v));
  }
}

@keyframes marquee-slow-v {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--seg-v));
  }
}

@keyframes marquee-slower-v {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--seg-v));
  }
}

@keyframes marquee-slowest-v {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--seg-v));
  }
}

/* VERTICAL ANIMATION CLASSES */

.animate-accelerate-vertical {
  animation: marquee-accelerate-v var(--speed-accel-v, 1s)
    cubic-bezier(0.33, 0, 0.67, 0.33);
  animation-fill-mode: forwards;
}

.animate-fast-vertical {
  animation: marquee-fast-v var(--speed-fast-v, 0.45s) linear infinite;
}

.animate-slow-vertical {
  animation: marquee-slow-v var(--speed-slow-v, 1s) linear infinite;
}

.animate-slower-vertical {
  animation: marquee-slower-v var(--speed-slower-v, 5s) linear infinite;
}

.animate-slowest-vertical {
  animation: marquee-slowest-v var(--speed-slowest-v, 20s) linear infinite;
}

.animate-stop-vertical {
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ========================================
   FADE IN ANIMATION
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
  opacity: 0;
}
.center-zoom {
  transform: scale(1.19);
  transition: transform 0.25s ease;
}

.center-normal {
  transform: scale(1);
  transition: transform 0.25s ease;
}

/* Zigzag Animation for Column Mode Changes */
@keyframes zigzag-even {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes zigzag-odd {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

.zigzag-animate-even {
  animation: zigzag-even 0.6s ease-out;
}

.zigzag-animate-odd {
  animation: zigzag-odd 0.6s ease-out;
}

/* Winner Smooth Center Animation */
/* Winner Smooth Center Animation */
@keyframes winner-to-center {
  0% {
    transform: translateY(var(--winner-offset, 0));
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.winner-center-animate {
  animation: winner-to-center 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}