Pull-down Search

<div class="nuda-pdsearch">
  <div class="nuda-pdsearch__bar">
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
    </svg>
    <span>Search</span>
  </div>
  <div class="nuda-pdsearch__content">
    <div class="nuda-pdsearch__title">Inbox</div>
    <div class="nuda-pdsearch__row"></div>
    <div class="nuda-pdsearch__row"></div>
    <div class="nuda-pdsearch__row"></div>
  </div>
</div>

/* Pull-down Search
   Hidden search bar that reveals as content pushes down.
   Customize: --pds-bar, --pds-bg */

.nuda-pdsearch {
  --pds-bar: rgba(255, 255, 255, 0.06);
  --pds-bg: #0c0c10;
  position: relative;
  width: 280px;
  height: 220px;
  background: var(--pds-bg);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  font-family: system-ui;
}

.nuda-pdsearch__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: var(--pds-bar);
  color: #63636e;
  font: 500 12px/1 system-ui;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: nuda-pds-bar 4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.nuda-pdsearch__content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: nuda-pds-content 4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.nuda-pdsearch__title { color: #fafafa; font: 700 14px/1 system-ui; margin-bottom: 4px; }

.nuda-pdsearch__row {
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes nuda-pds-bar {
  0%, 15% { transform: translateY(-100%); opacity: 0; }
  35%, 75% { transform: translateY(0); opacity: 1; }
  95%, 100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes nuda-pds-content {
  0%, 15% { transform: translateY(0); }
  35%, 75% { transform: translateY(36px); }
  95%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pdsearch__bar,
  .nuda-pdsearch__content { animation: none; }
  .nuda-pdsearch__bar { transform: translateY(0); opacity: 1; }
  .nuda-pdsearch__content { transform: translateY(36px); }
}