/* Lazy Loading Styles */
img[data-src] {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

img.lazy-loaded {
    filter: blur(0);
}

img.lazy-error {
    opacity: 0.5;
    background: #2a2a2a;
}

/* Aspect Ratio Support for Older Browsers */
@supports not (aspect-ratio: 1) {
    .drama-card__thumbnail img {
        height: 450px;
    }
}

/* Performance: will-change hints */
.drama-card {
    will-change: transform;
}

.drama-card:hover {
    transform: translateY(-4px);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Loading skeleton animations */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-box {
    background: linear-gradient(90deg,
            #1a1a1a 25%,
            #2a2a2a 50%,
            #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-line {
    height: 12px;
    background: linear-gradient(90deg,
            #1a1a1a 25%,
            #2a2a2a 50%,
            #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-line--short {
    width: 60%;
}

/* Optimize repaints */
.app-header,
.bottom-nav,
.drama-card__favorite {
    will-change: transform, opacity;
}

/* GPU acceleration */
.drama-card,
.episode-card,
.btn,
.category-tab {
    transform: translateZ(0);
    backface-visibility: hidden;
}