{{-- Hero animation: visitors' requests travelling to a rack of servers,
     whose lights and load bars answer. Pure CSS (sections.styles, "hv-"). --}}
<div class="hv hv-servers" aria-hidden="true">
    <div class="hv-servers__visitors">
        <span><i class="ri-user-3-line"></i></span>
        <span><i class="ri-smartphone-line"></i></span>
        <span><i class="ri-computer-line"></i></span>
    </div>
    <div class="hv-servers__tracks">
        <div class="hv-track"><i></i></div>
        <div class="hv-track"><i></i></div>
        <div class="hv-track"><i></i></div>
    </div>
    <div class="hv-servers__rack">
        @foreach([1, 2, 3] as $n)
        <div class="hv-unit">
            <span class="hv-led"></span><span class="hv-led hv-led--b"></span>
            <span class="hv-unit__load"><span></span></span>
        </div>
        @endforeach
    </div>
    <div class="hv-chip hv-chip--a"><span class="hv-pulse"></span> {{ __('sections.hero.anim_online') }}</div>
    <div class="hv-chip hv-chip--b"><i class="ri-flashlight-fill"></i> {{ __('sections.hero.anim_serving') }}</div>
</div>