Blur-to-Clear Reveal

<div class="nuda-scx-blur-reveal__block">
  <p class="nuda-scx-blur-reveal__heading">Clarity emerges</p>
  <p class="nuda-scx-blur-reveal__body">
    Content sharpens as the section scrolls into view — a polished entrance.
  </p>
</div>

.nuda-scx-blur-reveal {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .5rem;
}

.nuda-scx-blur-reveal__chip {
  align-self: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .15rem .6rem;
  color: #555;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nuda-scx-blur-reveal__chip--clear {
  color: #e4ff54;
  border-color: rgba(228,255,84,.3);
  background: rgba(228,255,84,.06);
}

.nuda-scx-blur-reveal__block {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .8rem 1rem;
}

.nuda-scx-blur-reveal__heading {
  color: #fafafa;
  font-size: .88rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}

.nuda-scx-blur-reveal__body {
  color: #777;
  font-size: .72rem;
  line-height: 1.5;
  margin: 0;
}

.nuda-scx-blur-reveal__heading--anim {
  animation: _nuda-scxBlurIn .9s cubic-bezier(.16,1,.3,1) both;
}

.nuda-scx-blur-reveal__body--anim {
  animation: _nuda-scxBlurIn .9s cubic-bezier(.16,1,.3,1) .2s both;
}

@keyframes _nuda-scxBlurIn {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-scx-blur-reveal__heading--anim,.nuda-scx-blur-reveal__body--anim {
    animation: none;
  }
}