{#- Hero background animation: lattice preset.
    Diagonal crossing lines expanding outward, evoking the waitiwina woven
    fishing dams of the Enawenê-Nawê. Golden yellow and accent red lines
    create a cross-hatched lattice that pulses and grows. -#}
<style>
    .hero-lattice-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        shape-rendering: geometricPrecision;
    }
    .hero-lattice-bg line {
        fill: none;
        vector-effect: non-scaling-stroke;
        stroke-linecap: round;
    }
    .hl-primary { stroke: var(--td-color-primary); }
    .hl-accent { stroke: var(--td-color-accent, var(--td-color-primary)); }
    .hl-dash-weave {
        stroke-dasharray: 8 20 4 28 12 16;
        stroke-dashoffset: 7;
    }
    .hl-dash-trap {
        stroke-dasharray: 18 24 6 32 10 20;
        stroke-dashoffset: 13;
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-lattice-bg { display: none; }
    }
</style>
<svg class="hero-lattice-bg" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    {# Source 1 — top-left, primary diagonal lines expanding #}
    {% for spread, delay, dur in [(80, 0, 11), (130, -2, 11), (180, -4, 11)] %}
    <line class="hl-primary hl-dash-weave" x1="200" y1="180" x2="200" y2="180" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="200;{{ 200 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="180;{{ 180 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="200;{{ 200 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="180;{{ 180 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.22;0.18;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    <line class="hl-primary hl-dash-weave" x1="200" y1="180" x2="200" y2="180" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="200;{{ 200 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="180;{{ 180 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="200;{{ 200 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="180;{{ 180 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.22;0.18;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    {% endfor %}
    {# Source 2 — top-right, accent diamond lattice #}
    {% for spread, delay, dur in [(70, -3, 13), (120, -5, 13), (160, -7, 13)] %}
    <line class="hl-accent hl-dash-trap" x1="900" y1="160" x2="900" y2="160" stroke-width="2" opacity="0">
        <animate attributeName="x1" values="900;{{ 900 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="160;{{ 160 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="900;{{ 900 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="160;{{ 160 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.15;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    <line class="hl-accent hl-dash-trap" x1="900" y1="160" x2="900" y2="160" stroke-width="2" opacity="0">
        <animate attributeName="x1" values="900;{{ 900 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="160;{{ 160 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="900;{{ 900 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="160;{{ 160 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.15;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    {% endfor %}
    {# Source 3 — center-bottom, primary cross-hatching #}
    {% for spread, delay, dur in [(90, -1, 12), (140, -3, 12), (190, -6, 12)] %}
    <line class="hl-primary hl-dash-weave" x1="550" y1="480" x2="550" y2="480" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="550;{{ 550 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="480;{{ 480 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="550;{{ 550 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="480;{{ 480 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.16;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    <line class="hl-primary hl-dash-weave" x1="550" y1="480" x2="550" y2="480" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="550;{{ 550 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="480;{{ 480 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="550;{{ 550 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="480;{{ 480 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.16;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    {% endfor %}
    {# Source 4 — bottom-right, accent weave #}
    {% for spread, delay, dur in [(75, -2, 10), (115, -4, 10), (155, -8, 10)] %}
    <line class="hl-accent hl-dash-trap" x1="1000" y1="520" x2="1000" y2="520" stroke-width="2" opacity="0">
        <animate attributeName="x1" values="1000;{{ 1000 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="520;{{ 520 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="1000;{{ 1000 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="520;{{ 520 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.18;0.14;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    <line class="hl-accent hl-dash-trap" x1="1000" y1="520" x2="1000" y2="520" stroke-width="2" opacity="0">
        <animate attributeName="x1" values="1000;{{ 1000 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="520;{{ 520 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="1000;{{ 1000 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="520;{{ 520 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.18;0.14;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    {% endfor %}
    {# Source 5 — center-top, primary lattice #}
    {% for spread, delay, dur in [(85, -5, 14), (135, -7, 14), (175, -9, 14)] %}
    <line class="hl-primary hl-dash-weave" x1="700" y1="120" x2="700" y2="120" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="700;{{ 700 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="120;{{ 120 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="700;{{ 700 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="120;{{ 120 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.15;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    <line class="hl-primary hl-dash-weave" x1="700" y1="120" x2="700" y2="120" stroke-width="2.5" opacity="0">
        <animate attributeName="x1" values="700;{{ 700 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y1" values="120;{{ 120 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="x2" values="700;{{ 700 - spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="y2" values="120;{{ 120 + spread }}" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.2;0.15;0" keyTimes="0;0.16;0.72;1" dur="{{ dur }}s" begin="{{ delay }}s" repeatCount="indefinite"/>
    </line>
    {% endfor %}
</svg>
