Hero Animated code

@props([
    'announce' => null,
    'announceHref' => '#',
    'title',
    'gradient' => null,
    'description' => null,
])

@php
    /*
    | Animated sibling of <x-ui.hero>. Adds a staggered entrance for the
    | announcement pill, headline, description and actions, a drifting glow
    | behind the copy, and a floating media slot. An optional `gradient` word/
    | phrase is appended to the title with an animated gradient sweep.
    |
    | Usage:
    |   <x-ui.hero-animated announce="v2 is live" title="Ship faster with"
    |       gradient="motion" description="…">
    |       <x-slot:actions>…</x-slot:actions>
    |       <x-slot:media>…</x-slot:media>
    |   </x-ui.hero-animated>
    */
@endphp

<section {{ $attributes->merge(['class' => 'relative overflow-hidden']) }}>
    {{-- Grid backdrop + animated radial glow --}}
    <div class="hero-tilted-grid pointer-events-none absolute inset-0 -z-10" aria-hidden="true"></div>
    <div class="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl" aria-hidden="true">
        <div class="animate-glow-pulse relative left-1/2 aspect-[1155/678] w-[36rem] -translate-x-1/2 bg-gradient-to-tr from-brand-400 to-brand-600 opacity-20 sm:w-[72rem]" style="clip-path: polygon(74% 44%, 100% 61%, 97% 26%, 85% 0, 80% 2%, 72% 32%, 60% 62%, 52% 68%, 47% 58%, 45% 34%, 27% 76%, 0 64%, 17% 100%, 27% 76%, 76% 97%, 74% 44%)"></div>
    </div>

    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 sm:pt-28 text-center">
        @if ($announce)
            <div class="mb-8 flex justify-center" data-reveal="down">
                <a href="{{ $announceHref }}" class="group relative inline-flex items-center gap-2 overflow-visible rounded-full border border-gray-200 dark:border-gray-800 bg-white/70 dark:bg-gray-900/70 backdrop-blur px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 shadow-sm transition hover:border-brand-300 dark:hover:border-brand-800">
                    <span class="pointer-events-none absolute left-0 top-0 z-10 -translate-x-1/2 -translate-y-1/2 inline-flex items-center gap-1 rounded-full bg-brand-600 px-2 py-0.5 text-xs font-semibold text-white shadow-sm ring-2 ring-white dark:ring-gray-900">
                        <x-ui.icon name="sparkle" weight="fill" size="xs" /> New
                    </span>
                    <span>{{ $announce }}</span>
                    <x-ui.icon name="arrow-right" weight="bold" size="xs" class="text-gray-400 transition group-hover:translate-x-0.5" />
                </a>
            </div>
        @endif

        <h1 class="text-4xl sm:text-6xl font-semibold tracking-tight text-gray-900 dark:text-white text-balance" data-reveal="up" data-reveal-delay="100">
            {{ $title }}
            @if ($gradient)
                <x-ui.gradient-text>{{ $gradient }}</x-ui.gradient-text>
            @endif
        </h1>

        @if ($description)
            <p class="mt-6 text-lg sm:text-xl leading-relaxed text-gray-600 dark:text-gray-400 text-pretty" data-reveal="up" data-reveal-delay="200">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3" data-reveal="up" data-reveal-delay="300">{{ $actions }}</div>
        @endisset
    </div>

    @isset($media)
        <div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pb-20" data-reveal="scale" data-reveal-delay="200">
            <div class="pointer-events-none absolute inset-x-8 top-10 -z-10 h-full rounded-[2rem] bg-gradient-to-b from-brand-500/20 to-transparent blur-2xl animate-glow-pulse" aria-hidden="true"></div>
            <div class="animate-float">
                {{ $media }}
            </div>
        </div>
    @endisset
</section>