Animated Wave Edge Footer

<!-- Animated Wave Edge Footer -->
<footer class="nuda-ft2-wave-edge">
  <svg class="nuda-ft2-wave-edge__wave" aria-hidden="true" viewBox="0 0 300 24" preserveAspectRatio="none">
    <path d="M0 12 Q 15 0 30 12 T 60 12 T 90 12 T 120 12 T 150 12 T 180 12 T 210 12 T 240 12 T 270 12 T 300 12" />
  </svg>
  <div class="nuda-ft2-wave-edge__row">
    <span class="nuda-ft2-wave-edge__brand">NudaUI</span>
    <span class="nuda-ft2-wave-edge__meta">© 2025 · Built with zero dependencies</span>
  </div>
</footer>

.nuda-ft2-wave-edge {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}

.nuda-ft2-wave-edge__wave {
  display: block;
  width: 100%;
  height: 16px;
}

.nuda-ft2-wave-edge__wave path {
  fill: none;
  stroke: #e4ff54;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: _nuda-ft2WaveEdgeFlow 2.4s linear infinite;
}

.nuda-ft2-wave-edge__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  font-size: 12px;
}

.nuda-ft2-wave-edge__brand {
  color: #fafafa;
  font-weight: 600;
}

.nuda-ft2-wave-edge__meta {
  color: #777;
}

@keyframes _nuda-ft2WaveEdgeFlow {
  to {
    stroke-dashoffset: -36;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ft2-wave-edge__wave path {
    animation: none;
  }
}