/* =============================================================================
   CLS Prevention Utilities for JAVTH.VIP
   Cumulative Layout Shift Score Target: < 0.1 (Green)
   ============================================================================= */

/* Force stable background to prevent white flash */
html {
    background-color: #1a1a1a !important;
}

body {
    background-color: #1a1a1a !important;
    min-height: 100vh;
}

/* Reserve space for navigation */
.navbar,
nav {
    min-height: 56px;
    contain: layout style;
}

/* Prevent layout shift from images */
img {
    max-width: 100%;
    height: auto;
}

img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* Skeleton loader for images before load */
.poster-container,
.cover-image,
.movie-card img {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* Video player placeholder */
.video-player {
    background-color: #000;
    min-height: 300px;
}

/* Prevent reflow from dynamic content */
.container {
    contain: layout style;
}

.movie-card {
    contain: layout style paint;
}

/* Reserve space for text content */
h1, h2, h3 {
    min-height: 1.2em;
}

.movie-title {
    min-height: 21px;
    line-height: 1.5;
}

/* Pagination stability */
.pagination {
    min-height: 50px;
}

/* Smooth transitions without layout shift */
* {
    transition-property: transform, opacity, color, background-color;
}

/* Performance: GPU acceleration for animations */
.poster-container img,
.related-card img {
    transform: translateZ(0);
    will-change: transform;
}

/* Modern CSS contain for browsers that support it */
@supports (contain: layout style paint) {
    .movie-card,
    .poster-container,
    .related-card {
        contain: layout style paint;
    }
}

/* Flexible image containers - support both portrait and landscape */
.poster-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.poster-container img,
.related-card img {
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Video player maintains 16:9 ratio */
.video-player {
    aspect-ratio: 16 / 9;
}

/* Prevent font loading shift - apply font-display to system fonts */
body, html {
    font-display: optional;
}

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

/* Loading skeleton animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.poster-container:empty,
.cover-image:empty {
    animation: shimmer 2s infinite linear;
}