/* Hero block at the very top of the apex landing page, visible only while the
   configured Mux live stream is active. The Mux Player web component is
   loaded from CDN in landing.html when `live_playback_id` is in context. */

.livestream-hero {
  position: relative;
  width: 100%;
  margin: 8px 0 28px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px -28px rgba(78, 73, 209, 0.55);
}

.livestream-hero__player {
  display: block;
  width: 100%;
  /* Mux Player honors aspect-ratio on its host element. 16:9 keeps a
     consistent footprint regardless of the actual stream resolution. */
  aspect-ratio: 16 / 9;
  --media-object-fit: contain;
}

.livestream-hero__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.livestream-hero__badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: livestream-pulse 1.6s ease-out infinite;
}

@keyframes livestream-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .livestream-hero__badge-dot {
    animation: none;
  }
}