/* ========================================
   Marquee Animations - BLANQ Digital
   ======================================== */

/* Horizontal Scrolling Marquee - Unusually Reference Style */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
}

.marquee-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

.marquee-inner:hover {
  animation-play-state: paused;
}

.marquee-slow {
  animation-duration: 45s;
}

.marquee-fast {
  animation-duration: 20s;
}

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

/* Marquee with separator (asterisk/star) */
.marquee-separator {
  margin: 0 1rem;
  color: var(--text-secondary);
  opacity: 0.5;
  font-size: 1.2em;
}

/* Section label ticker style */
.section-label-ticker {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
}

/* Marquee with Separator */
.marquee-separator {
  margin: 0 1rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* Stop animation on hover (optional) */
.marquee:hover .marquee-inner {
  animation-play-state: paused;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-inner {
    animation: none;
  }
}

/* Mobile adjustments: avoid tiny horizontal overflows from 100vw */
@media (max-width: 767px) {
  .marquee {
    width: 100%;
  }
}