/* ============================================
   OPTIMASI PERFORMANCE - Skeleton & Fade-in
   ============================================ */

/* Skeleton Loading State */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}

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

/* Skeleton untuk game card */
.skeleton-game-card {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Skeleton untuk provider card */
.skeleton-provider-card {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Skeleton untuk text */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

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

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.long {
    width: 100%;
}

/* Fade-in Animation - hanya untuk konten yang secara eksplisit menggunakan class ini */
.fade-in-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fade-in-content.show {
    opacity: 1;
}

/* Fade-in dengan delay untuk staggered effect */
.fade-in-delay-1 {
    transition-delay: 0.1s;
}

.fade-in-delay-2 {
    transition-delay: 0.2s;
}

.fade-in-delay-3 {
    transition-delay: 0.3s;
}

/* Smooth content reveal - hanya untuk wrapper yang secara eksplisit menggunakan class loaded */
.content-wrapper-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.content-wrapper-fade.loaded {
    opacity: 1;
}

/* Optimasi untuk gambar lazy loading */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Prevent layout shift saat gambar loading */
.game-box img,
.provider-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Loading state untuk konten utama */
.main-content-loading {
    min-height: 400px;
    position: relative;
}

.main-content-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Optimasi untuk transisi */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}