/**
 * ============================================
 * CARDS
 * ============================================
 * 
 * Video cards, content cards, and hover effects
 */

/* ============================================
   BASE CARD
   ============================================ */

.uk-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.uk-card-body {
    padding: var(--spacing-md);
}

.uk-card-title {
    font-size: var(--text-2xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-bold);
    color: var(--text-light);
}

.uk-card-body .hr {
    padding: 0;
}

/* ============================================
   VIDEO CARD
   ============================================ */

.video-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-normal);
}

.video-card img,
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card:hover {
    transform: scale(1.02);
}

/* ============================================
   HOVER CARD (EXPAND ON HOVER)
   ============================================ */

.hovered {
    position: relative;
    transition: transform var(--transition-normal);
}

.hovercard {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    transition: transform var(--transition-normal);
    z-index: var(--z-hover-card);
}

.hover-img > img,
.hover-img > video {
    max-width: 100%;
    object-fit: cover;
}

.hover-desc {
    padding: var(--space-2) var(--space-4) !important;
    font-size: 14px !important;
    color: var(--text-light) !important;
    text-align: left !important;
    background: #000000 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.desc-icons {
    margin: var(--space-2) 0 !important;
}

.hover-icon {
    font-size: var(--text-xs) !important;
    padding: var(--space-2);
    color: var(--text-light);
    border: 1px solid var(--text-light);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.hover-icon:hover {
    background: var(--text-dark);
}

.hover-icon.del:hover {
    background: var(--gradient-primary);
}

.hovered:hover .hovercard {
    display: block !important;
    transform: scale(1.4, 1.3);
    transform-origin: top left;
    top: -30px;
    left: 0;
    z-index: var(--z-hover-card);
    transition-delay: 5s;
}

/* ============================================
   CONTENT CAROUSEL CARD
   ============================================ */

.cart-ul {
    height: 200px;
}

.cart-ul .li-height img {
    height: 180px !important;
    border-radius: 2px;
    object-fit: cover;
}

/* ============================================
   SERIES CARD
   ============================================ */

.series-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.posterimage {
    border-radius: var(--radius-button);
}

/* ============================================
   EPISODE CARD
   ============================================ */

.episodes {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
    border-radius: var(--radius-episode);
    padding-bottom: var(--space-3);
    transition: var(--transition-fast);
    color:white;
}

.episodes:hover {
    /* background-color: var(--bg-hover); */
}

.episodes:hover .episodeplay {
    display: block !important;
    color: var(--text-light);
}

.episodeplay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    position: absolute !important;
}

/* ============================================
   LAZY LOAD IMAGE WITH SKELETON
   ============================================ */

/* Base - no extra styles, clean state */
.lazy-load {
    transition: all 0.3s ease;
}

/* Skeleton shimmer - only when NOT loaded */
.lazy-load:not(.loaded) {
    background: linear-gradient(90deg, rgba(30, 30, 30, 0.8) 25%, rgba(50, 50, 50, 0.8) 50%, rgba(30, 30, 30, 0.8) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Type5 cards - ALWAYS apply filter drop-shadow */
.hovered .lazy-load,
.hovered .posterimage {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

/* Type40 expand items - ALWAYS apply filter drop-shadow */
.prime-item .lazy-load,
.prime-expand-media .lazy-load {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

/* Type41 rank items - ALWAYS apply filter drop-shadow */
.rank-item .lazy-load,
.rank-item .posterimage,
.uk-grid .rank-number + a .lazy-load {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

/* Loaded state - remove shimmer but keep filter for Type5/40/41 */
.lazy-load.loaded {
    background: transparent;
    animation: none;
    border: none;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   INFINITE SCROLL FOR CONTENT
   Zero impact on existing UI
   ============================================ */

.lazy-item {
    display: none;
}

.lazy-item.visible {
    display: block;
    animation: fadeInLazy 0.4s ease-out;
}

@keyframes fadeInLazy {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   VIDEO CONTAINER
   ============================================ */

.video-container {
    position: relative;
    width: 100%;
}

@media (min-width: 321px) and (max-width: 480px) {
    .video-container {
        height: var(--hero-height-mobile);
    }
}

@media (min-width: 960px) {
    .video-container-home {
        height: var(--hero-height);
    }
}

@media (min-width: 800px) and (max-width: 960px) {
    .video-container-home {
        height: var(--hero-height-tablet);
    }
}

@media (min-width: 640px) and (max-width: 800px) {
    .video-container-home {
        height: var(--hero-height-tablet) !important;
        bottom: 5px !important;
    }
}

/* Mobile description clamp */
@media (max-width: 640px) {
    .episode-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============================================
   VIDEO TEXT OVERLAY
   ============================================ */

.video-text {
    margin-bottom: 30px !important;
    margin-left: 10px !important;
    margin-top: 18px !important;
}

.video-text h1 {
    margin-top: 10px !important;
}

.video-text-home {
    margin: 0;
    margin-left: 20px !important;
    margin-top: 20px !important;
}

.video-text-home h1 {
    margin-top: 10px !important;
}

@media (min-width: 960px) {
    .video-text-home {
        margin-left: 50px !important;
        margin-top: 200px !important;
    }
}

.bottom-right-content {
    margin: 0;
    position: absolute;
    bottom: -89px;
    left: -39px;
}

.bottom-right-content p {
    margin: 0;
}

.bottom-right-content-home {
    margin: 0;
    position: absolute;
    bottom: -89px;
    left: -39px;
}

/* ============================================
   PROFILE PIC
   ============================================ */

.profilepic {
    border-radius: var(--radius-lg);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
}

.avatar-large {
    width: 80px;
    height: 80px;
}