/* --- GLOBAL SCROLLBAR HIDE --- */
html,
body {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* --- CUSTOM FLOATING SCROLLBAR (Brand Sync) --- */
.custom-scrollbar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(228, 30, 18, 0.08);
    z-index: 10000;
    pointer-events: none;
}

.custom-scroll-thumb {
    width: 100%;
    height: 0%;
    background: #e41e12;
    opacity: 0.5;
    border-radius: 0;
    position: absolute;
    top: 0;
}

/* --- PRODUCT NAV PILL --- */
.nav-pill {
    position: fixed;
    bottom: 2vw;
    /* Fissato al fondo centro */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(200, 200, 200, 0.15);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 94px;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 10px 40px 10px 20px;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.nav-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-brand-mark {
    position: relative;
    height: 28px;
    width: 28px;
}

.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    font-family: 'polymath-display', sans-serif;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    /* Coerente con la navigazione */
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    opacity: 0.5;
}

.nav-active {
    color: #e41e12 !important;
}

/* --- NEXT PROJECT FOOTER --- */
.next-project-banner {
    width: 100vw;
    padding: 10vw 0 15vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #eee;
}

.next-project-banner a {
    text-decoration: none;
    color: #000;
    font-family: 'polymath-display', sans-serif;
    font-size: 8vw;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
}

.next-project-banner a:hover {
    opacity: 0.4;
}

.arrow-up {
    color: #e41e12;
}

/* --- CURSOR TRAIL --- */
#cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Fondamentale: ignora i click per non bloccare il menu */
    z-index: 99999;
}

/* --- OVERRIDES UX TOP GALLERY (Parallax & Magnetic) --- */
.gallery-top .img-left {
    position: relative;
    /* Default flow */
    overflow: hidden;
    cursor: none;
}

.gallery-top .img-right {
    /* NON METTERE position: relative, visual.css usa position: absolute! */
    overflow: hidden;
    cursor: none;
}

/* Il bucoSX ha ratio 16/10, il bucoDX ha ratio 16/9. Lo imponiamo ai buchi. */
.gallery-top .img-left {
    aspect-ratio: 16/10;
}

.gallery-top .img-right {
    aspect-ratio: 16/9;
}

.gallery-top img {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 110% !important;
    height: 110% !important;
    transform: translate(-50%, -50%) scale(1.01);
    will-change: transform;
}

/* --- OVERRIDES UX FOOTER (Staggered Elevation C) --- */
.footer-collage {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent !important;
    /* Diamo il colpo di grazia al rettangolo nero per sempre */
}

.footer-collage img {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    width: 100%;
    min-width: 0;
}

