/* Base truncation styles */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* Animated truncation with CSS variables */
.animated-truncate.is-overflowing {
  /* Default values (overridden by JS) */
  --scroll-distance: -100px;
  --scroll-duration: 4s;
}

/* Hover triggers animation */
.animated-truncate.is-overflowing:hover {
  animation: textScrollAdaptive var(--scroll-duration) linear infinite;
  text-overflow: initial; /* Remove ellipsis during animation */
}

/* Adaptive scroll animation */
@keyframes textScrollAdaptive {
  0%, 10% {
    transform: translateX(0);
  }
  45%, 55% {
    transform: translateX(var(--scroll-distance));
  }
  90%, 100% {
    transform: translateX(0);
  }
}

/* Optional: Fade effects at edges during animation */
.animated-truncate.is-overflowing:hover::before,
.animated-truncate.is-overflowing:hover::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  pointer-events: none;
  z-index: 1;
}

.animated-truncate.is-overflowing:hover::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.animated-truncate.is-overflowing:hover::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

/* Dark mode support */
.dark-mode .animated-truncate.is-overflowing:hover::before {
  background: linear-gradient(to right, rgba(26,26,26,0.9), transparent);
}

.dark-mode .animated-truncate.is-overflowing:hover::after {
  background: linear-gradient(to left, rgba(26,26,26,0.9), transparent);
}

/* Backward compatibility for existing usage */
.sponsor-marquee-text-truncate {
  /* Keep existing styles for StageManager/SponsorsMarquee */
  max-width: 150px;
}

.m-sponsor-name.sponsor-marquee-text-truncate {
  max-width: 200px;
}