{loop:$videolist $v}
<div class="flex flex-col items-center transform hover:-translate-y-1.5 transition-all duration-300 ease-out animate-on-scroll">
    <div class="video-card relative w-full aspect-[530/726] group mx-4 my-2 rounded-lg overflow-hidden shadow-md hover:shadow-2xl transition-all duration-500">
        {if:!empty($v['remarks'])}<div class="badge-quality">{$v.remarks}</div>{/if}
        <a class="absolute inset-0 flex rounded-lg group-hover:z-10" href="{$v.url}">
            <img decoding="async" alt="{$v.name}" loading="lazy" class="rounded-lg w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110" src="{$v.pic}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex flex-col justify-between opacity-0 group-hover:opacity-100 transition-all duration-300">
                <div class="flex justify-end p-3">
                    <div class="bg-black/70 backdrop-blur-sm rounded-md px-2 py-1 max-w-full">
                        <p class="text-xs truncate text-white/90">{$v.remarks}</p>
                    </div>
                </div>
                <div class="bg-gradient-to-t from-black/95 via-black/80 to-transparent px-3 py-3">
                    <div class="flex flex-col overflow-hidden">
                        <h3 class="antialiased text-sm font-bold text-white mb-1.5 line-clamp-1">{$v.name}</h3>
                        <div class="vod-tags flex flex-row flex-wrap gap-1.5 py-1">
                            <span class="antialiased rounded bg-white/10 text-[10px] text-white/70 px-2 py-0.5 backdrop-blur-sm">{$v.year}</span>
                            <span class="antialiased rounded bg-white/10 text-[10px] text-white/70 px-2 py-0.5 backdrop-blur-sm">{$v.area}</span>
                        </div>
                        <div class="flex overflow-hidden mt-1.5">
                            <span class="antialiased text-[11px] text-white/50 line-clamp-2 leading-relaxed">{$v.blurb}</span>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
                    <div class="rounded-full bg-[var(--color-primary)] w-14 h-14 flex items-center justify-center shadow-lg transform scale-75 group-hover:scale-100 transition-all duration-300 ease-out">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="font-size: 20px; color: var(--bg-base); margin-left: 3px;">
                            <path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <span class="text-center text-[13px] mx-1 mt-2.5 text-white/70 hover:text-[var(--color-primary)] transition-colors duration-200 line-clamp-2 w-full px-1">{$v.name}</span>
</div>
<!--{hook vod_box_item.php}-->
{/loop}