{{-- Hero animation: a domain resolving through its nameservers to the
     website, one step lighting after another. Pure CSS (sections.styles, "hv-").
     $domain  the name shown --}}
<div class="hv hv-dns" aria-hidden="true">
    <div class="hv-dns__node hv-dns__node--1">
        <span class="hv-dns__icon"><i class="ri-global-line"></i></span>
        <div><strong>{{ $domain }}</strong><small>{{ __('sections.hero.anim_dns_domain') }}</small></div>
    </div>
    <div class="hv-dns__link hv-dns__link--1"><i></i></div>
    <div class="hv-dns__node hv-dns__node--2">
        <span class="hv-dns__icon"><i class="ri-route-line"></i></span>
        <div><strong>ns1 · ns2</strong><small>{{ __('sections.hero.anim_dns_ns') }}</small></div>
    </div>
    <div class="hv-dns__link hv-dns__link--2"><i></i></div>
    <div class="hv-dns__node hv-dns__node--3">
        <span class="hv-dns__icon"><i class="ri-server-line"></i></span>
        <div><strong>{{ __('sections.hero.anim_dns_site') }}</strong><small>{{ __('sections.hero.anim_dns_site_sub') }}</small></div>
        <i class="ri-checkbox-circle-fill hv-dns__ok"></i>
    </div>
</div>