/**
 * ProGamers Links - Otimizações de Performance
 * Melhorias para Core Web Vitals e performance mobile
 */

/* Contenção de layout para evitar CLS (Cumulative Layout Shift) */
.pg-links-wrapper,
.pg-links-columns {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

.pg-link-item {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 0 80px;
}

/* GPU acceleration para animações suaves */
.pg-link-item,
.pg-btn,
.pg-link-icon {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

/* Otimização de fontes para LCP (Largest Contentful Paint) */
.pg-link-title,
.pg-col-title {
    font-display: swap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Carregamento de imagens otimizado */
.pg-link-icon img {
    loading: lazy;
    decoding: async;
    content-visibility: auto;
    contain-intrinsic-size: 30px 30px;
}

/* Skeleton loading para melhor FCP (First Contentful Paint) */
.pg-link-item.loading-skeleton {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.1) 25%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0.1) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

.pg-link-item.loading-skeleton .pg-link-title,
.pg-link-item.loading-skeleton .pg-btn {
    background: rgba(255,255,255,0.3);
    color: transparent;
    border-radius: 4px;
}

/* Intersection Observer para lazy loading */
.pg-link-item:not(.animate-in) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pg-link-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Redução de repaints e reflows */
.pg-link-item::before,
.pg-btn::before {
    will-change: left;
    transform: translateZ(0);
}

/* Otimização para touch devices */
@media (hover: none) and (pointer: coarse) {
    .pg-link-item {
        /* Desabilita hover custoso em dispositivos touch */
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    
    .pg-btn {
        transition: transform 0.1s ease, background 0.1s ease;
    }
    
    /* Remove animações custosas em dispositivos menos potentes */
    .pg-link-item::before,
    .pg-btn::before {
        display: none;
    }
}

/* Prefere motion reduzido para melhor performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .pg-link-item {
        animation: none;
    }
}

/* Otimizações para redes lentas */
@media (prefers-reduced-data: reduce) {
    .pg-link-item::before,
    .pg-btn::before {
        display: none;
    }
    
    .pg-link-item {
        backdrop-filter: none;
        background: rgba(255,255,255,0.1);
    }
    
    .pg-link-icon {
        box-shadow: none;
    }
    
    .pg-btn {
        box-shadow: 0 2px 8px rgba(166, 229, 21, 0.2);
    }
}

/* Compressão de z-index para melhor layering */
.pg-link-item {
    z-index: 1;
}

.pg-link-item:hover,
.pg-link-item:focus {
    z-index: 2;
}

.pg-btn {
    z-index: 3;
}

/* Critical CSS inlining helper */
.pg-links-critical {
    /* Estilos críticos que devem ser inline */
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* Resource hints para FontAwesome */
link[href*="font-awesome"] {
    rel: preload;
    as: style;
    crossorigin: anonymous;
}

/* Otimização para dispositivos com baixo DPR */
@media (-webkit-max-device-pixel-ratio: 1) {
    .pg-link-icon {
        box-shadow: 0 2px 8px rgba(166, 229, 21, 0.3);
    }
    
    .pg-btn {
        box-shadow: 0 2px 8px rgba(166, 229, 21, 0.3);
    }
    
    .pg-link-item {
        backdrop-filter: blur(5px);
    }
}

/* Otimização para telas de alta resolução */
@media (-webkit-min-device-pixel-ratio: 3) {
    .pg-link-icon img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Memory management para listas longas */
.pg-links-wrapper {
    overflow-anchor: none;
}

/* Performance hints para o browser */
.pg-link-item {
    isolation: isolate;
}

.pg-btn {
    isolation: isolate;
}

/* Otimização de scroll para mobile */
.pg-links-wrapper,
.pg-links-columns {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Prevenção de layout thrashing */
.pg-link-title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Otimização de bateria para dispositivos móveis */
@media (prefers-reduced-motion: reduce) {
    .pg-link-item,
    .pg-btn {
        transition: none;
        animation: none;
        transform: none;
    }
}

/* PWA optimizations */
@media (display-mode: standalone) {
    .pg-links-wrapper,
    .pg-links-columns {
        padding-top: max(20px, env(safe-area-inset-top) + 10px);
        padding-bottom: max(20px, env(safe-area-inset-bottom) + 10px);
    }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
    .pg-link-item {
        color-scheme: dark;
    }
}

/* Reduce transparency em dispositivos menos potentes */
@media (prefers-reduced-transparency: reduce) {
    .pg-link-item {
        backdrop-filter: none;
        background: rgba(46, 204, 113, 0.2);
    }
}

/* Critical path optimization */
.pg-links-above-fold {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

.pg-links-below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* Async font loading support */
.fonts-loading .pg-link-title,
.fonts-loading .pg-col-title {
    font-family: system-ui, -apple-system, sans-serif;
}

.fonts-loaded .pg-link-title,
.fonts-loaded .pg-col-title {
    font-family: inherit;
}

/* Service Worker caching hints */
.pg-link-icon img {
    /* Marca imagens para cache pelo SW */
    data-cache: "icons";
}

/* Optimização para CPU throttling */
@media (prefers-reduced-motion: reduce) {
    .pg-link-item:nth-child(n) {
        animation-delay: 0s;
    }
}

/* Memory-efficient animations */
@keyframes fadeInUpEfficient {
    0% {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pg-link-item.efficient-animation {
    animation: fadeInUpEfficient 0.3s ease-out;
}

/* Contain layout shifts */
.pg-link-item {
    min-height: 80px; /* Previne CLS */
}

@media (max-width: 480px) {
    .pg-link-item {
        min-height: 120px; /* Altura mínima em mobile */
    }
}