Cloud Upload Launch

<button class="nuda-ai2-cloud-launch" type="button" aria-label="Upload" aria-pressed="false">
  <svg class="nuda-ai2-cloud-launch__svg" viewBox="0 0 24 24" aria-hidden="true">
    <path class="nuda-ai2-cloud-launch__cloud"
      d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" />
    <g class="nuda-ai2-cloud-launch__arrow">
      <polyline points="16 16 12 12 8 16" />
      <line x1="12" y1="12" x2="12" y2="21" />
    </g>
  </svg>
</button>

/* Cloud Upload Launch — vanilla JS
   Marks uploading, plays the launch animation once, reverts after 0.7s. */

(function () {
  document.querySelectorAll(".nuda-ai2-cloud-launch").forEach(function (btn) {
    btn.addEventListener("click", function () {
      if (btn.getAttribute("aria-pressed") === "true") return;
      btn.setAttribute("aria-pressed", "true");
      btn.setAttribute("aria-label", "Uploading");
      setTimeout(function () {
        btn.setAttribute("aria-pressed", "false");
        btn.setAttribute("aria-label", "Upload");
      }, 700);
    });
  });
})();

.nuda-ai2-cloud-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fafafa;
  cursor: pointer;
  transition: border-color .25s,color .25s;
}

.nuda-ai2-cloud-launch:hover,.nuda-ai2-cloud-launch:focus-visible {
  border-color: rgba(228,255,84,.4);
  outline: none;
}

.nuda-ai2-cloud-launch:focus-visible {
  box-shadow: 0 0 0 2px rgba(228,255,84,.5);
}

.nuda-ai2-cloud-launch[aria-pressed="true"] {
  color: #e4ff54;
}

.nuda-ai2-cloud-launch__svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.nuda-ai2-cloud-launch__cloud {
  transform-origin: 12px 13px;
}

.nuda-ai2-cloud-launch__arrow {
  transform-origin: 12px 16px;
}

.nuda-ai2-cloud-launch[aria-pressed="true"] .nuda-ai2-cloud-launch__arrow {
  animation: _nuda-ai2cloud-launch .7s cubic-bezier(.4,.2,.2,1);
}

.nuda-ai2-cloud-launch[aria-pressed="true"] .nuda-ai2-cloud-launch__cloud {
  animation: nuda-ai2-cloud-launch-puff .7s ease-out;
}

@keyframes _nuda-ai2cloud-launch {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
    transform: translateY(1px);
  }
  55% {
    opacity: 0;
    transform: translateY(-16px);
  }
  56% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nuda-ai2-cloud-launch-puff {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ai2-cloud-launch[aria-pressed="true"] .nuda-ai2-cloud-launch__arrow,.nuda-ai2-cloud-launch[aria-pressed="true"] .nuda-ai2-cloud-launch__cloud {
    animation: none !important;
  }
}