{block:vod_cid cid="2" n="8"}
<div class="section-wrap pt-3">
    <div class="section-header">
        <span class="section-header-title">{$data['cate_name']}</span>
        <a href="{$data['cate_url']}" class="btn-more">
            <span>更多</span>
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"></path></svg>
        </a>
    </div>
    <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-5 gap-y-2 py-2">
        {loop:$data['videolist'] $v}  
        <div class="flex flex-col items-center transform hover:-translate-y-1 transition-all duration-300 animate-on-scroll">
    <div class="video-card relative w-full aspect-[530/726] group my-2 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500">
        {if:!empty($v['remarks'])}<div class="badge-quality">{h:$v.remarks}</div>{/if}
        <a class="absolute inset-0 flex rounded-lg group-hover:z-10" href="{$v.url}">
            <img decoding="async" alt="{h:$v.name}" loading="lazy" class="rounded-lg w-full h-full object-cover transition-transform duration-700 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-opacity duration-300">
                <div class="flex justify-end p-2">
                    <div class="bg-black/60 rounded-md p-1 max-w-full backdrop-blur-sm">
                        <p class="text-xs truncate text-white">{h:$v.remarks}</p>
                    </div>
                </div>
                <div class="bg-gradient-to-t from-black/95 via-black/80 to-transparent w-full px-2 py-3">
                    <div class="flex flex-col overflow-hidden">
                        <h3 class="antialiased text-sm font-bold text-white mb-1 line-clamp-2">{h:$v.name}</h3>
                        <div class="vod-tags flex flex-row flex-wrap gap-1 py-1">
                            <span class="antialiased rounded-md bg-white/10 text-xs text-[var(--text-secondary)] px-2 py-0.5">{h:$v.year}</span>
                            <span class="antialiased rounded-md bg-white/10 text-xs text-[var(--text-secondary)] px-2 py-0.5">{h:$v.area}</span>
                        </div>
                        <div class="flex overflow-hidden mt-1">
                            <span class="antialiased text-xs text-[var(--text-tertiary)] line-clamp-2">{h:$v.blurb}</span>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="rounded-full bg-[var(--color-primary)] w-12 h-12 flex items-center justify-center shadow-lg transform scale-90 group-hover:scale-100 transition-transform duration-300">
                        <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: 24px; color: var(--bg-base);">
                            <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-sm mx-1 mt-2 text-[var(--text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-300" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;">{h:$v.name}</span>
</div>
        {/loop}
    </div>
</div>
 {/block}