/**
 * Performance Optimizations CSS
 * FIX #16: GPU-accelerated animations and reduced motion preferences
 * 
 * This file adds performance optimizations without modifying the main stylesheet
 */

/* ==========================================================================
   FIX #16: GPU-Accelerated Animations
   Use transform and opacity for smoother 60fps animations
   ========================================================================== */

/* 🚀 OPTIMISATION: content-visibility pour ne pas render ce qui est hors écran */
/* Cela évite au navigateur de calculer le rendu graphique des posts invisibles */
.post {
    content-visibility: auto;
    contain-intrinsic-size: 1px 150px;
    /* Isole le layout - PAS 'paint' car ça couperait les images/code qui débordent */
    contain: layout style;
}

/* 🚀 Désactiver le flou coûteux sur mobile pour les listes répétées */
/* backdrop-filter sur 100 posts = GPU à genoux sur mobile */
@media (max-width: 768px) {

    [data-theme="deep-ether"] .post,
    [data-theme="desert-gold"] .post {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Compenser par une opacité plus forte */
        background: rgba(20, 25, 45, 0.98) !important;
    }

    [data-theme="desert-gold"] .post {
        background: rgba(30, 25, 20, 0.98) !important;
    }
}

/* Base: Pas de GPU layer permanent - évite saturation VRAM */
.topic-card,
.post,
.btn,
.filter-btn,
.context-menu,
.modal,
.toast,
.lightbox-overlay,
.sticker-grid img,
.floating-nav-btn {
    /* Hint to browser for layer promotion - UNIQUEMENT quand nécessaire */
    will-change: auto;
    backface-visibility: hidden;
}

/* UNIQUEMENT au survol/interaction: promouvoir vers GPU */
.topic-card:hover,
.post:hover,
.btn:hover,
.btn:active,
.topic-card.bump-flash,
.post.highlight-yellow {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reset will-change après interaction */
.topic-card:not(:hover),
.post:not(:hover) {
    will-change: auto;
}

/* Optimize transforms - use translate3d for GPU acceleration */
.context-menu.show {
    transform: translate3d(0, 0, 0) scale(1);
}

.context-menu {
    transform: translate3d(0, 10px, 0) scale(0.95);
}

/* Lightbox with GPU-accelerated fade */
.lightbox-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
}

/* Floating buttons - smooth show/hide */
.floating-nav-btn {
    transform: translate3d(0, 0, 0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.floating-nav-btn.hidden {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    pointer-events: none;
}

/* Toast animations - GPU accelerated slide */
.toast {
    transform: translate3d(120%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.toast.show {
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   Reduced Motion Preferences
   Respect user system settings for motion sensitivity
   ========================================================================== */
@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;
    }

    /* Disable transform animations */
    .topic-card,
    .post,
    .btn,
    .context-menu,
    .toast,
    .floating-nav-btn {
        transform: none !important;
        transition: none !important;
    }

    /* Keep essential opacity transitions for UX */
    .lightbox-overlay {
        transition: opacity 0.15s ease;
    }
}

/* ==========================================================================
   Skeleton Loading Animation - Optimized
   Use opacity animation instead of background-position for better perf
   ========================================================================== */
.skeleton-line,
.skeleton-avatar,
.skeleton-header {
    background: linear-gradient(90deg,
            var(--bg-tertiary, #333) 0%,
            var(--bg-secondary, #444) 50%,
            var(--bg-tertiary, #333) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

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

/* Reduce skeleton animation on low-power devices */
@media (prefers-reduced-motion: reduce) {

    .skeleton-line,
    .skeleton-avatar,
    .skeleton-header {
        animation: none;
        opacity: 0.7;
    }
}

/* ==========================================================================
   Smooth Scroll Container - GPU Optimized
   ========================================================================== */
.topic-scroll-container,
.main-content,
.sidebar {
    -webkit-overflow-scrolling: touch;
    /* iOS smooth scrolling */
    scroll-behavior: smooth;
    /* Prevent scroll chaining */
    overscroll-behavior: contain;
}

/* Lock scroll during prepend operations */
.is-scroll-locked {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

/* 🚀 DÉSACTIVER L'ANCRAGE NATIF: Empêche le navigateur d'interférer avec notre JS */
/* Quand on fait une "téléportation" de scroll, le navigateur tente de corriger - ça crée des sauts */
#posts-container,
.topic-scroll-container {
    overflow-anchor: none !important;
}

/* Désactive l'ancrage aussi sur les éléments techniques */
#top-spacer,
#bottom-spacer,
.sentinel,
.load-more-indicator {
    overflow-anchor: none !important;
}

/* ==========================================================================
   🚀 IMAGE STABILIZATION (Anti-Saut)
   Si une image charge APRÈS le calcul JS, elle décale tout. On réserve la place.
   ========================================================================== */
/* Images uploadées uniquement - PAS les stickers qui ont souvent un fond transparent */
.post-content img:not(.sticker):not(.sticker-thumb) {
    display: block;
    /* Hauteur minimale pour réserver l'espace */
    min-height: 50px;
    /* Placeholder visuel pendant le chargement */
    background: rgba(128, 128, 128, 0.1);
}

/* Stickers : pas de fond pour respecter la transparence */
.post-content .sticker,
.post-content .sticker-thumb {
    display: inline-block;
    min-height: 20px;
    background: transparent !important;
}

/* ==========================================================================
   Image Loading Transitions
   Smooth fade-in when images load
   ========================================================================== */
.post-image,
.sticker,
.sticker-thumb {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-image[src]:not([src=""]),
.sticker[src]:not([src=""]),
.sticker-thumb[src]:not([src=""]) {
    opacity: 1;
}

/* Lazy loaded images - immediate display once loaded */
img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   Network Error Toast - Subtle but visible
   ========================================================================== */
.network-error-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--error-bg, #ff4757);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.network-error-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.network-error-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.network-error-toast .toast-retry {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
}

.network-error-toast .toast-retry:hover {
    background: rgba(255, 255, 255, 0.3);
}

.network-error-toast .toast-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.network-error-toast .toast-dismiss:hover {
    color: #fff;
}