/* Uccide TUTTI i bordi nativi che causano i difetti sub-pixel (linee bianche vuote) nel flex in ogni pagina */
.footer-collage .foot-img-1,
.footer-collage .foot-img-2,
.footer-collage .foot-img-3 {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Assegnazione Bordi a riposo (forma monolitica rotonda come il video) */
.footer-collage .foot-img-1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.footer-collage .foot-img-3 {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.footer-collage:hover {
    gap: 1.5vw;
}

/* Su hover tutti acquisiscono bordo pieno indipendente a causa del gap */
.footer-collage:hover .foot-img-1,
.footer-collage:hover .foot-img-3 {
    border-radius: 8px;
}

.footer-collage:hover .foot-img-1 {
    transform: translateY(2vw);
}

.footer-collage:hover .foot-img-2 {
    transform: translateY(-2vw);
    border-radius: 8px;
    /* Attiva il full radius sul centro */
    border-color: transparent !important;
}

/* Protezione overflow per permettere alla card di sforare il container del titolo */
.logo,
.header {
    overflow: visible !important;
}

.footer-collage:hover .foot-img-3 {
    transform: translateY(1vw);
}

/* --- UX: LIQUID GLASS DOT (SQUARE SCREENSHOT MATCH) --- */
.logo .dot {
    position: relative;
    display: inline-block;
    color: #e41e12;
    z-index: 1;
    /* Forzato dietro per il backdrop-filter */
}

/* SIBLING ARCHITECTURE: Protezione del punto originale */
.glass-dot-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    vertical-align: middle;
    margin-left: -0.25em;
    /* Sovrapposizione parziale richiesta */
    z-index: 100;
    /* Solleva l'intero gruppo sopra le altre lettere del titolo */
}

.logo-glass-card {
    position: absolute;
    top: 85%;
    /* Rialzato chirurgicamente sul corpo del punto rosso */
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 0.45em;
    /* Micro-scale per massima eleganza */
    height: auto;
    /* Lasciamo che aspect-ratio gestisca l'altezza */
    aspect-ratio: 1 / 1;
    /* Forza un quadrato perfetto su ogni asse */
    z-index: 2;
    pointer-events: none;

    background: rgba(218, 214, 214, 0.3);
    /* Match Navbar */
    backdrop-filter: blur(4px);
    /* Match Navbar */
    -webkit-backdrop-filter: blur(4px);

    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Match Navbar */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    /* Match Navbar */
    overflow: hidden;
}

/* Rimosso vecchio sistema Liquid per evitare sovrapposizioni e "punti quadrati" */

/* Rimosso .liquidGlass-shine perché non richiesto nel nuovo stile statico */

/* Rimosso .liquidGlass-shine perché troppo "duro" per questo stile */
.liquidGlass-custom-dot .liquidGlass-shine {
    display: none;
}

/* --- UX: GLASS CARDS TILT PREP --- */
.cards-overlay {
    perspective: 1200px;
    /* Abilita la profondità 3D per le card */
}

.glass-card {
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    transform-style: preserve-3d;
}

.glass-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

* {
    font-family: 'polymath-display', sans-serif !important;
}

/* --- MOBILE RESPONSIVE OVERRIDES (Project Pages) --- */
@media (max-width: 900px) {
    .viewport-container {
        padding-top: 5vw;
    }

    /* Titolo Prodotto (Q1., U2., etc) */
    .logo {
        font-size: 22vw !important;
        /* Più impattante su mobile */
        padding-left: 5vw;
    }

    /* Gallery Top: Margini più stretti */
    .gallery-top {
        margin-top: 15vw !important;
        padding-bottom: 35vw !important;
    }

    .img-left {
        width: 75vw !important;
    }

    .img-right {
        width: 65vw !important;
        top: 60% !important;
    }

    /* Product Cards: Ripristino Overlay Centrato (Anti-Sballo) */
    .cards-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 280px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 !important;
        z-index: 100;
    }

    .glass-card {
        width: 100% !important;
        padding: 15px 20px !important;
        min-height: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .glass-card h3 {
        font-size: 18px !important;
        margin-bottom: 10px;
    }

    .glass-card p {
        font-size: 13px !important;
        line-height: 1.4;
    }

    /* Video & Footer Gallery */
    .video-section {
        margin-top: 10vw !important;
    }

    .footer-collage {
        margin-top: 15vw !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Centra il rettangolo finale su mobile */
        gap: 5vw !important;
    }

    /* Tuning Scrollbar Mobile */
    .custom-scrollbar {
        width: 1px !important;
        background: rgba(228, 30, 18, 0.02) !important;
    }

    .custom-scroll-thumb {
        opacity: 0.3 !important;
    }

    .footer-collage img {
        width: 85% !important;
        border-radius: 8px !important;
    }

    /* Core Product Images (E3, E4, etc.) - Ingrandimento per impatto mobile */
    .tables-container {
        min-height: 220vw !important;
        /* Spazio per foto più grandi */
    }

    .table-sx {
        width: 90vw !important;
        left: 0 !important;
    }

    .table-dx {
        width: 85vw !important;
        right: 0 !important;
        top: 95vw !important;
        /* Riposizionamento per le nuove dimensioni */
    }

    /* --- FINE TUNING SPECIFICO PER PAGINA --- */

    /* Q1: Sfondo (v8) - Posizione neutra a sinistra e zoom 1.12 */
    .page-q1 .table-mega img {
        transform: translate(0px, 75px) scale(1.12) !important;
    }

    /* U2: Abbassamento (v4) + Shift Destra + Ingrandimento */
    .page-u2 .table-mega img {
        transform: translate(8%, 185px) scale(1.2) !important;
    }

    /* R5: Perfetto così */
    .page-r5 .table-mega img {
        transform: translateY(55px) scale(1.05) !important;
    }

    /* E3: Sfondo Unito (Unified) - Valore iniziale v1 */
    .page-e3 .video-section {
        margin-top: 25vw !important;
    }

    .page-e3 .table-mega img {
        transform: translateY(40px) !important;
    }

    /* E4: Calibrazione SINISTRA e GIÙ (v9) */
    .page-e4 .table-mega img {
        transform: translate(0px, 160px) scale(1.1) !important;
    }
}