{% extends "base.html.j2" %}
{% from "decor.html.j2" import hero_decor, motif_divider, target_rings, target_motif_small, section_heading %}

{% block title %}{{ t.index_title | default('Início') }}{% endblock %}

{% block extra_styles %}
        /* ── Hero ── */
        .index-hero {
            min-height: 92vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 7rem 0 2rem;
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            background: linear-gradient(180deg, #E8E0D3 0%, #EDE9E0 45%, var(--td-color-bg) 100%);
        }
        .index-hero-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 2rem;
            width: 100%;
            position: relative;
            z-index: 2;
        }
        .index-hero-text {
            padding-right: 1rem;
        }
        .index-hero-text h1 {
            font-size: 4rem;
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--td-color-text);
            margin: 0 0 0.35rem 0;
        }
        .hero-tagline {
            font-size: 1.3rem;
            color: var(--td-color-primary);
            font-weight: 500;
            font-family: var(--td-font-headings);
            margin: 0 0 1rem 0;
            letter-spacing: -0.01em;
        }
        .index-hero-text .hero-subtitle {
            font-size: 1.1rem;
            color: var(--td-color-text-muted);
            max-width: 420px;
            margin: 0 0 1.75rem 0;
            line-height: 1.6;
        }

        /* ── Hero visual — photo cluster + village motif ── */
        .index-hero-visual {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            max-width: 480px;
            justify-self: center;
        }
        .hero-village-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            mix-blend-mode: multiply;
        }
        .hero-photo-main {
            position: absolute;
            width: 86%;
            aspect-ratio: 1;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            clip-path: circle(32.5% at center);
            filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
            transition: clip-path 0.6s ease, filter 0.6s ease, z-index 0s;
            cursor: pointer;
            background: var(--td-color-bg);
        }
        .hero-photo-main:hover {
            clip-path: circle(46% at center);
            filter: drop-shadow(0 12px 40px rgba(0,0,0,0.28));
            z-index: 10;
        }
        .hero-photo-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .hero-photo-main:hover ~ .hero-photo-sat {
            opacity: 0.35;
        }
        .hero-photo-sat {
            position: absolute;
            border-radius: 50%;
            overflow: hidden;
            z-index: 4;
            transform: scale(1);
            box-shadow: 0 4px 20px rgba(0,0,0,0.14);
            transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.5s ease, z-index 0s;
            cursor: pointer;
        }
        .hero-photo-sat:hover {
            transform: scale(1.22);
            box-shadow: 0 8px 32px rgba(200,31,45,0.2);
            z-index: 10;
        }
        .hero-photo-sat img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .hero-photo-sat-1 {
            width: 27%;
            aspect-ratio: 1;
            top: 1%;
            right: 7%;
        }
        .hero-photo-sat-2 {
            width: 23%;
            aspect-ratio: 1;
            bottom: 10%;
            right: 1%;
        }
        .hero-photo-sat-3 {
            width: 25%;
            aspect-ratio: 1;
            bottom: 3%;
            left: 5%;
        }
        .hero-photo-sat-4 {
            width: 21%;
            aspect-ratio: 1;
            top: 6%;
            left: 1%;
        }

        /* ── Adugo spine divider ── */
        .hero-adugo-spine {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            z-index: 2;
        }
        .hero-adugo-spine svg {
            width: 100%;
            height: 100%;
        }

        /* ── Hero background animations ── */
        .hero-rings-bg-anim {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            shape-rendering: geometricPrecision;
        }
        .hero-rings-bg-anim circle,
        .hero-rings-bg-anim rect {
            fill: none;
            vector-effect: non-scaling-stroke;
            stroke-linecap: square;
            stroke-linejoin: miter;
            stroke-miterlimit: 2;
            paint-order: stroke;
        }
        .hero-rings-bg-anim circle { stroke-width: 3; }
        .hero-rings-bg-anim rect { stroke-width: 2.6; }
        .hr-red { stroke: var(--td-color-primary); }
        .hr-dark { stroke: var(--td-color-dark, #0B0F17); }
        .hr-dash-bead {
            stroke-dasharray: 4 18 2 26 6 20 3 30;
            stroke-linecap: square;
            stroke-dashoffset: 5;
        }
        .hr-dash-feather {
            stroke-dasharray: 26 30 12 44 18 28;
            stroke-linecap: round;
            stroke-dashoffset: 11;
        }
        .hr-dash-trace {
            stroke-dasharray: 14 40 4 22 10 48 6 34;
            stroke-linecap: round;
            stroke-dashoffset: 17;
        }
        .hr-dash-marks {
            stroke-dasharray: 3 16 5 26 2 38 7 22 4 30;
            stroke-linecap: square;
            stroke-dashoffset: 9;
        }
        /* Subtle moiety rhythm contrast: red denser, dark more spacious */
        .hr-red.hr-dash-bead { stroke-dasharray: 4 14 2 20 6 16 3 24; }
        .hr-dark.hr-dash-bead { stroke-dasharray: 5 22 3 30 7 20 4 34; }
        .hr-red.hr-dash-feather { stroke-dasharray: 22 24 10 36 14 22; }
        .hr-dark.hr-dash-feather { stroke-dasharray: 28 34 12 50 20 30; }
        .hr-red.hr-dash-trace { stroke-dasharray: 12 32 4 18 8 36 6 26; }
        .hr-dark.hr-dash-trace { stroke-dasharray: 16 44 5 26 12 54 7 38; }
        .hr-red.hr-dash-marks { stroke-dasharray: 3 12 5 20 2 30 7 18 4 24; }
        .hr-dark.hr-dash-marks { stroke-dasharray: 4 20 6 32 3 44 8 26 5 36; }

        /* ── Hero ambient animations ── */
        @keyframes hero-sat-orbit-1 {
            0% { translate: 0 0; }
            20% { translate: 4px -6px; }
            40% { translate: 8px -1px; }
            60% { translate: 2px 5px; }
            80% { translate: -4px 2px; }
            100% { translate: 0 0; }
        }
        @keyframes hero-sat-orbit-2 {
            0% { translate: 0 0; }
            18% { translate: -5px -3px; }
            36% { translate: -2px 5px; }
            58% { translate: 6px 7px; }
            78% { translate: 8px -2px; }
            100% { translate: 0 0; }
        }
        @keyframes hero-sat-orbit-3 {
            0% { translate: 0 0; }
            22% { translate: 6px 3px; }
            44% { translate: 1px 8px; }
            63% { translate: -7px 4px; }
            82% { translate: -5px -4px; }
            100% { translate: 0 0; }
        }
        @keyframes hero-sat-orbit-4 {
            0% { translate: 0 0; }
            25% { translate: -3px 6px; }
            46% { translate: -8px 1px; }
            68% { translate: -2px -7px; }
            86% { translate: 5px -5px; }
            100% { translate: 0 0; }
        }
        @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-photo-sat-1 { animation: hero-sat-orbit-1 10.8s linear -1.3s infinite; }
        .hero-photo-sat-2 { animation: hero-sat-orbit-2 9.4s linear -3.8s infinite; }
        .hero-photo-sat-3 { animation: hero-sat-orbit-3 11.6s linear -6.1s infinite; }
        .hero-photo-sat-4 { animation: hero-sat-orbit-4 8.9s linear -2.7s infinite; }
        .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-photo-sat-1, .hero-photo-sat-2, .hero-photo-sat-3, .hero-photo-sat-4,
            .hero-baito-pulse, .hero-moiety-top, .hero-moiety-bot,
            .hero-rings-bg-anim circle,
            .hero-rings-bg-anim rect {
                animation: none;
            }
            .hero-rings-bg-anim {
                display: none;
            }
        }

        /* ── Hero stats strip ── */
        .hero-stats {
            display: flex;
            gap: 0;
            margin-top: 0.75rem;
            padding-top: 0;
            border-top: none;
        }
        .hero-stat {
            display: flex;
            flex-direction: column;
            padding: 0 1.5rem;
            position: relative;
        }
        .hero-stat:first-child {
            padding-left: 0;
        }
        .hero-stat:not(:first-child)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            width: 5px;
            height: 5px;
            background: var(--td-color-gold, #D4A03A);
            opacity: 0.6;
        }
        .hero-stat-num {
            font-family: var(--td-font-headings);
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--td-color-primary);
            line-height: 1.1;
        }
        .hero-stat-label {
            font-size: 0.78rem;
            color: var(--td-color-text-muted);
            margin-top: 0.15rem;
        }

        /* ── Fallback: single-photo hero (no hero_images) ── */
        .index-hero-visual-single {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .hero-photo-disc {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: var(--td-shadow-lg);
            position: relative;
            z-index: 2;
        }
        .hero-photo-disc img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .hero-rings-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .hero-small-target {
            position: absolute;
            bottom: 2rem;
            right: 3rem;
            z-index: 1;
        }

        /* ── Sections label ── */
        .sections-label {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 3.5rem 0 2.5rem;
            max-width: 1120px;
            margin: 0 auto;
        }
        .sections-label-line {
            flex: 1;
            height: 1px;
            background: var(--td-color-gold, #D4A03A);
            opacity: 0.4;
        }
        .sections-label-text {
            font-family: var(--td-font-headings);
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--td-color-gold, #D4A03A);
            opacity: 0.85;
            white-space: nowrap;
        }
        .sections-label-diamond {
            width: 10px;
            height: 10px;
            background: var(--td-color-gold, #D4A03A);
            transform: rotate(45deg);
            opacity: 0.4;
            flex-shrink: 0;
        }

        /* ── Section teasers — unified card layout ── */
        .index-section {
            margin-bottom: 4rem;
        }
        .index-section .td-section-heading h2 {
            font-size: 1.75rem;
        }
        .teaser-card {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: 2rem;
            align-items: center;
            border-left: 4px solid var(--td-color-primary);
            border-image: repeating-linear-gradient(
                to bottom,
                var(--teaser-accent, var(--td-color-primary)) 0px,
                var(--teaser-accent, var(--td-color-primary)) 8px,
                transparent 8px,
                transparent 14px,
                var(--teaser-accent, var(--td-color-primary)) 14px,
                var(--teaser-accent, var(--td-color-primary)) 20px,
                transparent 20px,
                transparent 30px
            ) 4;
            padding-left: 1.5rem;
        }
        .teaser-card[data-section="dictionary"],
        .teaser-card[data-section="recordings"] {
            --teaser-accent: var(--td-color-primary);
        }
        .teaser-card[data-section="encyclopedia"],
        .teaser-card[data-section="videos"] {
            --teaser-accent: var(--td-color-dark, #0B0F17);
        }
        .teaser-card[data-section="fauna"] {
            --teaser-accent: var(--td-color-gold, #D4A03A);
        }
        .teaser-card-image {
            border-radius: var(--td-radius);
            overflow: hidden;
            aspect-ratio: 4/3;
        }
        .teaser-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease, filter 0.35s ease;
        }
        .teaser-card-image:hover img {
            transform: scale(1.04);
            filter: saturate(1.1) brightness(0.95);
        }
        .teaser-card-body {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .teaser-desc {
            color: var(--td-color-text-secondary);
            max-width: 640px;
            line-height: 1.7;
            margin: 0.25rem 0 1rem;
        }
        .teaser-count {
            font-family: var(--td-font-headings);
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--td-color-primary);
            line-height: 1;
        }
        .teaser-count-label {
            font-size: 0.85rem;
            color: var(--td-color-text-muted);
        }
        .teaser-stat {
            display: flex;
            align-items: baseline;
            gap: 0.4rem;
        }

        /* ── Fauna cards grid ── */
        .fauna-teaser-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
        }
        .fauna-teaser-card {
            background: var(--td-color-surface);
            border-radius: var(--td-radius);
            border: 1px solid var(--td-color-border);
            padding: 1.5rem;
            text-align: center;
            box-shadow: var(--td-shadow-sm);
        }
        .fauna-teaser-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        /* ── Gallery teaser ── */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 0.75rem;
        }
        .gallery-item {
            border-radius: var(--td-radius);
            overflow: hidden;
            aspect-ratio: 1;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .gallery-item:hover img {
            transform: scale(1.05);
        }

        /* Legacy card classes for compatibility */
        .platforms {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        .platform-card {
            background: var(--td-color-surface);
            border-radius: var(--td-radius);
            padding: 1.75rem;
            border: 1px solid var(--td-color-border);
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
        }
        .platform-card:hover {
            border-color: var(--td-color-primary);
            transform: translateY(-2px);
        }
        .platform-card h2 {
            margin: 0 0 0.5rem 0;
            color: var(--td-color-primary);
            font-size: 1.4rem;
        }
        .platform-card .card-desc {
            margin: 0 0 1rem 0;
            color: var(--td-color-text-secondary);
            flex: 1;
        }
        .platform-card .card-footer {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-top: auto;
            padding-top: 0.75rem;
            border-top: 1px solid var(--td-color-border-light);
        }
        .platform-card .card-count {
            font-size: 0.9rem;
            color: var(--td-color-text-muted);
        }
        .platform-card .card-count strong {
            font-size: 1.1rem;
            color: var(--td-color-accent-muted);
        }
        .platform-card .card-cta {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--td-color-accent-muted);
        }
        /* ── Responsive ── */
        @media (max-width: 900px) {
            .index-hero-inner {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .index-hero-text {
                padding-right: 0;
                order: 1;
            }
            .index-hero-text h1 {
                font-size: 3rem;
            }
            .index-hero-text .hero-subtitle {
                margin-left: auto;
                margin-right: auto;
            }
            .index-hero-visual {
                order: 2;
                max-width: 360px;
            }
            .hero-stats {
                justify-content: center;
                flex-wrap: wrap;
                gap: 1.5rem;
            }
            .hero-stat {
                align-items: center;
            }
            .hero-photo-disc {
                width: 220px;
                height: 220px;
            }
            .teaser-card {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 600px) {
            .index-hero {
                min-height: auto;
                padding: 5rem 0 2rem;
            }
            .index-hero-text h1 {
                font-size: 2.4rem;
            }
            .hero-tagline {
                font-size: 1.1rem;
            }
            .index-hero-visual {
                max-width: 280px;
            }
            .hero-photo-sat-2,
            .hero-photo-sat-4 {
                display: none;
            }
            .hero-photo-sat-1 {
                width: 30%;
                top: 0;
                right: 2%;
            }
            .hero-photo-sat-3 {
                width: 28%;
                bottom: 0;
                left: 2%;
            }
            .hero-stats {
                gap: 1rem;
            }
            .hero-stat-num {
                font-size: 1.3rem;
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
{% endblock %}

{% block content %}
    {# ── Hero ── #}
    <section class="index-hero">
        {# Expanding rings — SMIL-animated for crisp rendering #}
        <svg class="hero-rings-bg-anim" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            {# Source 1 — top-left, red circles, bead dash #}
            {% for r, delay in [(100, 0), (130, -1), (160, -2)] %}
            <circle class="hr-red hr-dash-bead" cx="180" cy="200" r="14" opacity="0">
                <animate attributeName="r" values="14;{{ r }}" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
            </circle>
            {% endfor %}
            {# Source 2 — top-right, dark diamonds, trace dash #}
            {% for sz, delay in [(80, -3), (110, -4), (140, -5)] %}
            <g transform="translate(900,150)">
                <rect class="hr-dark hr-dash-trace" x="-7" y="-7" width="14" height="14" rx="1" transform="rotate(45)" opacity="0">
                    <animate attributeName="width" values="14;{{ sz }}" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="height" values="14;{{ sz }}" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="x" values="-7;{{ -sz//2 }}" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="y" values="-7;{{ -sz//2 }}" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                </rect>
            </g>
            {% endfor %}
            {# Source 3 — center-bottom, red circles, marks dash #}
            {% for r, delay in [(90, -6), (120, -7), (150, -8)] %}
            <circle class="hr-red hr-dash-marks" cx="550" cy="500" r="14" opacity="0">
                <animate attributeName="r" values="14;{{ r }}" dur="11s" begin="{{ delay }}s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="11s" begin="{{ delay }}s" repeatCount="indefinite"/>
            </circle>
            {% endfor %}
            {# Source 4 — bottom-right, dark circles, feather dash #}
            {% for r, delay in [(90, -2), (120, -3), (150, -4)] %}
            <circle class="hr-dark hr-dash-feather" cx="1050" cy="550" r="14" opacity="0">
                <animate attributeName="r" values="14;{{ r }}" dur="13s" begin="{{ delay }}s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="13s" begin="{{ delay }}s" repeatCount="indefinite"/>
            </circle>
            {% endfor %}
            {# Source 5 — bottom-left, red diamonds, feather dash #}
            {% for sz, delay in [(80, -8), (110, -9), (140, -10)] %}
            <g transform="translate(350,600)">
                <rect class="hr-red hr-dash-feather" x="-7" y="-7" width="14" height="14" rx="1" transform="rotate(45)" opacity="0">
                    <animate attributeName="width" values="14;{{ sz }}" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="height" values="14;{{ sz }}" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="x" values="-7;{{ -sz//2 }}" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="y" values="-7;{{ -sz//2 }}" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="10s" begin="{{ delay }}s" repeatCount="indefinite"/>
                </rect>
            </g>
            {% endfor %}
            {# Source 6 — top-center, dark circles, bead dash #}
            {% for r, delay in [(110, -5), (140, -6), (170, -7)] %}
            <circle class="hr-dark hr-dash-bead" cx="750" cy="100" r="14" opacity="0">
                <animate attributeName="r" values="14;{{ r }}" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0;0.25;0.2;0" keyTimes="0;0.16;0.72;1" dur="12s" begin="{{ delay }}s" repeatCount="indefinite"/>
            </circle>
            {% endfor %}
        </svg>
        <div class="index-hero-inner">
            <div class="index-hero-text">
                <h1>{{ t.index_hero_title | default(site.title) }}</h1>
                {% if t.index_hero_tagline %}
                <p class="hero-tagline">{{ t.index_hero_tagline }}</p>
                {% endif %}
                <p class="hero-subtitle">{{ t.index_hero_subtitle | default(site.tagline) }}</p>
                <a href="#sections" class="td-pill td-pill-red">{{ t.index_hero_cta | default('Explorar') }} &rarr;</a>

                {# ── Hero stats ── #}
                {% if theme.hero_stats %}
                <div style="width:60px;height:2px;background:var(--td-color-gold, #D4A03A);opacity:0.5;margin-top:2rem;border-radius:1px;" aria-hidden="true"></div>
                <div class="hero-stats">
                    {% for slug in theme.hero_stats %}
                    <div class="hero-stat">
                        <span class="hero-stat-num">{{ data[0][slug + '_count'] | default('0') }}</span>
                        <span class="hero-stat-label">{{ t['card_' + slug + '_label'] | default(slug) }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            {# ── Photo cluster with village circle motif ── #}
            {% if theme.hero_images %}
            <div class="index-hero-visual">
                {# Village circle motif SVG — two-moiety layout (like logo) #}
                <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>
                        {# Soft blur for moiety fills — painterly edges #}
                        <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>

                {# Main hero photo #}
                {% if theme.hero_image %}
                <div class="hero-photo-main">
                    <img src="{{ base_path | default('') }}{{ theme.hero_image }}" alt="{{ t.index_hero_title | default(site.title) }}">
                </div>
                {% endif %}

                {# Satellite photos #}
                {% for img in theme.hero_images[:4] %}
                <div class="hero-photo-sat hero-photo-sat-{{ loop.index }}">
                    <img src="{{ base_path | default('') }}{{ img }}" alt="" loading="lazy">
                </div>
                {% endfor %}
            </div>

            {% else %}
            {# ── Fallback: single photo with rings ── #}
            <div class="index-hero-visual-single">
                <div class="hero-rings-bg">
                    {{ target_rings("400px") }}
                </div>
                {% if theme.hero_image %}
                <div class="hero-photo-disc">
                    <img src="{{ base_path | default('') }}{{ theme.hero_image }}" alt="{{ t.index_hero_title | default(site.title) }}">
                </div>
                {% endif %}
            </div>
            <div class="hero-small-target">
                {{ target_motif_small("64px") }}
            </div>
            {% endif %}
        </div>
    </section>

    {# ── Adugo spine divider — horizontal spine with organic side bars ── #}
    <div class="hero-adugo-spine" aria-hidden="true">
        <svg viewBox="0 0 1200 28" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            {# Central spine line #}
            <line x1="0" y1="14" x2="1200" y2="14" stroke="var(--td-color-primary)" stroke-width="2" stroke-linecap="round" opacity="0.15"/>
            {# Organic side bars — irregular spacing, lengths, and thickness #}
            <g stroke="var(--td-color-primary)" stroke-linecap="round" opacity="0.12">
                {# Left section — sparse #}
                <line x1="45" y1="5" x2="45" y2="23" stroke-width="2.5"/>
                <line x1="68" y1="7" x2="68" y2="21" stroke-width="3.5"/>
                <line x1="105" y1="3" x2="105" y2="25" stroke-width="2"/>
                <line x1="120" y1="8" x2="120" y2="20" stroke-width="4"/>
                <line x1="160" y1="6" x2="160" y2="22" stroke-width="2.8"/>
                <line x1="195" y1="4" x2="195" y2="24" stroke-width="3.2"/>
                <line x1="210" y1="9" x2="210" y2="19" stroke-width="2.2"/>
                {# Left-center — denser #}
                <line x1="265" y1="5" x2="265" y2="23" stroke-width="3"/>
                <line x1="280" y1="7" x2="280" y2="21" stroke-width="2.4"/>
                <line x1="298" y1="3" x2="298" y2="25" stroke-width="3.8"/>
                <line x1="320" y1="6" x2="320" y2="22" stroke-width="2.6"/>
                <line x1="335" y1="8" x2="335" y2="20" stroke-width="3.5"/>
                <line x1="358" y1="4" x2="358" y2="24" stroke-width="2.2"/>
                <line x1="372" y1="6" x2="372" y2="22" stroke-width="4"/>
                <line x1="395" y1="2" x2="395" y2="26" stroke-width="2.8"/>
                <line x1="408" y1="7" x2="408" y2="21" stroke-width="3.2"/>
                <line x1="430" y1="5" x2="430" y2="23" stroke-width="2.5"/>
                {# Center — densest #}
                <line x1="468" y1="3" x2="468" y2="25" stroke-width="3.5"/>
                <line x1="482" y1="6" x2="482" y2="22" stroke-width="2.8"/>
                <line x1="498" y1="1" x2="498" y2="27" stroke-width="4.2"/>
                <line x1="515" y1="5" x2="515" y2="23" stroke-width="2.4"/>
                <line x1="528" y1="7" x2="528" y2="21" stroke-width="3.8"/>
                <line x1="545" y1="4" x2="545" y2="24" stroke-width="2.6"/>
                <line x1="558" y1="2" x2="558" y2="26" stroke-width="3.2"/>
                <line x1="575" y1="6" x2="575" y2="22" stroke-width="4"/>
                <line x1="590" y1="1" x2="590" y2="27" stroke-width="2.5"/>
                <line x1="600" y1="5" x2="600" y2="23" stroke-width="3.6"/>
                <line x1="615" y1="3" x2="615" y2="25" stroke-width="2.2"/>
                <line x1="628" y1="7" x2="628" y2="21" stroke-width="4.2"/>
                <line x1="645" y1="2" x2="645" y2="26" stroke-width="3"/>
                <line x1="660" y1="5" x2="660" y2="23" stroke-width="2.8"/>
                <line x1="672" y1="4" x2="672" y2="24" stroke-width="3.5"/>
                <line x1="690" y1="6" x2="690" y2="22" stroke-width="2.4"/>
                <line x1="705" y1="3" x2="705" y2="25" stroke-width="3.8"/>
                <line x1="720" y1="7" x2="720" y2="21" stroke-width="2.6"/>
                <line x1="738" y1="1" x2="738" y2="27" stroke-width="4"/>
                {# Right-center — denser #}
                <line x1="770" y1="5" x2="770" y2="23" stroke-width="3.2"/>
                <line x1="790" y1="4" x2="790" y2="24" stroke-width="2.5"/>
                <line x1="808" y1="7" x2="808" y2="21" stroke-width="3.8"/>
                <line x1="828" y1="3" x2="828" y2="25" stroke-width="2.8"/>
                <line x1="842" y1="6" x2="842" y2="22" stroke-width="3.5"/>
                <line x1="865" y1="8" x2="865" y2="20" stroke-width="2.2"/>
                <line x1="880" y1="4" x2="880" y2="24" stroke-width="4"/>
                <line x1="900" y1="6" x2="900" y2="22" stroke-width="2.6"/>
                <line x1="920" y1="5" x2="920" y2="23" stroke-width="3.2"/>
                <line x1="938" y1="7" x2="938" y2="21" stroke-width="3"/>
                {# Right section — sparse #}
                <line x1="980" y1="4" x2="980" y2="24" stroke-width="3.5"/>
                <line x1="1005" y1="8" x2="1005" y2="20" stroke-width="2.4"/>
                <line x1="1040" y1="6" x2="1040" y2="22" stroke-width="3.8"/>
                <line x1="1075" y1="3" x2="1075" y2="25" stroke-width="2.2"/>
                <line x1="1095" y1="7" x2="1095" y2="21" stroke-width="3.5"/>
                <line x1="1130" y1="5" x2="1130" y2="23" stroke-width="2.8"/>
                <line x1="1160" y1="9" x2="1160" y2="19" stroke-width="4"/>
            </g>
        </svg>
    </div>

    {# ── Sections label ── #}
    <div class="sections-label" id="sections">
        <span class="sections-label-line"></span>
        <span class="sections-label-diamond"></span>
        <span class="sections-label-text">{{ t.index_sections_title | default('Explore') }}</span>
        <span class="sections-label-diamond"></span>
        <span class="sections-label-line"></span>
    </div>

    <div>

    {# ── Section teasers — unified card layout ── #}
    {# Image mapping: dictionary=hero_images[0], encyclopedia=hero_images[1], fauna=fauna.jpeg, recordings=hero_images[2] #}
    {% set teaser_images = {
        'dictionary': theme.hero_images[0] if theme.hero_images|length > 0 else '',
        'encyclopedia': theme.hero_images[1] if theme.hero_images|length > 1 else '',
        'fauna': 'images/fauna.jpeg',
        'recordings': theme.hero_images[2] if theme.hero_images|length > 2 else '',
        'videos': theme.hero_images[3] if theme.hero_images|length > 3 else ''
    } %}

    {% for mod_slug in ['dictionary', 'encyclopedia', 'fauna', 'recordings', 'videos'] %}
    {% if mod_slug in modules | map(attribute='slug') | list %}
    <section class="index-section td-fade-in">
        {{ section_heading(t['card_' + mod_slug + '_title'] | default(mod_slug | capitalize), '') }}
        <div class="teaser-card" data-section="{{ mod_slug }}">
            {% if teaser_images[mod_slug] %}
            <div class="teaser-card-image">
                <img src="{{ base_path | default('') }}{{ teaser_images[mod_slug] }}" alt="" loading="lazy">
            </div>
            {% endif %}
            <div class="teaser-card-body">
                <div class="teaser-stat">
                    <span class="teaser-count">{{ data[0][mod_slug + '_count'] | default('0') }}</span>
                    <span class="teaser-count-label">{{ t['card_' + mod_slug + '_label'] | default(mod_slug) }}</span>
                </div>
                <p class="teaser-desc">{{ t['card_' + mod_slug + '_desc'] | default('') }}</p>
                <a href="{{ mod_slug }}.html" class="td-pill td-pill-outline">{{ t['index_view_all_' + mod_slug] | default(t.card_cta | default('Explore')) }} &rarr;</a>
            </div>
        </div>
    </section>
    {% endif %}
    {% endfor %}



    </div>
{% endblock %}
