<?php
/**
 * Curly arrow — draws path then pops arrowhead.
 *
 * @var string    $color
 * @var float|int $delay
 * @var int       $size   px width
 */
$color = $color ?? 'var(--cc-clay)';
$delay = $delay ?? 0.5;
$size = (int)($size ?? 110);
$h = (int)round($size * 76 / 110);
?>
<svg viewBox="0 0 120 80" width="<?= $size ?>" height="<?= $h ?>" style="overflow:visible;" aria-hidden="true">
    <path d="M6,10 C 30,30 14,58 60,54 C 92,51 100,40 110,30"
          fill="none" stroke="<?= h($color) ?>" stroke-width="2" stroke-linecap="round"
          pathLength="1"
          class="cc-draw-path"
          style="--cc-draw-delay: <?= h((string)$delay) ?>s;" />
    <path d="M110,30 L 100,26 M110,30 L 106,40"
          fill="none" stroke="<?= h($color) ?>" stroke-width="2" stroke-linecap="round"
          style="opacity:0;animation: cc-fade-in 0.3s <?= h((string)($delay + 1.2)) ?>s forwards;" />
</svg>
