/**
 * BannerCast - News Bar Preview
 */

/* ================================
   NEWS BAR PREVIEW CONTAINER
   ================================ */

.news-bar-preview {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 10px,
    transparent 10px,
    transparent 20px
  );
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  overflow: hidden;
}

.news-bar-preview-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 32/1;
  min-height: 48px;
}

/* ================================
   NEWS BAR
   ================================ */

.news-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
  font-family: var(--font-display);
  
  /* CSS Variables for theming */
  --tab-bg-left: #00F0FF;
  --tab-bg-right: #FF0040;
  --tab-text-left: #0A0A10;
  --tab-text-right: #FFFFFF;
  --content-bg: #12121A;
  --content-text: #FFFFFF;
  --separator-color: #666666;
  --separator-size: 16px;
  --scroll-speed: 50s;
  
  /* Visibility states */
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.news-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

.news-bar.hiding {
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
}

/* ================================
   TABS
   ================================ */

.news-bar-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
  height: 100%;
}

.news-bar-tab-left {
  left: 0;
  transform-origin: left center;
  background: var(--tab-bg-left);
  color: var(--tab-text-left);
}

.news-bar-tab-right {
  right: 0;
  transform-origin: right center;
  background: var(--tab-bg-right);
  color: var(--tab-text-right);
}

/* Live dot */
.news-bar-live-dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: var(--radius-full);
  margin-right: var(--spacing-sm);
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
    box-shadow: 0 0 10px 2px currentColor;
  }
}

/* ================================
   CONTENT AREA
   ================================ */

.news-bar-content {
  flex: 1;
  background: var(--content-bg);
  overflow: hidden;
  position: relative;
  height: 100%;
  z-index: 1;
  
  /* Text mask variables */
  --text-mask-left: 0%;
  --text-mask-right: 0%;
}

/* Text masking pseudoelements */
.news-bar-content::before,
.news-bar-content::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  background: var(--content-bg);
}

.news-bar-content::before {
  left: 0;
  width: var(--text-mask-left, 0%);
}

.news-bar-content::after {
  right: 0;
  width: var(--text-mask-right, 0%);
}

/* ================================
   MESSAGE TRACK
   ================================ */

.news-bar-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: scroll-left var(--scroll-speed) linear infinite;
}

.news-bar[data-direction="right"] .news-bar-track {
  animation-name: scroll-right;
}

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

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

/* ================================
   MESSAGE
   ================================ */

.news-bar-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-md);
  white-space: nowrap;
  color: var(--content-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-body);
}

.news-bar-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  flex-shrink: 0;
}

.news-bar-message.pulsing .news-bar-message-icon {
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--category-color, rgba(0, 240, 255, 0.4));
  }
  50% {
    box-shadow: 0 0 15px 5px var(--category-color, rgba(0, 240, 255, 0.4));
  }
}

/* ================================
   SEPARATOR
   ================================ */

.news-bar-separator {
  padding: 0 var(--spacing-md);
  color: var(--separator-color);
  font-size: var(--separator-size);
  opacity: 0.6;
}

.news-bar-separator-dot::before { content: '•'; }
.news-bar-separator-line::before { content: '|'; }
.news-bar-separator-slash::before { content: '/'; }
.news-bar-separator-star::before { content: '★'; }
.news-bar-separator-arrow::before { content: '→'; }