{#
    Audio icon — inline SVG equalizer (ring + 11 vertical bars).

    Inlined rather than served through components/_icon.html.twig because each
    bar must be animated individually when the soundtrack plays (a CSS mask
    renders the whole glyph as one flat shape). Colors come from `currentColor`.

    Bars keep the exact geometry of the original music.svg export: 11 bars,
    2.7126 apart, 0.875 wide, all centered on y=21.
#}
{% set bars = [
    {x: 7,       y: 19.2555, h: 3.4890},
    {x: 9.7126,  y: 15.9107, h: 10.1786},
    {x: 12.4231, y: 17.9816, h: 6.0379},
    {x: 15.1367, y: 12,      h: 18},
    {x: 17.8490, y: 14.5696, h: 12.8609},
    {x: 20.5625, y: 18.5085, h: 4.9829},
    {x: 23.2760, y: 14.5696, h: 12.8609},
    {x: 25.9874, y: 12,      h: 18},
    {x: 28.7009, y: 17.9816, h: 6.0379},
    {x: 31.4132, y: 15.9107, h: 10.1786},
    {x: 34.1267, y: 19.2555, h: 3.4890}
] %}
<svg class="audio-icon{% if class is defined and class %} {{ class }}{% endif %}" width="36" height="36" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    {# Drawn as a circle (not the exported rounded rect) so the bars stay the
       only <rect> children and :nth-of-type() indexes them 1..11 in SCSS. #}
    <circle class="audio-icon__ring" cx="21" cy="21" r="20.5" stroke="currentColor"/>
    {% for bar in bars %}
        <rect class="audio-icon__bar" x="{{ bar.x }}" y="{{ bar.y }}" width="0.875" height="{{ bar.h }}" rx="0.4375" fill="currentColor"/>
    {% endfor %}
</svg>