{{-- Entrance animation, delay and child stagger for this block. --}}
<div class="space-y-4">
    <div class="flex flex-col gap-1.5">
        <label for="mo-anim" class="text-sm font-medium">{{ __('حركة الظهور') }}</label>
        <select id="mo-anim" wire:model="styleForm.animation" class="w-full rounded-lg border px-3 py-2 text-sm">
            @foreach ([
                'none' => 'بدون', 'fade-up' => 'ظهور لأعلى', 'fade-down' => 'ظهور لأسفل',
                'fade-left' => 'ظهور من اليسار', 'fade-right' => 'ظهور من اليمين',
                'slide-up' => 'انزلاق لأعلى', 'slide-down' => 'انزلاق لأسفل',
                'slide-start' => 'انزلاق من البداية', 'slide-end' => 'انزلاق من النهاية',
                'zoom-in' => 'تكبير', 'scale-in' => 'تصغير للداخل', 'scale-out' => 'تكبير للخارج',
                'rotate-in' => 'دوران', 'flip' => 'قلب', 'flip-y' => 'قلب أفقي',
                'blur-in' => 'وضوح تدريجي', 'reveal-up' => 'كشف لأعلى', 'bounce' => 'ارتداد',
            ] as $v => $l)
                <option value="{{ $v }}">{{ __($l) }}</option>
            @endforeach
        </select>
    </div>

    <div class="flex flex-col gap-1.5">
        <label for="mo-delay" class="text-sm font-medium">{{ __('تأخير البدء') }}</label>
        <select id="mo-delay" wire:model="styleForm.animation_delay" class="w-full rounded-lg border px-3 py-2 text-sm">
            @foreach ([0 => 'بدون', 100 => '0.1 ثانية', 200 => '0.2 ثانية', 300 => '0.3 ثانية', 400 => '0.4 ثانية', 600 => '0.6 ثانية', 800 => '0.8 ثانية'] as $v => $l)
                <option value="{{ $v }}">{{ __($l) }}</option>
            @endforeach
        </select>
    </div>

    <div class="flex flex-col gap-1.5">
        <label for="mo-stagger" class="text-sm font-medium">{{ __('تتابع ظهور العناصر') }}</label>
        <select id="mo-stagger" wire:model="styleForm.animation_stagger" class="w-full rounded-lg border px-3 py-2 text-sm">
            @foreach ([0 => 'بدون تتابع', 60 => 'سريع', 90 => 'متوسط', 140 => 'بطيء'] as $v => $l)
                <option value="{{ $v }}">{{ __($l) }}</option>
            @endforeach
        </select>
        <p class="text-xs text-gray-500">{{ __('يظهر أبناء القسم واحدًا تلو الآخر بدلًا من الظهور دفعة واحدة') }}</p>
    </div>

    <div class="rounded-lg bg-gray-50 border p-3 text-xs text-gray-600">
        {{ __('تُعطَّل كل الحركات تلقائيًا لمن يفضّل تقليل الحركة في إعدادات جهازه، وكذلك عند إيقاف الحركات من إعدادات الموقع.') }}
    </div>
</div>
