{#- chirp-ui: Symbol Rain
    Matrix-style cascading ASCII characters. Pure CSS.

    Usage:
        from "chirpui/symbol_rain.html" import symbol_rain

        {% call symbol_rain() %}
            <h1>Hero content with falling symbols</h1>
        {% end %}

        {% call symbol_rain(variant="gold", count=8) %}
            <p>Golden symbol cascade</p>
        {% end %}
-#}

{% def symbol_rain(count=6, variant="", cls="") %}
{# @consumes _hero_variant from: hero_effects — falls back to "" #}
{% set _variant = (variant if variant else consume("_hero_variant", "")) | validate_variant(("", "default", "accent", "gold", "muted"), "") %}
{% set variant_class = " chirpui-symbol-rain--" ~ _variant if _variant else "" %}
{% set glyphs = ["◇", "★", "✦", "⚡︎", "●", "◎", "⊞", "⚙", "◉", "⛓"] %}
<div class="chirpui-symbol-rain{{ variant_class }}{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-symbol-rain__canvas" aria-hidden="true">
        {% for i in range(count) %}
        <span class="chirpui-symbol-rain__drop" style="left: {{ (i * 15 + 8) % 92 }}%">{{ glyphs[i % 10] }}</span>
        {% end %}
    </div>
    <div class="chirpui-symbol-rain__content">
        {% slot %}
    </div>
</div>
{% end %}