{# Border motion: chromatic-pulse — 3-stop rotating chromatic gradient + stroke-width pulse.
   Context: uid, w, h, rx #}
{% set defs %}
<linearGradient id="{{ uid }}-chromatic" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="var(--dna-signal)">
    <animate attributeName="stop-color"
             values="var(--dna-signal);var(--dna-status-warning-core);var(--dna-status-failing-core);var(--dna-signal)"
             dur="4s" repeatCount="indefinite"/>
  </stop>
  <stop offset="50%" stop-color="var(--dna-status-warning-core)">
    <animate attributeName="stop-color"
             values="var(--dna-status-warning-core);var(--dna-status-failing-core);var(--dna-signal);var(--dna-status-warning-core)"
             dur="4s" repeatCount="indefinite"/>
  </stop>
  <stop offset="100%" stop-color="var(--dna-status-failing-core)">
    <animate attributeName="stop-color"
             values="var(--dna-status-failing-core);var(--dna-signal);var(--dna-status-warning-core);var(--dna-status-failing-core)"
             dur="4s" repeatCount="indefinite"/>
  </stop>
</linearGradient>
{% endset %}
{% set overlay %}
<rect x="{{ border_rect_x }}" y="{{ border_rect_y }}" width="{{ border_rect_w }}" height="{{ border_rect_h }}" rx="{{ rx }}"
      fill="none" stroke="url(#{{ uid }}-chromatic)" stroke-width="2" opacity="0.7">
  <animate attributeName="stroke-width" values="2;5;2" dur="2.5s"
           repeatCount="indefinite" calcMode="spline"
           keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"/>
  <animate attributeName="opacity" values="0.7;1;0.7"
           dur="2.5s" repeatCount="indefinite"/>
</rect>
{% endset %}
