{#- chirp-ui: Rune Field
    Mystical floating ASCII runes drifting in parallax depth layers. Pure CSS.

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

        {% call rune_field() %}
            <h1>Mystical content</h1>
        {% end %}

        {% call rune_field(variant="arcane") %}
            <p>Arcane styled runes</p>
        {% end %}
-#}

{% def rune_field(variant="", cls="") %}
{# @consumes _hero_variant from: hero_effects — falls back to "" #}
{% set _variant = (variant if variant else consume("_hero_variant", "")) | validate_variant(("", "default", "arcane", "frost", "ember"), "") %}
{% set variant_class = " chirpui-rune-field--" ~ _variant if _variant else "" %}
{% set far_runes = ["⊙", "◎", "⊞", "◎", "⊙", "⊞"] %}
{% set mid_runes = ["◇", "⚙", "⛓", "◇", "⚙"] %}
{% set near_runes = ["★", "⚡︎", "✦", "◇"] %}
{% set far_positions = [(6, 18), (86, 12), (24, 72), (68, 46), (14, 42), (78, 82)] %}
{% set mid_positions = [(18, 28), (52, 22), (36, 58), (84, 64), (62, 78)] %}
{% set near_positions = [(12, 72), (46, 42), (66, 62), (82, 28)] %}
<div class="chirpui-rune-field{{ variant_class }}{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-rune-field__layers" aria-hidden="true">
        <div class="chirpui-rune-field__layer chirpui-rune-field__layer--far">
            {% for i in range(6) %}
            {% set pos = far_positions[i] %}
            <span class="chirpui-rune-field__rune" style="left: {{ pos[0] }}%; top: {{ pos[1] }}%">{{ far_runes[i] }}</span>
            {% end %}
        </div>
        <div class="chirpui-rune-field__layer chirpui-rune-field__layer--mid">
            {% for i in range(5) %}
            {% set pos = mid_positions[i] %}
            <span class="chirpui-rune-field__rune" style="left: {{ pos[0] }}%; top: {{ pos[1] }}%">{{ mid_runes[i] }}</span>
            {% end %}
        </div>
        <div class="chirpui-rune-field__layer chirpui-rune-field__layer--near">
            {% for i in range(4) %}
            {% set pos = near_positions[i] %}
            <span class="chirpui-rune-field__rune" style="left: {{ pos[0] }}%; top: {{ pos[1] }}%">{{ near_runes[i] }}</span>
            {% end %}
        </div>
    </div>
    <div class="chirpui-rune-field__content">
        {% slot %}
    </div>
</div>
{% end %}