Inline Quote with Link

<p class="nuda-inline-quote">
  Trusted by teams at
  <a class="nuda-inline-quote__link" href="#orbit">Orbit</a>,
  <a class="nuda-inline-quote__link" href="#helix">Helix</a>, and
  <a class="nuda-inline-quote__link" href="#lumen">Lumen</a>,
  who call it
  <q class="nuda-inline-quote__q">the most useful thing we've added all year</q>.
</p>

/* Inline Quote with Link
   Inline blockquote tucked into running prose with animated link underlines. */

.nuda-inline-quote {
  max-width: 480px;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #a0a0a8;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.nuda-inline-quote__link {
  position: relative;
  color: #fafafa;
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(#e4ff54, #e4ff54);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition:
    background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

.nuda-inline-quote__link:hover,
.nuda-inline-quote__link:focus-visible {
  background-size: 100% 1px;
  color: #e4ff54;
  outline: none;
}

.nuda-inline-quote__q {
  font-style: italic;
  color: #fafafa;
  quotes: "\201C" "\201D";
}

.nuda-inline-quote__q::before {
  content: open-quote;
  color: #e4ff54;
  margin-right: 0.05em;
}

.nuda-inline-quote__q::after {
  content: close-quote;
  color: #e4ff54;
  margin-left: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-inline-quote__link { transition: none; }
}