/* ========================================================================
   Mobile Performance Optimization for JAVTH.VIP
   Target: Performance Score > 90 on Mobile
   ======================================================================== */

/* 1. Reduce motion for low-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 2. Mobile-first optimizations */
@media (max-width: 767px) {
    /* Reduce paddings */
    body {
        padding-bottom: 30px !important;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Smaller text on mobile */
    h1 {
        font-size: 1.5rem !important;
        min-height: 36px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Optimize grid spacing */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    
    .col {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Reduce movie card spacing */
    .movie-card {
        margin-bottom: 10px !important;
    }
    
    /* Smaller poster on mobile */
    .poster-container {
        height: 130px !important;
        border-radius: 4px !important;
    }
    
    /* Smaller text */
    .movie-title {
        font-size: 12px !important;
        height: 16px !important;
    }
    
    .movie-details {
        padding: 4px 0 !important;
        min-height: 24px !important;
    }
    
    /* Compact pagination */
    .pagination {
        font-size: 0.875rem;
        margin-top: 1.5rem !important;
    }
    
    .page-link {
        padding: 0.375rem 0.65rem !important;
    }
    
    /* Navbar optimization */
    .navbar {
        padding: 8px 0 !important;
        min-height: 50px !important;
    }
    
    .navbar-brand {
        font-size: 1.25rem !important;
    }
}

/* 3. Touch target optimization */
@media (max-width: 767px) {
    /* Ensure minimum 44x44px touch targets */
    .movie-card a {
        min-height: 44px;
        display: block;
    }
    
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn {
        min-height: 44px;
    }
}

/* 4. Hardware acceleration */
.poster-container img,
.movie-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 5. Optimize animations */
.poster-container img {
    transition: transform 0.2s ease-out !important; /* Faster */
}

@media (max-width: 767px) {
    .movie-card:hover .poster-container img {
        transform: scale(1.02) !important; /* Less scale on mobile */
    }
}

/* 6. Content visibility for off-screen content */
@supports (content-visibility: auto) {
    .movie-card {
        content-visibility: auto;
        contain-intrinsic-size: 200px;
    }
    
    .pagination {
        content-visibility: auto;
    }
}

/* 7. Reduce navbar complexity on mobile */
@media (max-width: 767px) {
    .navbar-collapse {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        box-shadow: none;
    }
}

/* 8. Optimize images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

@media (max-width: 767px) {
    img {
        image-rendering: auto; /* Better quality on mobile */
    }
}

/* 9. Reduce box-shadows on mobile */
@media (max-width: 767px) {
    .cover-image,
    .poster-container {
        box-shadow: none !important;
    }
}

/* 10. Optimize fonts */
@media (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* 11. Prevent layout shift during loading */
.movie-card::before {
    content: '';
    display: block;
    padding-top: 0; /* Remove if not needed */
}

/* 12. Optimize navbar dropdown */
@media (max-width: 991px) {
    .navbar-nav {
        padding-top: 0.5rem;
    }
    
    .dropdown-menu {
        margin-top: 0 !important;
    }
}

/* 13. Lazy load indicator */
.poster-container:empty::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #ffc107;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 14. Reduce will-change usage */
@media (max-width: 767px) {
    .poster-container img {
        will-change: auto !important; /* Remove will-change on mobile */
    }
}

/* 15. Optimize transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}