{#- Hero photo frame motif: weave preset.
    Simple concentric circles with a single accent ring and pulsing center.
    Culturally neutral, suitable for any community. -#}
<style>
    @keyframes hero-center-pulse {
        0%, 100% { opacity: 0.12; }
        50% { opacity: 0.22; }
    }
    @keyframes hero-ring-shimmer {
        0%, 100% { opacity: 0.1; }
        50% { opacity: 0.16; }
    }
    .hero-center-pulse { animation: hero-center-pulse 5s ease-in-out infinite; }
    .hero-ring-outer { animation: hero-ring-shimmer 9s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
        .hero-center-pulse, .hero-ring-outer { animation: none; }
    }
</style>
<svg class="hero-village-svg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
        <filter id="vh-soft" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur stdDeviation="6"/>
        </filter>
    </defs>
    {# Outer circle #}
    <circle class="hero-ring-outer" cx="250" cy="250" r="230" fill="none" style="stroke:var(--td-color-primary)" stroke-width="3" opacity="0.1" filter="url(#vh-soft)"/>
    {# Middle circle #}
    <circle cx="250" cy="250" r="165" fill="none" style="stroke:var(--td-color-primary)" stroke-width="1.5" opacity="0.08"/>
    {# Accent ring #}
    <circle cx="250" cy="250" r="100" fill="none" style="stroke:var(--td-color-accent, var(--td-color-primary))" stroke-width="2" opacity="0.1"/>
    {# Pulsing center #}
    <circle class="hero-center-pulse" cx="250" cy="250" r="35" style="fill:var(--td-color-primary)" opacity="0.12"/>
    <circle cx="250" cy="250" r="15" style="fill:var(--td-color-accent, var(--td-color-primary))" opacity="0.15"/>
</svg>
