﻿/*================================================================
  FIX FLICKERING iOS - SCROLL REVERSE SPECIFICO
  
  Risolve SOLO lo sfarfallio durante scroll reverse su iPhone/iPad
  NON modifica colori, layout o funzionalità esistenti
================================================================*/

/* Rilevamento iOS automatico */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 700px) {

        /* 1. FIX CRITICO SCROLL REVERSE - Elimina flickering quando scrolli verso l'alto */
        .mob-top, .mob-cat {
            /* Force compositing layer SEMPRE attivo (chiave del fix) */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            /* Previene repaint durante scroll reverse */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Layer GPU stabile durante movimento */
            will-change: transform;
            /* Evita sub-pixel rendering issues */
            -webkit-font-smoothing: antialiased;
            /* Contenimento per prevenire layout shifts */
            contain: layout style;
            /* Isolamento layer per scroll fluido */
            isolation: isolate;
        }

        /* 2. STABILIZZA POSITION STICKY durante scroll reverse */
        .mob-top {
            /* Position ultra-stabile per iOS */
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            /* Z-index stabile */
            z-index: 1001;
            /* Elimina micro-movements durante scroll reverse */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .mob-cat {
            /* Position ultra-stabile per iOS */
            position: -webkit-sticky;
            position: sticky;
            top: var(--bar-h);
            /* Z-index stabile */
            z-index: 998;
            /* Elimina micro-movements durante scroll reverse */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        /* 3. OTTIMIZZAZIONE SCROLL REVERSE SPECIFICA */
        .mob-top, .mob-cat {
            /* Forza painting optimization per scroll reverse */
            -webkit-perspective: 1000;
            perspective: 1000;
            /* Mantieni layer 3D sempre attivo */
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /* Previene layout recalculation durante scroll up */
            contain: layout style paint;
        }

        /* 4. PROGRESS BAR - Stabile durante scroll reverse */
        .scroll-progress-bar-mobile {
            /* Layer GPU sempre attivo */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            will-change: transform;
            /* Previene flickering della progress bar */
            contain: strict;
        }
    }
}

/*================================================================

