{#- Hero photo frame motif: moiety preset.
    Two-toned village circle — Tugarege (red/top) and Ecerae (dark/bottom)
    with pulsing gold baito at center. -#}
<style>
    @keyframes hero-baito-pulse {
        0%, 100% { opacity: 0.12; }
        50% { opacity: 0.20; }
    }
    @keyframes hero-moiety-shimmer {
        0%, 100% { opacity: 0.42; }
        50% { opacity: 0.48; }
    }
    .hero-baito-pulse { animation: hero-baito-pulse 4s ease-in-out infinite; }
    .hero-moiety-top { animation: hero-moiety-shimmer 7s ease-in-out infinite; }
    .hero-moiety-bot { animation: hero-moiety-shimmer 7s ease-in-out -3.5s infinite; }
    @media (prefers-reduced-motion: reduce) {
        .hero-baito-pulse, .hero-moiety-top, .hero-moiety-bot { 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-top"><rect x="0" y="0" width="500" height="250"/></clipPath>
        <clipPath id="vh-bot"><rect x="0" y="250" width="500" height="250"/></clipPath>
        <filter id="vh-soft" x="-10%" y="-10%" width="120%" height="120%">
            <feGaussianBlur stdDeviation="6"/>
        </filter>
    </defs>
    {# Moiety fills — Tugarege (red/top) and Ecerae (dark/bottom) #}
    <circle class="hero-moiety-top" cx="250" cy="250" r="230" style="fill:var(--td-color-primary)" opacity="0.3" clip-path="url(#vh-top)" filter="url(#vh-soft)"/>
    <circle class="hero-moiety-bot" cx="250" cy="250" r="230" style="fill:var(--td-color-dark, #0B0F17)" opacity="0.3" clip-path="url(#vh-bot)" filter="url(#vh-soft)"/>
    {# Two-toned outer ring — red arc top, dark arc bottom #}
    <g>
        <path d="M480,250 A230,230 0 0,0 20,250" fill="none" style="stroke:var(--td-color-primary)" stroke-width="4" opacity="0.16"/>
        <path d="M480,250 A230,230 0 0,1 20,250" fill="none" style="stroke:var(--td-color-dark, #0B0F17)" stroke-width="4" opacity="0.16"/>
        {# Dividing line (east-west) #}
        <line x1="20" y1="250" x2="480" y2="250" style="stroke:var(--td-color-text-muted, #6B6F5A)" stroke-width="1" opacity="0.12"/>
        {# Middle ring #}
        <circle cx="250" cy="250" r="165" fill="none" style="stroke:var(--td-color-primary)" stroke-width="1" opacity="0.06"/>
    </g>
    {# Baito center — gray ring, gold fill, dark inner dot #}
    <g>
        <circle cx="250" cy="250" r="50" fill="none" style="stroke:var(--td-color-border-dark, #B8AFA2)" stroke-width="4" opacity="0.15"/>
        <circle class="hero-baito-pulse" cx="250" cy="250" r="35" style="fill:var(--td-color-accent)" opacity="0.15"/>
        <circle cx="250" cy="250" r="18" style="fill:var(--td-color-dark, #0B0F17)" opacity="0.18"/>
    </g>
</svg>
