Capability Animated code

@props([
    'icon' => 'sparkle',
    'title',
])

@php
    /*
    | Animated clone of <x-ui.capability>. Same icon + title, copy and media
    | mockup, but the title, body and media reveal in a gentle stagger as the
    | panel scrolls into view. Pair with reveal-aware media (e.g.
    | <x-ui.sparkline reveal /> or <x-ui.counter />) so the inner UI animates too.
    | Honours prefers-reduced-motion via the shared data-reveal utilities.
    |
    | Usage:
    |   <x-ui.capability-animated icon="code" title="Managed queues">
    |       Run fully managed worker queues that scale on demand.
    |       <x-slot:media>…mockup with <x-ui.sparkline reveal />…</x-slot:media>
    |   </x-ui.capability-animated>
    */
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
    <div class="flex items-center gap-2.5" data-reveal="right">
        <x-ui.icon :name="$icon" weight="bold" size="lg" class="text-gray-400 dark:text-gray-500" />
        <h3 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h3>
    </div>

    <div class="mt-3 max-w-md text-sm leading-relaxed text-gray-600 dark:text-gray-400" data-reveal="up" data-reveal-delay="100">
        {{ $slot }}
    </div>

    @isset($media)
        <div class="relative mt-8 flex-1" data-reveal="up" data-reveal-delay="200">
            {{ $media }}
        </div>
    @endisset
</div>