{{-- Reveal-on-scroll: tampil skeleton dulu, lalu fade-in konten saat masuk viewport.
     Konten tetap di DOM (SEO ok); gambar pakai loading="lazy" agar byte ditunda. --}}
<div x-data="{ shown: false }" x-intersect.once="shown = true">
    <div x-show="!shown" class="space-y-3">
        <div class="skeleton h-6 w-40"></div>
        <div class="flex gap-3 overflow-hidden">
            <div class="skeleton h-[152px] w-[270px] shrink-0"></div>
            <div class="skeleton h-[152px] w-[270px] shrink-0"></div>
            <div class="skeleton h-[152px] w-[120px] shrink-0"></div>
        </div>
    </div>
    <div x-show="shown" x-transition.opacity.duration.500ms x-cloak>
        {{ $slot }}
    </div>
</div>