/* "A Moshi alternative where sessions survive without tmux": this post's own
   hero art and chooser, and its row art on the blog index (.moshialt-mini,
   under .post-art). Linked from the post and from the blog index.

   The art is one session on a PC, still running tests, above the phone's
   connection to it. The connection drops twice (Wi-Fi, mobile data, Wi-Fi
   again); each new segment starts with a dot that reattaches to the same
   session, and the test output keeps growing while the phone is away. It
   plays once on load and rests on its last frame, which is also what reduced
   motion shows. */

/* ------------------------------------------------------------- hero art --- */

.moshialt-art {
  /* Campbell colours, unthemed like the terminal itself. */
  --moshialt-prompt: #3b78ff;
  --moshialt-ok: #16c60c;
  --moshialt-reach: 20px;
  width: 100%;
  max-width: 340px;
  padding-bottom: 8px;
}

.moshialt-pc {
  border-radius: var(--r-group);
  background: var(--elevated);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.moshialt-pc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.moshialt-pc-icon,
.moshialt-phone {
  fill: none;
  stroke: var(--label-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moshialt-pc-icon {
  width: 20px;
  height: 20px;
}

.moshialt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--green-fill);
  color: var(--green-ink);
  font-size: var(--caption);
  font-weight: 600;
  white-space: nowrap;
}

.moshialt-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.moshialt-term {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 112px;
  padding: 12px 14px 14px;
  background: var(--term-bg);
  color: var(--term-fg);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.moshialt-line {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moshialt-ps {
  color: var(--moshialt-prompt);
}

.moshialt-ok {
  color: var(--moshialt-ok);
}

/* The phone's link: a phone glyph, then segments separated by breaks. */
.moshialt-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--moshialt-reach) 6px 0;
}

.moshialt-phone {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
}

.moshialt-track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.moshialt-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.moshialt-s2 {
  flex-grow: 1.35;
}

/* The connection itself. */
.moshialt-seg::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--tint);
  transform-origin: left center;
}

/* Where the phone reattaches: a dot, with a dashed line up to the session. */
.moshialt-seg i {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-fill);
}

.moshialt-seg i::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 4.5px;
  height: var(--moshialt-reach);
  border-left: 1.5px dashed var(--green);
}

.moshialt-seg b {
  display: block;
  margin-top: 18px;
  padding-left: 1px;
  color: var(--label-2);
  font-size: var(--caption);
  font-weight: 500;
  white-space: nowrap;
}

/* A drop: two short slashes where the line breaks. */
.moshialt-gap {
  position: relative;
  flex: none;
  width: 22px;
  height: 11px;
}

.moshialt-gap::before,
.moshialt-gap::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 2px;
  height: 13px;
  border-radius: 1px;
  background: var(--red);
  transform: rotate(20deg);
}

.moshialt-gap::before {
  left: 7px;
}

.moshialt-gap::after {
  left: 13px;
}

/* The one moment: the link draws, drops, reattaches, twice, while the
   session's output keeps arriving. */
.moshialt-s1::before {
  animation: moshialt-draw 0.7s var(--ease-out-soft) 0.3s both;
}

.moshialt-s1 i,
.moshialt-s1 b {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 0.3s both;
}

.moshialt-g1 {
  animation: moshialt-fade 0.3s var(--ease-out-soft) 1.1s both;
}

.moshialt-o1 {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 1.3s both;
}

.moshialt-s2::before {
  animation: moshialt-draw 0.7s var(--ease-out-soft) 1.8s both;
}

.moshialt-s2 i,
.moshialt-s2 b {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 1.8s both;
}

.moshialt-g2 {
  animation: moshialt-fade 0.3s var(--ease-out-soft) 2.6s both;
}

.moshialt-o2 {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 2.8s both;
}

.moshialt-s3::before {
  animation: moshialt-draw 0.7s var(--ease-out-soft) 3.3s both;
}

.moshialt-s3 i,
.moshialt-s3 b {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 3.3s both;
}

.moshialt-o3 {
  animation: moshialt-fade 0.4s var(--ease-out-soft) 3.8s both;
}

@keyframes moshialt-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes moshialt-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moshialt-art *,
  .moshialt-art *::before,
  .moshialt-art *::after {
    animation: none !important;
  }
}

/* Beside the title on a wide screen, level with the byline; below the lede
   on a phone. */
@media (min-width: 820px) {
  .post-hero .moshialt-art {
    width: 340px;
    margin-top: 28px;
  }
}

/* ------------------------------------------------ who should pick which --- */

