Deployment Artifact

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-artifact-title" class="pulsar pulsar-deploy-artifact" data-pulsar="deploy-artifact" role="img" viewBox="0 0 160 96"><title id="deploy-artifact-title">Versioned build artifact descending into an open repository folder with extraction progress bar</title><g fill="none" stroke="currentColor" stroke-width=".7" opacity=".5"><rect width="44" height="36" x="10" y="30" rx="2"></rect><path id="deploy-artifact-tab" d="M10 30v-4h16l4 4"></path></g><rect id="deploy-artifact-folderfill" width="44" height="36" x="10" y="30" fill="currentColor" opacity=".08" rx="2"></rect><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".18"><line x1="16" x2="46" y1="40" y2="40"></line><line x1="16" x2="38" y1="44" y2="44"></line><line x1="16" x2="42" y1="48" y2="48"></line></g><g fill="currentColor" font-family="monospace"><text x="14" y="53" font-size="5" opacity=".55">build/</text><text x="14" y="60" font-size="4" opacity=".4">artifacts</text></g><g id="deploy-artifact-pkg"><rect width="28" height="20" x="60" y="10" fill="none" stroke="currentColor" stroke-width=".6" opacity=".5" rx="2"></rect><line x1="60" x2="88" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width=".8"></line><line x1="74" x2="74" y1="10" y2="30" fill="none" stroke="currentColor" stroke-width=".8"></line><text x="63" y="8" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">v2.4.1</text></g><g id="deploy-artifact-arrow" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1" opacity=".8"><line x1="74" x2="74" y1="30" y2="56"></line><polygon fill="currentColor" stroke="none" points="70,52 74,60 78,52" opacity=".8"></polygon></g><g fill="currentColor" font-family="monospace"><text x="100" y="34" font-size="4" opacity=".4">sha256</text><text id="deploy-artifact-hash" x="100" y="40" font-size="5" font-weight="700" opacity="1">a3f9…</text><text x="100" y="48" font-size="4" opacity=".4">size</text><text x="100" y="54" font-size="5" opacity=".55">14.2 MB</text><text x="100" y="62" font-size="4" opacity=".4">status</text><text id="deploy-artifact-status" x="100" y="68" font-size="5" font-weight="700" opacity="1">downloading</text></g><rect width="140" height="5" x="10" y="76" fill="none" stroke="currentColor" stroke-width=".5" opacity=".3" rx="1"></rect><rect id="deploy-artifact-prog" width="0" height="5" x="10" y="76" fill="currentColor" opacity=".55" rx="1"></rect><g fill="currentColor" font-family="monospace"><text x="10" y="88" font-size="4" opacity=".4">extracting artifact</text></g></svg>

.pulsar-deploy-artifact {
  --pulsar-accent: currentColor;
}

/* Accent elements */
.pulsar-deploy-artifact #deploy-artifact-folderfill,
.pulsar-deploy-artifact #deploy-artifact-prog {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-artifact #deploy-artifact-hash,
.pulsar-deploy-artifact #deploy-artifact-status {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-artifact #deploy-artifact-pkg text {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-artifact #deploy-artifact-pkg line,
.pulsar-deploy-artifact #deploy-artifact-arrow line {
  stroke: var(--pulsar-accent, currentColor);
}

/* ── Package descends ── */
.pulsar-deploy-artifact #deploy-artifact-pkg,
.pulsar-deploy-artifact #deploy-artifact-arrow {
  animation: deploy-artifact-descend 9000ms 0ms ease-in-out infinite;
}

@keyframes deploy-artifact-descend {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  55% {
    transform: translateY(30px);
    opacity: 1;
  }
  65% {
    transform: translateY(30px);
    opacity: 0;
  }
  70% {
    transform: translateY(0);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Folder tab lifts ── */
.pulsar-deploy-artifact #deploy-artifact-tab {
  transform-origin: 10px 26px;
  animation: deploy-artifact-lidopen 9000ms 0ms ease-in-out infinite;
}

@keyframes deploy-artifact-lidopen {
  0% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-28deg);
  }
  75% {
    transform: rotate(-28deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ── Folder fill brightens on receive ── */
.pulsar-deploy-artifact #deploy-artifact-folderfill {
  animation: deploy-artifact-folderglint 9000ms 0ms ease-in-out infinite;
}

@keyframes deploy-artifact-folderglint {
  0%,
  100% {
    opacity: 0.08;
  }
  60% {
    opacity: 0.45;
  }
  80% {
    opacity: 0.15;
  }
}

/* ── Progress bar grows ── */
.pulsar-deploy-artifact #deploy-artifact-prog {
  animation: deploy-artifact-progress 9000ms 0ms ease-in-out infinite;
}

@keyframes deploy-artifact-progress {
  0% {
    width: 0;
  }
  65% {
    width: 140;
  }
  75% {
    width: 140;
  }
  80% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

/* ── Status text accent pulse ── */
.pulsar-deploy-artifact #deploy-artifact-status {
  animation: deploy-artifact-statuspulse 9000ms 0ms ease-in-out infinite;
}

@keyframes deploy-artifact-statuspulse {
  0%,
  60% {
    opacity: 1;
  }
  66% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* ── Hash flicker ── */
.pulsar-deploy-artifact #deploy-artifact-hash {
  animation: deploy-artifact-hashflicker 9000ms 0ms step-end infinite;
}

@keyframes deploy-artifact-hashflicker {
  0%,
  100% {
    opacity: 1;
  }
  33% {
    opacity: 0.4;
  }
  34% {
    opacity: 1;
  }
  66% {
    opacity: 0.4;
  }
  67% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-artifact * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-artifact #deploy-artifact-prog {
    width: 140;
    opacity: 1;
  }
  .pulsar-deploy-artifact #deploy-artifact-folderfill {
    opacity: 0.35;
  }
}