/* sections/live-data.css · owner: live-data-agent
   DESIGN_SPEC §10 (live-data) and §11 (broadcast). Selectors: #live-data, .live-data*, #broadcast, .broadcast*. */

/* ==========================================================================
   live-data (§10)
   ========================================================================== */

#live-data {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Header: h2 + lead, 1000×295 ---- */
.live-data__header {
  display: flex;
  flex-direction: column;
  gap: var(--section-header-gap);
  padding-bottom: var(--section-header-pb);
}

.live-data__title {
  max-width: var(--text-w-feature);
  color: var(--color-text);
}

.live-data__lead {
  max-width: var(--text-w-feature);
  color: var(--color-text-65);
}

.live-data__link {
  color: var(--color-text);
  transition: color var(--t-spring);
}

.live-data__link:hover {
  color: var(--color-text-link-hover);
}

/* ---- Stack ---- */
.live-data__stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

/* ---- Wide card (deep teal), 1000×480 ---- */
.live-data__wide {
  position: relative;
  height: 480px;
  border-radius: var(--radius-20);
  overflow: hidden;
  background: var(--color-surface-deep-teal);
}

/* the <picture> wrapper only switches sources per breakpoint; the img is laid out against the card */
.live-data__wide-picture {
  display: contents;
}

.live-data__wide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-base);
}

.live-data__wide-text {
  position: relative;
  z-index: var(--z-raised);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--card-pad);
}

.live-data__wide-title {
  max-width: 40%;
  color: var(--color-text-inverse);
}

.live-data__wide-body {
  max-width: 38%;
  color: var(--color-text-inverse-90);
}

.live-data__wide-link {
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
}

/* ---- Pair, 484×680 ---- */
.live-data__pair {
  display: flex;
  gap: var(--card-gap);
}

.live-data__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 680px;
  border-radius: var(--radius-20);
  overflow: hidden;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
}

.live-data__card--warm {
  background: var(--color-surface-warm);
}

.live-data__card--video {
  background: var(--color-surface);
  align-items: center;
}

/* Image / video slot: full width, ratio 0.7118, anchored at the bottom */
.live-data__card-media {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 0.7118;
  object-fit: cover;
  z-index: var(--z-base);
}

.live-data__card--video .live-data__card-media {
  aspect-ratio: 0.712;
}

.live-data__card-text {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: 404px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.live-data__card-title {
  color: var(--color-text);
}

.live-data__card-body {
  color: var(--color-text-60);
}

/* Empty overlay layer above the video (reference confetti layer) */
.live-data__card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- Phone (≤789) ---- */
@media (max-width: 789.98px) {
  .live-data__wide {
    height: 600px;
  }

  .live-data__wide-bg {
    inset: auto 0 0 auto;
    width: 646px;
    max-width: none;
    height: 347px;
  }

  .live-data__wide-text {
    height: auto;
    justify-content: flex-start;
    gap: var(--space-20);
  }

  .live-data__wide-title,
  .live-data__wide-body {
    max-width: 100%;
  }

  .live-data__pair {
    flex-direction: column;
  }

  .live-data__card {
    flex: none;
    height: 600px;
  }
}

/* ==========================================================================
   broadcast (§11) · desktop only
   ========================================================================== */

#broadcast {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 1199.98px) {
  #broadcast {
    display: none;
  }
}

/* ---- Display block: 1000×280 ---- */
.broadcast__display {
  position: relative;
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

/* ---- Marquee: 1000×198 at top 41 ---- */
.broadcast__marquee {
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  -webkit-mask-image: var(--mask-marquee);
  mask-image: var(--mask-marquee);
}

.broadcast__row {
  width: 100%;
  height: 55px;
  border-radius: var(--radius-10);
  overflow: clip;
}

.broadcast__track {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  /* trailing gap: the track (7 chips + 7 clones) is then exactly two periods wide,
     so translateX(-50%) lands on the first clone with no jump */
  padding-right: var(--space-16);
  will-change: transform;
}

/* Rows start their loop once JS has measured them (sections/live-data.js).
   Duration = half the track width ÷ --marquee-speed (30 px/s), set per row as --broadcast-duration. */
.broadcast__row.is-running .broadcast__track {
  animation: broadcast-ticker-left var(--broadcast-duration, 40s) linear infinite;
}

.broadcast__row.is-running[data-direction="right"] .broadcast__track {
  animation-name: broadcast-ticker-right;
}

/* Paused while off-screen (IntersectionObserver in sections/live-data.js) */
.broadcast__marquee.is-paused .broadcast__track {
  animation-play-state: paused;
}

@keyframes broadcast-ticker-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes broadcast-ticker-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Reduced motion: the ticker stays frozen at its start position */
@media (prefers-reduced-motion: reduce) {
  .broadcast__row .broadcast__track,
  .broadcast__row.is-running .broadcast__track {
    animation: none;
  }
}

/* ---- Chip: 128–144×55 ---- */
.broadcast__chip {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 55px;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-bg);
  color: var(--color-accent-green);
}

.broadcast__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: inherit;
  pointer-events: none;
}

.broadcast__chip--red {
  background: var(--color-surface-chip-red);
  color: var(--color-danger);
}

.broadcast__chip--red::after {
  border-color: var(--color-border-red);
}

/* Status dot: 30×30 slot, halo + core in the chip's status color */
.broadcast__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  opacity: 0.3;
}

.broadcast__dot::before,
.broadcast__dot::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: 50%;
  background: currentColor;
}

.broadcast__dot::before {
  width: 22px;
  height: 22px;
  opacity: 0.2;
}

.broadcast__dot::after {
  width: 10px;
  height: 10px;
}

.broadcast__chip--red .broadcast__dot {
  opacity: 1;
}

.broadcast__code {
  color: var(--color-text);
  opacity: 0.2;
  white-space: nowrap;
}

.broadcast__chip--red .broadcast__code {
  opacity: 1;
}

/* ---- Device slot: 186×273, centered at top 43, above the marquee ---- */
.broadcast__device {
  position: absolute;
  top: 43px;
  left: 50%;
  z-index: var(--z-raised);
  width: 186px;
  height: 273px;
  object-fit: contain;
  border-radius: var(--radius-12);
  transform: translateX(-50%);
  /* the reference device fades out before the heading */
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 85%);
  pointer-events: none;
}

/* ---- Text block: 1000×179 ---- */
.broadcast__text {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: 0 var(--gutter);
  text-align: center;
}

.broadcast__title {
  max-width: var(--text-w-centered-h3);
  color: var(--color-text);
}

.broadcast__lead {
  max-width: var(--text-w-centered-lead);
  color: var(--color-text-60);
}

.broadcast__lead strong {
  font-weight: var(--fw-bold);
}

.broadcast__cta {
  display: flex;
  justify-content: center;
}

/* Blue pill: 140×44 */
.broadcast__pill {
  height: 44px;
  padding: var(--space-12) var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-50);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  transition: background-color var(--t-bounce);
}

.broadcast__pill:hover {
  background: var(--color-accent-hover);
}

.broadcast__pill-icon {
  flex: none;
  width: 29px;
  height: 20px;
}