/* ==========================================================================
   COMPONENT: SECTION BREAK MARQUEE (PT RAFSTAR LOGISTIC)
   File: component-marquee.css
   Theme: Deep Obsidian (#02091c) + Electric Royal Blue (#1b43fe)
   ========================================================================== */

.nx-marquee-wrap {
  width: 100%;
  background-color: var(--nx-bg-dark-base, #02091c);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(27, 67, 254, 0.15);
  border-bottom: 1px solid rgba(27, 67, 254, 0.15);
  user-select: none;
}

/* Masking Gradasi Halus di Sisi Kiri & Kanan (Vignette Fade) */
.nx-marquee-wrap::before,
.nx-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 10rem);
  z-index: 2;
  pointer-events: none;
}

.nx-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #02091c 0%, rgba(2, 9, 28, 0) 100%);
}

.nx-marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #02091c 0%, rgba(2, 9, 28, 0) 100%);
}

/* Baris Marquee */
.nx-marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* Track Animasi Linear */
.nx-marquee-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: nxMarqueeScroll 28s linear infinite;
  will-change: transform;
}

/* Pause Saat Kursor Diarahkan */
.nx-marquee-wrap:hover .nx-marquee-track {
  animation-play-state: paused;
}

/* Track Baris Kedua: Arah Berlawanan */
.nx-marquee-row.is-reverse .nx-marquee-track {
  animation: nxMarqueeScrollReverse 32s linear infinite;
}

/* Konten Teks Marquee */
.nx-marquee-content {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
  flex-shrink: 0;
}

/* Tipografi Huruf Besar Industrial Khas BYD */
.nx-marquee-text {
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* Gaya Teks Garis Luar (Outlined Stroke Text) */
.nx-marquee-text.is-outlined {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.45);
  transition: -webkit-text-stroke 300ms ease, color 300ms ease;
}

.nx-marquee-row.is-reverse:hover .nx-marquee-text.is-outlined {
  -webkit-text-stroke: 1.5px var(--nx-c-primary, #1b43fe);
}

/* Ikon Pemisah: Panah Elektrik Diagonal */
.nx-marquee-icon {
  width: clamp(1.25rem, 2.5vw, 1.85rem);
  height: clamp(1.25rem, 2.5vw, 1.85rem);
  stroke-width: 2.5;
  color: var(--nx-c-primary, #1b43fe);
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(27, 67, 254, 0.5));
}

/* Aksen Pemisah Track 2: Sparkle Star */
.nx-marquee-star {
  font-size: 1.15rem;
  color: var(--nx-c-primary, #1b43fe);
  flex-shrink: 0;
}

/* ==========================================================================
   ANIMATION KEYFRAMES (PERFECT SEAMLESS 0% -> -50%)
   ========================================================================== */
@keyframes nxMarqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes nxMarqueeScrollReverse {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   ELEMENTOR ADMIN EDITOR FIX
   ========================================================================== */
.elementor-editor-active .nx-marquee-track {
  animation-play-state: running !important;
}