{{-- Hero animation: a domain typed into a browser, the padlock turning
     green, and an online store loading - a turning globe with a parcel in
     orbit, products, an item added to the cart and an order arriving from
     somewhere in the world. Pure CSS (sections.styles, "hv-"), looped; still
     at its last frame for visitors who ask for reduced motion.
     $domain  the name typed --}}
@php
    // One order per loop, each from a different city.
    $places = ['Nairobi', 'London', 'Tokyo'];
@endphp
<div class="hv hv-browser" aria-hidden="true">
    <div class="hv-browser__bar">
        <span class="hv-dots"><i></i><i></i><i></i></span>
        <div class="hv-browser__url">
            <i class="ri-lock-fill hv-browser__lock"></i>
            <span class="hv-browser__type" style="--n: {{ mb_strlen($domain) }}">{{ $domain }}</span>
        </div>
    </div>
    <div class="hv-browser__page">
        <div class="hv-sk hv-shop__head">
            <span class="hv-shop__logo"><i class="ri-store-2-fill"></i></span>
            <span class="hv-shop__links"><span></span><span></span><span></span></span>
            <span class="hv-shop__cart"><i class="ri-shopping-cart-2-line"></i><b>1</b></span>
        </div>
        <div class="hv-sk hv-shop__banner">
            <div class="hv-shop__banner-copy">
                <span class="hv-shop__line hv-shop__line--title"></span>
                <span class="hv-shop__line"></span>
                <span class="hv-shop__btn"></span>
            </div>
            <div class="hv-globe"><span class="hv-globe__land"></span><span class="hv-globe__orbit"><i></i></span></div>
        </div>
        <div class="hv-browser__cards">
            @foreach(['ri-t-shirt-2-line', 'ri-headphone-line', 'ri-handbag-line'] as $i => $icon)
            <div class="hv-sk hv-product">
                <span class="hv-product__img"><i class="{{ $icon }}"></i></span>
                <span class="hv-product__name"></span>
                <span class="hv-product__row"><span class="hv-product__price"></span><span class="hv-product__add"><i class="ri-add-line"></i><i class="ri-check-line"></i></span></span>
                @if($i === 1)<i class="ri-cursor-fill hv-cursor"></i>@endif
            </div>
            @endforeach
        </div>
    </div>
    <div class="hv-chip hv-chip--a"><i class="ri-shield-check-fill"></i> {{ __('sections.hero.anim_ssl') }}</div>
    <div class="hv-chip hv-chip--b hv-chip--order">
        <i class="ri-earth-line"></i> {{ __('sections.hero.anim_order') }}
        <span class="hv-order__places">@foreach($places as $place)<span>{{ $place }}</span>@endforeach</span>
    </div>
</div>