{#- chirp-ui: Holy Light
    Divine ascending sparkles with parallax depth layers and golden glow. Pure CSS.

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

        {% call holy_light() %}
            <h1>Radiant hero content</h1>
        {% end %}

        {% call holy_light(variant="silver", intensity="intense") %}
            <p>Silver divine light</p>
        {% end %}
-#}

{% def holy_light(intensity="", variant="", cls="") %}
{# @consumes _hero_variant from: hero_effects — falls back to "" #}
{% set _variant = (variant if variant else consume("_hero_variant", "")) | validate_variant(("", "default", "gold", "silver", "holy"), "") %}
{% set intensity = intensity | validate_variant(("", "default", "subtle", "intense"), "") %}
{% set variant_class = " chirpui-holy-light--" ~ _variant if _variant else "" %}
{% set intensity_class = " chirpui-holy-light--" ~ intensity if intensity else "" %}
{% set far_glyphs = ["✦", "·", "✦", "·", "✦"] %}
{% set mid_glyphs = ["★", "✦", "◇", "✦", "★"] %}
{% set near_glyphs = ["✦", "★", "✦", "★"] %}
{% set far_positions = [(8, 18), (76, 36), (34, 8), (62, 16), (18, 54)] %}
{% set mid_positions = [(50, 58), (30, 30), (72, 20), (16, 42), (84, 62)] %}
{% set near_positions = [(12, 78), (66, 68), (42, 44), (88, 38)] %}
<div class="chirpui-holy-light{{ variant_class }}{{ intensity_class }}{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-holy-light__layers" aria-hidden="true">
        <div class="chirpui-holy-light__layer chirpui-holy-light__layer--far">
            {% for i in range(5) %}
            {% set pos = far_positions[i] %}
            <span class="chirpui-holy-light__mote" style="left: {{ pos[0] }}%; bottom: {{ pos[1] }}%">{{ far_glyphs[i] }}</span>
            {% end %}
        </div>
        <div class="chirpui-holy-light__layer chirpui-holy-light__layer--mid">
            {% for i in range(5) %}
            {% set pos = mid_positions[i] %}
            <span class="chirpui-holy-light__mote" style="left: {{ pos[0] }}%; bottom: {{ pos[1] }}%">{{ mid_glyphs[i] }}</span>
            {% end %}
        </div>
        <div class="chirpui-holy-light__layer chirpui-holy-light__layer--near">
            {% for i in range(4) %}
            {% set pos = near_positions[i] %}
            <span class="chirpui-holy-light__mote" style="left: {{ pos[0] }}%; bottom: {{ pos[1] }}%">{{ near_glyphs[i] }}</span>
            {% end %}
        </div>
    </div>
    <div class="chirpui-holy-light__content">
        {% slot %}
    </div>
</div>
{% end %}