/* --- block 1 --- */
/* Previene overflow orizzontale su tutta la pagina */
    html {
        overflow-x: hidden !important;
    }

    /* Rimuove padding-top da layout-content per eliminare fascia bianca */
    #layout-content {
        padding-top: 0 !important;
    }

    /* Parallax Effect - Video fisso, contenuto che scorre sopra */
    .hero-video-section {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 85vh;
        height: 85dvh;
        z-index: 0;
    }

    /* Spacer per mantenere lo spazio del video nel flusso del documento */
    .hero-video-spacer {
        height: 85vh;
        height: 85dvh;
        position: relative;
        z-index: 0;
    }

    /* Contenitore principale del contenuto - copre il video fisso */
    #layout-content {
        position: relative;
        z-index: 10;
    }

    /* Footer deve coprire il video */
    #layout-footer {
        position: relative;
        z-index: 10;
        background: #1a1a2e !important;
    }

    /* Tutte le sezioni nel contenuto devono avere sfondo solido */
    #layout-content > section,
    #layout-content > div:not(.hero-video-spacer):not(.hero-video-section) {
        background: #f8f5fa;
        position: relative;
        z-index: 10;
    }

    /* Prima sezione dopo lo spacer - bordo arrotondato in alto per effetto "slide up" */
    .hero-video-spacer + section,
    .hero-video-spacer + div {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        margin-top: -30px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
        position: relative;
        z-index: 10;
        background: #f8f5fa !important;
    }

/* --- block 2 --- */
@media (max-width: 768px) {
            .internal-page-logo {
                max-height: 60px !important;
                max-width: 80px !important;
            }
            .internal-page-logo-wrapper {
                top: 70px !important;
            }
        }
        @media (max-width: 480px) {
            .internal-page-logo {
                max-height: 50px !important;
                max-width: 65px !important;
            }
            .internal-page-logo-wrapper {
                top: 60px !important;
            }
        }

/* --- block 3 --- */
@media (max-width: 768px) {
            #hero-youtube-player {
                min-height: 120vh !important;
                min-width: 213.33vh !important;
            }
        }

/* --- block 4 --- */
.hero-gallery-item:hover { transform: scale(1.05); }
                @media (max-width: 768px) {
                    .hero-video-gallery { top: 5px !important; width: 95% !important; }
                    .hero-gallery-item { flex: 0 0 90px !important; min-width: 90px !important; height: 50px !important; }
                    .hero-gallery-wrapper { padding: 6px 8px !important; }
                }

                /* Loop continuo in CSS: translateX(-50%) = fine degli originali, inizio cloni.
                   Keyframes loop-perfect perché cloni = originali count → ripetizione identica. */
                @keyframes hero-gallery-scroll {
                    from { transform: translateX(0); }
                    to { transform: translateX(-50%); }
                }
                .hero-gallery-slider.scrolling {
                    animation: hero-gallery-scroll 80s linear infinite;
                    will-change: transform;
                }
                /* iOS memory fix: su mobile disattiva COMPLETAMENTE l'animazione marquee
                   e abilita scroll-x nativo. Niente animation infinite = niente compositing
                   layer permanente = niente memory leak iOS Safari. */
                @media (max-width: 768px) {
                    .hero-gallery-wrapper { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
                    .hero-gallery-wrapper::-webkit-scrollbar { display: none; }
                    .hero-gallery-slider.scrolling {
                        animation: none !important;
                        will-change: auto;
                        transform: none !important;
                        width: auto !important;
                    }
                }
                /* Pausa automatica quando tab in background (CSS-native) */
                @media (prefers-reduced-motion: reduce) {
                    .hero-gallery-slider.scrolling { animation: none; }
                }

/* --- block 5 --- */
.competitions-toggle:hover span {
                        color: #F4E076 !important;
                    }
                    .competition-card:hover {
                        background: rgba(0,0,0,0.35) !important;
                        border-color: rgba(255,255,255,0.4) !important;
                        transform: translateY(-2px);
                    }
                    .competitions-menu-wrapper:hover .competitions-mega-menu {
                        opacity: 1 !important;
                        visibility: visible !important;
                        pointer-events: auto !important;
                    }
                    .competitions-mega-menu {
                        pointer-events: none;
                    }
                    @media (max-width: 768px) {
                        .homepage-logo-wrapper {
                            top: 70px !important;
                        }
                        .homepage-logo-wrapper img {
                            max-height: 50px !important;
                        }
                        .competitions-menu-wrapper {
                            display: none !important;
                        }
                    }