{{--
    Animated Vanta "waves" background, shared by the public pages (login,
    /download). Include it once, just before </body> — the canvas is
    position:fixed, so DOM order doesn't matter as long as the page content
    sits on a higher z-index.

    Served from public/js rather than a CDN: this is the first thing an
    employee loads, often on a locked-down office network, and welcome.blade.php
    pulling three.js off jsDelivr is the odd one out rather than the pattern.
    A blocked or slow script just leaves the flat background colour behind it,
    which is why every page including this must paint its own dark body colour.

    Colour matches the Worklance brand indigo (#4263eb). Obvizio uses the same
    effect in its own teal — that's the family resemblance, not a copy.
--}}
@props(['dim' => 0])
{{-- $dim (0–1) darkens the canvas behind the content. The waves peak around
     #4263eb, which is bright enough that white body text over it lands near
     2.7:1 — under the 4.5:1 AA floor. Pages carrying real reading content pass
     a dim; the login card supplies its own opaque surfaces and doesn't need one. --}}
<div id="vanta-bg"></div>
@if ($dim > 0)
    <div id="vanta-dim"></div>
@endif

<style>
    #vanta-bg  { position: fixed; inset: 0; z-index: 0; }
    @if ($dim > 0)
    #vanta-dim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
                 background: rgba(9, 14, 42, {{ $dim }}); }
    @endif
</style>

<script src="{{ asset('js/three.r134.min.js') }}"></script>
<script src="{{ asset('js/vanta.waves.min.js') }}"></script>
<script>
    // `load`, not DOMContentLoaded: VANTA measures the element, and on a cold
    // cache the scripts above can still be parsing at DOMContentLoaded.
    window.addEventListener('load', function () {
        if (!window.VANTA || !window.VANTA.WAVES) return;   // scripts blocked — flat background

        VANTA.WAVES({
            el: '#vanta-bg',
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x4263eb,
            shininess: 21.00,
            waveSpeed: 0.90,
            zoom: 0.65
        });
    });
</script>