Char Stagger Rise

<!-- Char Stagger Rise — characters rise in sequence
     Each char gets a stagger delay via the --i custom property. -->
<span class="nuda-char-rise" aria-label="Rise up">
  <span class="nuda-char-rise__char" style="--i:0" aria-hidden="true">R</span>
  <span class="nuda-char-rise__char" style="--i:1" aria-hidden="true">i</span>
  <span class="nuda-char-rise__char" style="--i:2" aria-hidden="true">s</span>
  <span class="nuda-char-rise__char" style="--i:3" aria-hidden="true">e</span>
  <span class="nuda-char-rise__char" style="--i:4" aria-hidden="true">&nbsp;</span>
  <span class="nuda-char-rise__char" style="--i:5" aria-hidden="true">u</span>
  <span class="nuda-char-rise__char" style="--i:6" aria-hidden="true">p</span>
</span>

/* ── Char Stagger Rise ───────────────────────────────────────
   Customize:
     --nuda-cr-offset   : starting vertical offset
     --nuda-cr-speed    : per-character duration
     --nuda-cr-stagger  : delay between characters
   ──────────────────────────────────────────────────────────── */
.nuda-char-rise {
  --nuda-cr-offset: 0.6em;
  --nuda-cr-speed: 0.5s;
  --nuda-cr-stagger: 0.06s;

  display: inline-flex;
  font-size: 2rem;
  font-weight: 800;
  color: #fafafa;
}

.nuda-char-rise__char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(var(--nuda-cr-offset));
  animation: nuda-char-rise var(--nuda-cr-speed)
    cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * var(--nuda-cr-stagger));
}

@keyframes nuda-char-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-char-rise__char {
    animation: none;
    opacity: 1;
    transform: none;
  }
}