{# @description Fills the words it wraps with a gradient of three of the theme's colours, sliding slowly from one end to the other. Headings only. #}
{# @prop from:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"primary" | description:"The colour the gradient starts on" #}
{# @prop via:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"accent" | description:"The colour in the middle" #}
{# @prop to:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"secondary" | description:"The colour the gradient ends on" #}
{# @prop speed:number | default:"1" | description:"How quickly the colours slide, as a multiple: 2 is twice as fast, 0.5 half, and 0 holds them still" #}
{# @prop repeat:number | description:"How many times it slides before it stops. Left out, it never stops." #}
{# @prop class:text | description:"Extra classes on the span" #}
{# @slot not the CSS — The words to fill #}
{% comment %}
  Twice the width of the words and sliding there and back, so it never jumps.
  A palette colour has no promise of contrast against the page, hence headings
  (docs/adr/0005-text-effects-are-spans-moved-by-css.md).
{% endcomment %}
<c-vars from="primary" via="accent" to="secondary" speed="1" repeat class />
{% with pace=speed|floatformat:'-3u'|default:'1' %}
<span class="dce:bg-linear-to-r dce:from-{{ from }} dce:via-{{ via }} dce:to-{{ to }} dce:bg-clip-text dce:text-transparent
             dce:[background-size:200%_100%] dce:[-webkit-box-decoration-break:clone] dce:[box-decoration-break:clone]
             {% if pace != '0' %}dce:motion-safe:animate-[dce-text-slide_calc(6s/var(--gradient-speed,1))_ease-in-out_var(--gradient-repeat,infinite)_alternate]{% endif %}
             {{ class }}"
      style="--gradient-speed: {{ pace|default:'1' }}; --gradient-repeat: {{ repeat|floatformat:'-3u'|default:'infinite' }}"
      {{ attrs }}>{{ slot }}</span>
{% endwith %}