@if (showInitialLoader()) {
<div class="fixed inset-0 z-99999 flex min-h-dvh items-center justify-center bg-white transition-all duration-300 ease-out"
    [class.opacity-0]="isFadingOut()" [class.pointer-events-none]="isFadingOut()" [class.scale-105]="isFadingOut()"
    aria-label="Loading" role="status">
    <div class="flex flex-col items-center gap-5">

        <!-- Animated Logo Container -->
        <div class="relative flex items-center justify-center">

            <img src="/images/logo.webp" width="56" height="56" alt="AI Event Zo"
                class="relative h-14 w-14 rounded-xl object-contain shadow-md transition-transform duration-500 hover:scale-105" />
        </div>

        <!-- Shimmer Progress Bar -->
        <div class="relative h-1.5 w-36 overflow-hidden rounded-full bg-slate-100 shadow-inner">
            <div
                class="animate-shimmer absolute inset-y-0 w-2/3 rounded-full bg-linear-to-r from-primary/40 via-primary to-primary/40">
            </div>
        </div>

        <!-- Subtle Dot Pulse Text -->
        <div class="flex items-center space-x-1 text-xs font-semibold tracking-wider text-slate-400 uppercase">
            <span>Loading</span>
            <span class="inline-flex space-x-0.5">
                <span class="animate-bounce [animation-delay:-0.3s]">.</span>
                <span class="animate-bounce [animation-delay:-0.15s]">.</span>
                <span class="animate-bounce">.</span>
            </span>
        </div>

    </div>
</div>
}

<router-outlet></router-outlet>
<app-solutions-modal />