Pinned Caption

<div class="nuda-scx-pinned__scene">
  <div class="nuda-scx-pinned__media">
    <!-- your image or video here -->
  </div>
  <div class="nuda-scx-pinned__caption">
    <span class="nuda-scx-pinned__step">02 / 04</span>
    <p class="nuda-scx-pinned__text">
      This caption stays pinned while content scrolls behind it
    </p>
    <span class="nuda-scx-pinned__cue">↓ scroll</span>
  </div>
</div>

.nuda-scx-pinned {
  padding: .5rem;
  width: 100%;
}

.nuda-scx-pinned__scene {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-scx-pinned__media {
  padding: .75rem .75rem 0;
}

.nuda-scx-pinned__svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.nuda-scx-pinned__caption {
  padding: .65rem .9rem .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.nuda-scx-pinned__step {
  color: #e4ff54;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.nuda-scx-pinned__text {
  color: #cfcfcf;
  font-size: .75rem;
  line-height: 1.45;
  margin: 0;
}

.nuda-scx-pinned__cue {
  color: #444;
  font-size: .65rem;
  margin-top: .1rem;
}

.nuda-scx-pinned__cue--anim {
  animation: _nuda-scxCueBob 1.6s ease-in-out infinite;
}

@keyframes _nuda-scxCueBob {
  0%,100% {
    transform: translateY(0);
    opacity: .4;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-scx-pinned__cue--anim {
    animation: none;
  }
}