Feature Tile Animated code

@props([
    'title',
    'points' => [],
    'link' => null,
    'linkLabel' => 'Learn more',
])

@php
    /*
    | Animated clone of <x-ui.feature-tile>. Same corner-ticked bento cell, but
    | the heading, body, checklist, link and media reveal in a gentle stagger as
    | the tile scrolls into view. Drop animated visuals (e.g. a `.graph-draw`
    | SVG or a floating stack) into the `media` slot. Honours reduced-motion.
    |
    | Usage:
    |   <x-ui.feature-tile-animated
    |       title="Local to live in seconds"
    |       :points="['Full control via dashboard or CLI']"
    |       link="#" link-label="Explore Cloud"
    |   >
    |       Autoscale under load and hibernate when idle.
    |       <x-slot:media>…</x-slot:media>
    |   </x-ui.feature-tile-animated>
    */
    $cornerBase = 'pointer-events-none absolute h-1.5 w-1.5 bg-brand-500/70';
@endphp

<div {{ $attributes->merge(['class' => 'group/tile relative flex flex-col p-8 sm:p-10']) }}>
    {{-- Corner ticks --}}
    <span aria-hidden="true" class="{{ $cornerBase }} left-0 top-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} right-0 top-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} left-0 bottom-0"></span>
    <span aria-hidden="true" class="{{ $cornerBase }} right-0 bottom-0"></span>

    <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-gray-900 dark:text-white text-balance" data-reveal="up">{{ $title }}</h3>

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

    @if (count($points))
        <ul class="mt-5 space-y-2.5">
            @foreach ($points as $point)
                <li class="flex items-start gap-2.5 text-sm text-gray-700 dark:text-gray-300" data-reveal="left" data-reveal-delay="{{ 150 + $loop->index * 90 }}">
                    <x-ui.icon name="check" weight="bold" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                    <span>{{ $point }}</span>
                </li>
            @endforeach
        </ul>
    @endif

    @if ($link)
        <div class="mt-6" data-reveal="up" data-reveal-delay="320">
            <a href="{{ $link }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:border-brand-300 hover:text-brand-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-brand-700 dark:hover:text-brand-300">
                {{ $linkLabel }}
                <x-ui.icon name="arrow-up-right" weight="bold" size="sm" class="text-gray-400 transition group-hover/tile:translate-x-0.5 group-hover/tile:-translate-y-0.5" />
            </a>
        </div>
    @endif

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