/* ============================================================
   Live UI overlay — animations on top of the static hero panel
   and product preview terminals. Kept lean; piggybacks on
   the .triage-* and .product-preview classes already in styles.css.
   ============================================================ */

/* === Featured product card layout (homepage #produkty) ===
   SOC Analyst is the headline product — full width, terminal on the
   left, body on the right. MCP konektory sit in a 2-col grid below. */
#produkty .produkty-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#produkty .product-card-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.75rem;
  align-items: stretch;
  padding: 1.75rem;
}

#produkty .product-card-featured .product-preview {
  margin-bottom: 0;
  height: 100%;
  min-height: 16rem;
}

#produkty .product-card-featured .product-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* keep the product-tag pinned to the top, link nudged to the bottom */
#produkty .product-card-featured .product-card-body > p {
  margin-bottom: 1.25rem;
}
#produkty .product-card-featured .feature-list {
  margin-bottom: 1.25rem;
}
#produkty .product-card-featured .card-link {
  margin-top: auto;
}

@media (max-width: 860px) {
  #produkty .product-card-featured {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  #produkty .product-card-featured .product-preview {
    min-height: 14rem;
  }
}

/* When a new alert "arrives" in the top hero row, briefly highlight it. */
.triage-row.is-fresh {
  animation: triage-fresh 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes triage-fresh {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Smooth text content swaps inside a row (description, host, etc.) */
.triage-row-desc,
.triage-row-routing > span:not(.triage-status),
.triage-host,
.triage-code,
.triage-status,
.triage-pill,
.triage-stat-value {
  transition: opacity 0.18s ease;
}

.triage-row.is-swapping .triage-row-desc,
.triage-row.is-swapping .triage-row-meta,
.triage-row.is-swapping .triage-row-routing > span,
.triage-row.is-swapping .triage-status {
  opacity: 0;
}

/* Progress bar transitions for live tick-up */
.triage-bar {
  transition: width 0.4s linear;
}

/* Hide the static status when no progress reached its end */
.triage-status[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* === Streaming terminals in .product-preview === */
.product-preview pre[data-stream] .stream-caret {
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  background: var(--text-muted);
  vertical-align: -1px;
  animation: stream-blink 1s steps(1) infinite;
  margin-left: 1px;
}

@keyframes stream-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* the existing .preview-bar em can opt-in to a green live dot */
.product-preview .preview-bar em.live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: 1px;
  animation: triage-pulse 1.5s ease-in-out infinite;
}

/* Respect reduced motion: pause all the loops, leave a static snapshot */
@media (prefers-reduced-motion: reduce) {
  .triage-row.is-fresh { animation: none; }
  .triage-bar { transition: none; }
  .stream-caret,
  .product-preview .preview-bar em.live::before { animation: none; }
}