{#- Hero photo frame motif: lattice preset.
    Concentric circles representing the Enawenê-Nawê village-cosmos layout.
    The outer ring marks the village perimeter; diagonal lattice lines evoke
    the waitiwina woven fishing dams. The central Yãkwa house (haitì) rises
    as a prominent triangle — the sacred centre of ritual life. -#}
<style>
    @keyframes hero-center-pulse {
        0%, 100% { opacity: 0.14; }
        50% { opacity: 0.24; }
    }
    @keyframes hero-ring-shimmer {
        0%, 100% { opacity: 0.12; }
        50% { opacity: 0.18; }
    }
    @keyframes hero-lattice-drift {
        0%, 100% { stroke-dashoffset: 0; }
        50% { stroke-dashoffset: 12; }
    }
    .hero-center-pulse { animation: hero-center-pulse 5s ease-in-out infinite; }
    .hero-ring-outer { animation: hero-ring-shimmer 8s ease-in-out infinite; }
    .hero-ring-middle { animation: hero-ring-shimmer 8s ease-in-out -4s infinite; }
    .hero-lattice-lines line { animation: hero-lattice-drift 12s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
        .hero-center-pulse, .hero-ring-outer, .hero-ring-middle { animation: none; }
        .hero-lattice-lines line { animation: none; }
    }
</style>
<svg class="hero-village-svg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
        <clipPath id="vh-inner"><circle cx="250" cy="250" r="228"/></clipPath>
        <filter id="vh-soft" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur stdDeviation="6"/>
        </filter>
    </defs>
    {# Outer circle — village perimeter #}
    <circle class="hero-ring-outer" cx="250" cy="250" r="230" fill="none" style="stroke:var(--td-color-primary)" stroke-width="4" opacity="0.12"/>
    {# Waitiwina lattice lines — woven diagonal crossings with dash animation #}
    <g class="hero-lattice-lines" clip-path="url(#vh-inner)">
        <line x1="50" y1="50" x2="450" y2="450" style="stroke:var(--td-color-primary)" stroke-width="1.5" stroke-dasharray="6 10" opacity="0.1"/>
        <line x1="450" y1="50" x2="50" y2="450" style="stroke:var(--td-color-primary)" stroke-width="1.5" stroke-dasharray="6 10" opacity="0.1"/>
        <line x1="150" y1="20" x2="480" y2="350" style="stroke:var(--td-color-primary)" stroke-width="1.2" stroke-dasharray="4 12" opacity="0.07"/>
        <line x1="20" y1="150" x2="350" y2="480" style="stroke:var(--td-color-primary)" stroke-width="1.2" stroke-dasharray="4 12" opacity="0.07"/>
        <line x1="350" y1="20" x2="20" y2="350" style="stroke:var(--td-color-primary)" stroke-width="1.2" stroke-dasharray="4 12" opacity="0.07"/>
        <line x1="480" y1="150" x2="150" y2="480" style="stroke:var(--td-color-primary)" stroke-width="1.2" stroke-dasharray="4 12" opacity="0.07"/>
        {# Extra density at center — finer cross-hatching #}
        <line x1="180" y1="100" x2="420" y2="340" style="stroke:var(--td-color-primary)" stroke-width="0.8" stroke-dasharray="3 14" opacity="0.05"/>
        <line x1="100" y1="180" x2="340" y2="420" style="stroke:var(--td-color-primary)" stroke-width="0.8" stroke-dasharray="3 14" opacity="0.05"/>
        <line x1="320" y1="100" x2="80" y2="340" style="stroke:var(--td-color-primary)" stroke-width="0.8" stroke-dasharray="3 14" opacity="0.05"/>
        <line x1="400" y1="180" x2="160" y2="420" style="stroke:var(--td-color-primary)" stroke-width="0.8" stroke-dasharray="3 14" opacity="0.05"/>
    </g>
    {# Middle ring — inner village circle #}
    <circle class="hero-ring-middle" cx="250" cy="250" r="165" fill="none" style="stroke:var(--td-color-primary)" stroke-width="2" opacity="0.12"/>
    {# Inner ring #}
    <circle cx="250" cy="250" r="100" fill="none" style="stroke:var(--td-color-accent, var(--td-color-primary))" stroke-width="1.5" opacity="0.08"/>
    {# Yãkwa house — prominent triangle with golden peak and accent fill #}
    <g>
        <circle cx="250" cy="250" r="50" fill="none" style="stroke:var(--td-color-border-dark, #B8AFA2)" stroke-width="3" opacity="0.12"/>
        <circle class="hero-center-pulse" cx="250" cy="250" r="35" style="fill:var(--td-color-primary)" opacity="0.14"/>
        {# Haitì — Yãkwa house silhouette, larger and more prominent #}
        <path d="M250,222 L232,268 L268,268 Z" style="fill:var(--td-color-accent, var(--td-color-primary))" opacity="0.25"/>
        {# Roof ridge line #}
        <line x1="250" y1="222" x2="250" y2="268" style="stroke:var(--td-color-primary)" stroke-width="0.8" opacity="0.15"/>
        {# Golden peak dot #}
        <circle cx="250" cy="222" r="3" style="fill:var(--td-color-primary)" opacity="0.3"/>
    </g>
</svg>
