/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — NEWS CRAWL
   assets/css/news-crawl.css
   ─────────────────────────────────────────────────
   Depends on: tokens.css

   Covers:
     - .news-crawl wrapper (overflow, mask fade, borders)
     - .news-crawl-scanline overlay
     - .news-crawl-edge top/bottom glow lines
     - .news-crawl-track (flex row, willChange for rAF)
     - .news-crawl-item layout
     - .news-crawl-logo (network SVG badge)
     - .news-crawl-severity and tier variants
     - .news-crawl-text and severity color variants
     - .news-crawl-divider
     - @keyframes for border glow and emergency pulse
   ═══════════════════════════════════════════════════ */

/* ─── KEYFRAMES ─── */
@keyframes newsCrawlBorderGlow {
  0%, 100% { border-color: rgba(94, 196, 212, 0.15); }
  50%      { border-color: rgba(94, 196, 212, 0.35); }
}

@keyframes newsCrawlEmergencyPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ─── WRAPPER ─── */
.news-crawl {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0d1118 50%, var(--bg-deep) 100%);
  border-top: 1px solid rgba(94, 196, 212, 0.15);
  border-bottom: 1px solid rgba(94, 196, 212, 0.15);
  overflow: hidden;
  font-family: var(--mono);
  animation: newsCrawlBorderGlow 4s ease-in-out infinite;
  user-select: none;

  /* 64px fade on each edge — masks the track content, no overlay divs needed */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0px,
    black 64px,
    black calc(100% - 64px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0px,
    black 64px,
    black calc(100% - 64px),
    transparent 100%
  );
}

/* ─── SCANLINE OVERLAY ─── */
.news-crawl-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(94, 196, 212, 0.015) 2px,
    rgba(94, 196, 212, 0.015) 4px
  );
  pointer-events: none;
  z-index: 3;
}

/* ─── EDGE GLOW LINES ─── */
.news-crawl-edge-top,
.news-crawl-edge-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 196, 212, 0.4), transparent);
  z-index: 4;
  pointer-events: none;
}
.news-crawl-edge-top    { top: 0; }
.news-crawl-edge-bottom { bottom: 0; }

/* ─── SCROLLING TRACK ─── */
.news-crawl-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 0;
  will-change: transform;
}

/* ─── INDIVIDUAL BROADCAST ITEM ─── */
.news-crawl-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ─── NETWORK LOGO BADGE ─── */
/* Pill-shaped container holding the network SVG.
   Fixed height, auto width respects each logo's native aspect ratio. */
.news-crawl-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  flex-shrink: 0;
}

.news-crawl-logo img {
  height: 16px;
  width: auto;
  display: block;
}

/* ─── SEVERITY BADGE ─── */
.news-crawl-severity {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Severity tier variants */
.news-crawl-severity--standard {
  border: 1px solid rgba(122, 138, 154, 0.2);
  background: rgba(122, 138, 154, 0.08);
  color: #7a8a9a;
}

.news-crawl-severity--advisory {
  border: 1px solid rgba(94, 196, 212, 0.25);
  background: rgba(94, 196, 212, 0.08);
  color: #5ec4d4;
}

.news-crawl-severity--urgent {
  border: 1px solid rgba(232, 166, 52, 0.3);
  background: rgba(232, 166, 52, 0.08);
  color: #e8a634;
}

.news-crawl-severity--emergency {
  border: 1px solid rgba(232, 69, 69, 0.35);
  background: rgba(232, 69, 69, 0.1);
  color: #e84545;
  animation: newsCrawlEmergencyPulse 1.5s ease-in-out infinite;
}

/* ─── DOT SEPARATOR ─── */
.news-crawl-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #2a3a4a;
  flex-shrink: 0;
}

/* ─── BROADCAST TEXT ─── */
.news-crawl-text {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: #8899aa;
}

.news-crawl-text--urgent {
  color: var(--gold);
}

.news-crawl-text--emergency {
  color: #e8a0a0;
}

/* ─── DIVIDER BETWEEN BROADCASTS ─── */
.news-crawl-divider {
  display: inline-block;
  padding: 0 32px;
  flex-shrink: 0;
  color: #3a4a5a;
  font-size: 0.75rem;
}