{# @description Breaks the words it wraps into slices that jump sideways in two of the theme's colours for a moment, every few seconds. A few words, on one line. #}
{# @prop from:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"primary" | description:"The colour of the slices that jump left" #}
{# @prop to:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"secondary" | description:"The colour of the slices that jump right" #}
{# @prop intensity:number | default:"1" | description:"How far the slices jump, as a multiple: 2 is twice as far" #}
{# @prop frequency:number | default:"1" | description:"How often it breaks, as a multiple: 1 is every four seconds, 2 every two, and 0 never" #}
{# @prop repeat:number | description:"How many times it breaks before it stops. Left out, it never stops." #}
{# @prop class:text | description:"Extra classes on the span" #}
{# @slot not the CSS — The words to break. Rendered three times, so plain words and nothing with an id. #}
{% comment %}
  The words never move: the slices are two coloured copies laid over them, on
  two clocks so the pair never repeats exactly. A box of its own, so it does not
  wrap (docs/adr/0005-text-effects-are-spans-moved-by-css.md).
{% endcomment %}
<c-vars from="primary" to="secondary" intensity="1" frequency="1" repeat class />
{% with pace=frequency|floatformat:'-3u'|default:'1' %}
<span class="dce:relative dce:inline-block {{ class }}"
      style="--glitch-intensity: {{ intensity|floatformat:'-3u'|default:'1' }}; --glitch-frequency: {{ pace|default:'1' }}; --glitch-repeat: {{ repeat|floatformat:'-3u'|default:'infinite' }}"
      {{ attrs }}>
  {{ slot }}
  <span aria-hidden="true"
        class="dce:pointer-events-none dce:absolute dce:inset-0 dce:opacity-0 dce:select-none dce:text-{{ from }}
               dce:[--glitch-shift:calc(var(--glitch-intensity,1)*-0.06em)]
               {% if pace != '0' %}dce:motion-safe:animate-[dce-text-glitch_calc(4s/var(--glitch-frequency,1))_step-end_var(--glitch-repeat,infinite)]{% endif %}">{{ slot }}</span>
  <span aria-hidden="true"
        class="dce:pointer-events-none dce:absolute dce:inset-0 dce:opacity-0 dce:select-none dce:text-{{ to }}
               dce:[--glitch-shift:calc(var(--glitch-intensity,1)*0.06em)]
               {% if pace != '0' %}dce:motion-safe:animate-[dce-text-glitch_calc(4s/var(--glitch-frequency,1))_step-end_calc(-0.07s/var(--glitch-frequency,1))_var(--glitch-repeat,infinite)_reverse]{% endif %}">{{ slot }}</span>
</span>
{% endwith %}