@php
    $rotations = ['-rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]', 'rotate-1'];
    $startIndex = $startIndex ?? 0;
@endphp
@foreach ($randomBands as $index => $band)
    @php
        $rot = $rotations[($startIndex + $index) % count($rotations)];
    @endphp
    <a href="{{ route('bands.show', $band->slug) }}"
        data-band-id="{{ $band->id }}"
        class="group relative aspect-[4/5] overflow-hidden bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform {{ $rot }} hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] transition-all duration-300">
        @if ($firstImage = $band->firstImage())
            <img src="{{ $firstImage->thumbnail(600, 750) }}" alt="{{ $firstImage->altText($band->name) }}"
                class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition duration-700">
        @else
            <div
                class="absolute inset-0 bg-neutral-800 flex items-center justify-center transition duration-700">
                <span
                    class="text-6xl font-black text-white/5 uppercase tracking-tighter">{{ substr($band->name, 0, 1) }}</span>
            </div>
        @endif
        <div
            class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-80 transition duration-500 group-hover:opacity-95">
        </div>
        <div class="absolute bottom-6 left-6 right-6 flex flex-col justify-end">
            <h3 class="text-xl sm:text-2xl font-black text-white uppercase leading-tight break-words">
                {{ $band->name }}</h3>
        </div>
    </a>
@endforeach