.moshialt-pick {
  margin: 0 0 56px;
  padding: 18px 22px 10px;
  border-radius: var(--r-group);
  background: var(--surface);
  box-shadow: var(--highlight);
}

.moshialt-pick .moshialt-pick-title {
  margin: 0 0 12px;
  font-size: var(--headline);
  letter-spacing: var(--track-body);
}

.moshialt-pick-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.moshialt-pick-col {
  padding: 0 22px 8px 0;
}

.moshialt-pick-col + .moshialt-pick-col {
  padding: 0 0 8px 22px;
  border-left: 0.5px solid var(--hairline-strong);
}

.moshialt-pick-col h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--label);
  font-size: var(--callout);
  font-weight: 600;
  letter-spacing: var(--track-callout);
}

.moshialt-pick-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.moshialt-pick-col li {
  padding: 8px 0;
  color: var(--label-2);
  font-size: var(--callout);
  letter-spacing: var(--track-callout);
}

.moshialt-pick-col li + li {
  border-top: 0.5px solid var(--hairline);
}

/* Agent Terminal is ours: said here as the post says it in its note. */
.moshialt-ours {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--tint-fill);
  box-shadow: inset 0 0 0 0.5px var(--tint-line);
  color: var(--tint);
  font-size: var(--caption);
  font-weight: 600;
}

@media (max-width: 600px) {
  .moshialt-pick {
    padding: 16px 16px 6px;
  }

  .moshialt-pick-cols {
    grid-template-columns: 1fr;
  }

  .moshialt-pick-col {
    padding: 0 0 8px;
  }

  .moshialt-pick-col + .moshialt-pick-col {
    padding: 12px 0 8px;
    border-left: 0;
    border-top: 0.5px solid var(--hairline-strong);
  }
}

/* ----------------------------------------------- the blog index's row --- */

/* A smaller drawing of the same moment, for the post's row on the index: the
   session's progress keeps filling while the phone's link breaks twice, and
   each dot where the phone reattaches pulses in turn. It loops only while its
   row is open; at rest, and with reduced motion, it is the full frame. */

.post-art .moshialt-mini {
  --post-art-top: 18px;
  width: 260px;
}

.moshialt-mini svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.moshialt-mini-pc {
  fill: var(--elevated);
  filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.12));
}

.moshialt-mini-icon,
.moshialt-mini-phone {
  fill: none;
  stroke: var(--label-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moshialt-mini-chip {
  fill: var(--green-fill);
}

.moshialt-mini-chip-dot {
  fill: var(--green);
}

.moshialt-mini-chip-bar {
  fill: var(--green-ink);
  opacity: 0.55;
}

.moshialt-mini-term {
  fill: var(--term-bg);
}

.moshialt-mini-text {
  fill: var(--term-fg);
  font-family: var(--mono);
  font-size: 11px;
}

.moshialt-mini-ps {
  fill: #3b78ff;
}

.moshialt-mini-ok {
  fill: #16c60c;
}

.moshialt-mini-track {
  fill: var(--term-fg);
  opacity: 0.16;
}

.moshialt-mini-bar {
  fill: #16c60c;
  transform-box: fill-box;
  transform-origin: left center;
}

.moshialt-mini-seg {
  stroke: var(--tint);
  stroke-width: 3;
  stroke-linecap: round;
}

.moshialt-mini-drop {
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
}

.moshialt-mini-reach {
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.moshialt-mini-ring {
  fill: var(--green-fill);
  transform-box: fill-box;
  transform-origin: center;
}

.moshialt-mini-dot {
  fill: var(--green);
}

@media (prefers-reduced-motion: no-preference) {
  .moshialt-mini-bar {
    animation: moshialt-mini-fill 6s var(--ease-out-soft) infinite;
  }

  .moshialt-mini-ring {
    animation: moshialt-mini-pulse 6s var(--ease-out-soft) infinite;
  }

  .moshialt-mini-r2 {
    animation-delay: 2s;
  }

  .moshialt-mini-r3 {
    animation-delay: 4s;
  }
}

.post-card:not(.is-expanded) .moshialt-mini * {
  animation-play-state: paused;
}

@keyframes moshialt-mini-fill {
  0% {
    transform: scaleX(0.12);
  }
  85%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes moshialt-mini-pulse {
  0%,
  20%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  8% {
    transform: scale(1.8);
    opacity: 0.35;
  }
}

@media (min-width: 760px) {
  .post-art .moshialt-mini {
    --post-art-top: 28px;
    width: 272px;
  }
}