/* ══════════════════════════════════════════════════
 LIVE FEED - shared "the problem" animation
 Used on dynamic-pages, data-analysis, morphdesk to
 visualise the volume of un-acted-on inputs (visitors,
 events, tickets) all hitting the same dead-end.

 Markup:
 .lf
 .lf-head
 .lf-title (with .lf-dot)
 .lf-counter
 .lf-body
 .lf-track ← duplicate row set inside for seamless loop
 .lf-row × N
 .lf-row-icon (background via inline --c)
 .lf-row-meta
 .lf-row-who
 .lf-row-src
 .lf-row-served
 .lf-pill (.bad)
 .lf-foot
 .lf-arrow
 .lf-foot-text
══════════════════════════════════════════════════ */

.lf {
 background: #ffffff;
 border: 1px solid rgba(18, 20, 28, 0.08);
 border-radius: 14px;
 box-shadow:
 0 1px 2px rgba(18, 20, 28, 0.03),
 0 24px 60px -16px rgba(18, 20, 28, 0.16);
 overflow: hidden;
}

/* ── Head ── */
.lf-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 16px;
 background: linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 100%);
 border-bottom: 1px solid rgba(18, 20, 28, 0.08);
}

.lf-title {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 font-family: var(--mono);
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--ink, #0a0a0a);
}

.lf-dot {
 width: 7px; height: 7px;
 border-radius: 50%;
 background: var(--ix-success, #15a14a);
 position: relative;
 flex-shrink: 0;
}

.lf-dot::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 50%;
 background: var(--ix-success, #15a14a);
 animation: lf-ping 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes lf-ping {
 0% { transform: scale(1); opacity: 0.55; }
 80% { transform: scale(2.6); opacity: 0; }
 100% { transform: scale(2.6); opacity: 0; }
}

.lf-counter {
 font-family: var(--mono);
 font-size: 10px;
 letter-spacing: 0.08em;
 color: var(--ink-muted, #5c5c5c);
 white-space: nowrap;
}

.lf-counter b {
 color: var(--ix-danger, #dc2626);
 font-weight: 700;
 font-feature-settings: "tnum" 1;
}

/* ── Streaming body - vertical marquee with mask fades ── */
.lf-body {
 position: relative;
 height: 232px;
 overflow: hidden;
 -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
 mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.lf-track {
 display: flex;
 flex-direction: column;
 animation: lf-stream 22s linear infinite;
 will-change: transform;
}

@keyframes lf-stream {
 0% { transform: translateY(0); }
 100% { transform: translateY(-50%); }
}

.lf-row {
 display: grid;
 grid-template-columns: 28px minmax(0, 1fr) auto auto;
 align-items: center;
 gap: 12px;
 padding: 11px 16px;
 border-bottom: 1px dashed rgba(18, 20, 28, 0.07);
 font-family: var(--sans);
}

.lf-row:last-child { border-bottom: 1px dashed rgba(18, 20, 28, 0.07); }

.lf-row-icon {
 width: 26px; height: 26px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--c, #5b3de8);
 color: #fff;
 font-family: var(--sans);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: -0.02em;
 flex-shrink: 0;
}

.lf-row-meta {
 display: flex;
 flex-direction: column;
 gap: 1px;
 min-width: 0;
}

.lf-row-who {
 font-size: 12.5px;
 font-weight: 600;
 color: var(--ink, #0a0a0a);
 letter-spacing: -0.005em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.lf-row-src {
 font-size: 10.5px;
 color: var(--ink-light, #9a9a9a);
 letter-spacing: -0.005em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.lf-row-served {
 font-family: var(--mono);
 font-size: 10px;
 color: var(--ink-light, #9a9a9a);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 white-space: nowrap;
}

/* ── Status pill (bad/regression by default) ── */
.lf-pill {
 font-family: var(--sans);
 font-size: 9.5px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 3px 8px;
 border-radius: 999px;
 white-space: nowrap;
}

.lf-pill.bad {
 background: rgba(220, 38, 38, 0.10);
 color: var(--ix-danger, #dc2626);
 position: relative;
}

.lf-pill.bad::before {
 content: "";
 position: absolute;
 inset: -2px;
 border-radius: 999px;
 border: 1px solid rgba(220, 38, 38, 0.4);
 opacity: 0;
 animation: lf-bad-pulse 2.6s ease-in-out infinite;
 pointer-events: none;
}

.lf-pill.warn {
 background: rgba(180, 83, 9, 0.10);
 color: #b45309;
}

@keyframes lf-bad-pulse {
 0%, 100% { transform: scale(1); opacity: 0; }
 50% { transform: scale(1.28); opacity: 0.55; }
}

/* ── Foot ── */
.lf-foot {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 16px;
 background: linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 100%);
 border-top: 1px solid rgba(18, 20, 28, 0.08);
}

.lf-arrow {
 font-family: var(--mono);
 color: var(--ix-danger, #dc2626);
 font-weight: 800;
 font-size: 14px;
 line-height: 1;
 animation: lf-arrow 1.6s ease-in-out infinite;
 flex-shrink: 0;
}

@keyframes lf-arrow {
 0%, 100% { transform: translateY(0); opacity: 0.6; }
 50% { transform: translateY(2px); opacity: 1; }
}

.lf-foot-text {
 font-family: var(--sans);
 font-size: 11.5px;
 color: var(--ink-muted, #5c5c5c);
 letter-spacing: -0.005em;
 flex: 1;
 min-width: 0;
}

.lf-foot-text b { color: var(--ink, #0a0a0a); font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 720px) {
 .lf-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
 .lf-row-served { display: none; }
 .lf-body { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
 .lf-track,
 .lf-dot::before,
 .lf-pill.bad::before,
 .lf-arrow { animation: none !important; }
}