/* "This page ships itself" — the version ticker and the shipped banner.
 * Same block grammar as the page: hard ink shadows, 6px radius, mono
 * metadata, and a square mark (machines wear squares). Motion rides the
 * page's tokens, so the global reduced-motion gate in styles.css covers
 * everything here too. */

/* ── ticker line ─────────────────────────────────────────────────────── */

#ship-ticker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
}
#ship-ticker:empty { display: none; }

/* the ship mark: a small accent square — this line belongs to the machines */
#ship-ticker::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-accent);
  box-shadow: 0 1px 0 var(--block-ink);
}

@keyframes ship-swell {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); color: var(--brand-accent); }
  100% { transform: scale(1); }
}
#ship-ticker.is-shipping {
  animation: ship-swell 700ms var(--ease-spring) both;
}
#ship-ticker.is-shipping::before {
  animation: ship-mark-spin 700ms var(--ease-spring) both;
}
@keyframes ship-mark-spin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.35); }
  to   { transform: rotate(360deg) scale(1); }
}

/* ── shipped banner — drops in from the top of the viewport ──────────── */

.ship-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 640px);
  padding: 10px 12px 10px 14px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--block-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  transform: translate(-50%, 0);
  animation: ship-banner-drop 420ms var(--ease-spring) both;
}
@keyframes ship-banner-drop {
  from { transform: translate(-50%, calc(-100% - 24px)); }
  to   { transform: translate(-50%, 0); }
}

.ship-banner-star {
  flex: none;
  color: var(--brand-accent);
  font-size: 14px;
}

.ship-banner-text { min-width: 0; }

.ship-banner-see {
  flex: none;
  font: inherit;
  font-weight: 700;
  color: var(--brand-accent-on, #fff);
  background: var(--brand-accent);
  border: 0;
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--block-ink);
  transition: transform var(--motion-instant) linear,
    box-shadow var(--motion-instant) linear,
    background var(--motion-quick) linear;
}
.ship-banner-see:hover { background: #5b40c2; }
.ship-banner-see:active { transform: translateY(2px); box-shadow: none; }

@media (max-width: 560px) {
  .ship-banner { top: 10px; gap: 9px; font-size: 12px; }
}