Coach Arrow

<!-- Coach Arrow — handwritten-style arrow drawing toward the target -->
<div class="nuda-arrow">
  <span class="nuda-arrow__label">Click here</span>
  <svg class="nuda-arrow__svg" viewBox="0 0 80 50"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
    <path class="nuda-arrow__path" d="M10 10 Q 30 10, 40 25 T 70 40" />
    <path class="nuda-arrow__head" d="M62 38 L70 40 L66 32" />
  </svg>
  <span class="nuda-arrow__target">→</span>
</div>

/* Coach Arrow
   Drawn arrow + label that bobs to call out a target element.
   Customize: --arrow-accent, the SVG path geometry. */

.nuda-arrow {
  --arrow-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 110px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--arrow-accent);
  padding: 8px;
}

.nuda-arrow__label {
  font: 700 1rem ui-sans-serif, system-ui, sans-serif;
  color: var(--arrow-accent);
  letter-spacing: -0.02em;
  animation: nuda-arrow-bob 2s ease-in-out infinite;
}

.nuda-arrow__svg {
  position: absolute;
  left: 12px;
  top: 22px;
  width: 120px;
  height: 70px;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

.nuda-arrow__path,
.nuda-arrow__head {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: nuda-arrow-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.nuda-arrow__head { animation-delay: 1.5s; }

.nuda-arrow__target {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font: 800 1.4rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  background: rgba(228, 255, 84, 0.15);
  border: 1px solid var(--arrow-accent);
  padding: 4px 12px;
  border-radius: 6px;
  animation: nuda-arrow-bob 2s ease-in-out infinite;
}

@keyframes nuda-arrow-draw { to { stroke-dashoffset: 0; } }

@keyframes nuda-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-arrow__path, .nuda-arrow__head { stroke-dashoffset: 0; animation: none; }
  .nuda-arrow__label, .nuda-arrow__target { animation: none; }
}