SVG Line Draw Loader

<!--
  SVG Line Draw Loader - advanced HyperFrames primitive.

  This is intentionally seekable: drive it from a paused GSAP timeline.
  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
-->

<div class="hf-advanced-svg-line-draw-loader">
  <svg viewBox="0 0 520 220"><path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" /></svg>
</div>

<style>
  .hf-advanced-svg-line-draw-loader {
    color: var(--fg, #111827);
    font-family: var(--font-body, Inter, system-ui, sans-serif);
  }
  .hf-advanced-svg-line-draw-loader {
    width: 720px;
    min-height: 420px;
    border-radius: var(--radius, 30px);
    padding: var(--space-3, 36px);
    background: var(--surface, #fff);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
    display: grid;
    place-items: center;
  }
  .hf-advanced-svg-line-draw-loader .grid {
    display: grid;
    grid-template-columns: repeat(8, 46px);
    gap: var(--space-1, 10px);
  }
  .hf-advanced-svg-line-draw-loader .cell {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
    opacity: var(--hf-cell-opacity, 1);
  }
  .hf-advanced-svg-line-draw-loader svg {
    width: 520px;
    height: 220px;
    overflow: visible;
  }
  .hf-advanced-svg-line-draw-loader path {
    fill: none;
    stroke: var(--accent, #18181b);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 900;
    stroke-dashoffset: var(--hf-dash, 0);
  }
  .hf-advanced-svg-line-draw-loader .stack {
    position: relative;
    width: 520px;
    height: 260px;
  }
  .hf-advanced-svg-line-draw-loader .card {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
    opacity: var(--hf-card-opacity, 1);
  }
</style>

<!--
  Timeline integration:
  const startTime = 0;
  tl.fromTo('.hf-advanced-svg-line-draw-loader path', { '--hf-dash': 900 }, { '--hf-dash': 0, duration: 1.35, ease: 'power3.inOut' }, startTime);
-->