/* ═══════════════════════════════════════════════════════════════
   PRAANA — MODULE · ASCII HERO  ·  css
   Every colour is a token. Prefix: mx-
   ═══════════════════════════════════════════════════════════════ */

.mx-ascii {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
}

/* ── header strip ─────────────────────────────────────────── */
.mx-ascii-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mx-ascii-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ascii-live {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--green); flex-shrink: 0;
}
.mx-ascii-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  animation: mx-ascii-pulse 2.4s var(--ease-io) infinite;
}
@keyframes mx-ascii-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .32 } }

/* ── stack ────────────────────────────────────────────────── */
.mx-ascii-stack { display: flex; flex-direction: column; gap: .55rem; min-height: 0; }

.mx-ascii-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 20% 0%, var(--card) 0%, var(--paper-2) 62%, var(--paper-3) 100%);
  box-shadow: var(--sh-1);
  height: clamp(320px, 42vw, 500px);
}

.mx-ascii-cv { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── typewriter chips ─────────────────────────────────────── */
.mx-ascii-typer {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  backdrop-filter: saturate(160%) blur(6px);
  padding: .68rem .8rem;
  pointer-events: none;
}
.mx-ascii-h {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.36rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--ink);
  min-height: 1.14em;
}
.mx-ascii-s {
  margin: .42rem 0 0;
  font-family: var(--mono);
  font-size: var(--t-fine);
  line-height: 1.45;
  color: var(--ink-3);
  min-height: 1.45em;
}
.mx-ascii-cur {
  display: inline-block;
  margin-left: 2px;
  font-style: normal;
  color: var(--green);
  animation: mx-ascii-pulse 1.6s steps(1, end) infinite;
}

.mx-ascii-typer-in {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  max-width: min(400px, calc(100% - 108px));
  display: none;
}
.mx-ascii-typer-out { display: block; }

@media (min-width: 800px) {
  .mx-ascii-typer-in { display: block; }
  .mx-ascii-typer-out { display: none; }
}

/* ── axis gizmo ───────────────────────────────────────────── */
.mx-ascii-gizmo {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 54px; height: 46px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .7);
  color: var(--ink-3);
  pointer-events: none;
}
.mx-ascii-gizmo svg { display: block; width: 100%; height: 100%; }

/* ── sparkline strip ──────────────────────────────────────── */
.mx-ascii-spark {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  height: 54px;
  width: min(360px, calc(40% + 40px));
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .62);
  pointer-events: none;
}
.mx-ascii-spark svg { display: block; width: 100%; height: 100%; }

/* below this the subject is centred rather than offset, so the telemetry
   strip would sit on top of it — drop it rather than overlap. The figure
   loses nothing it has to say. */
@media (max-width: 860px) {
  .mx-ascii-spark { display: none; }
}
@media (max-width: 700px) {
  .mx-ascii-panel { height: clamp(300px, 80vw, 400px); }
  .mx-ascii-gizmo { width: 44px; height: 38px; right: 9px; top: 9px; }
}
@media (max-width: 360px) {
  .mx-ascii-gizmo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-ascii-live i, .mx-ascii-cur { animation: none; }
}