/* RESET BASE */
* { box-sizing: border-box; }

html, body{
    margin: 0;
    padding: 0;
}


body{
    height: 100%;
    display: grid;
    overflow-x: hidden;
    overflow-y: hidden;

    background-color: white;
    background-size: 50vw, 25vh;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}
@media (max-width: 625px) {
    /* MOBILE: nessuno sfondo (l'animazione delle lettere è spenta via JS):
       solo bianco, così non consuma memoria. */
    body{
        overflow: hidden;
        background-image: none;
        background-color: #fff;
    }
}






.q1{
    z-index: 199;
    position: fixed;
    top: 0;
    left: 49.95%;
    transform: translateX(-50%);
    width: 80vw;
    height: 68vh;
}
.sopra {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 100;
    height: 100%;
    top: -30.5%;
}



/********************************************************************************/
/********************************************************************************/
.sopra2{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 77vw;              /* il legno (92% del PNG) -> ~70.9vw = larghezza scaffali */
    z-index: 100;
    height: auto;            /* PROPORZIONALE: l'aspetto non cambia al variare della larghezza */
    top: -17.7vw;            /* porta il bordo alto del legno a filo schermo */
    pointer-events: none;
}
/********************************************************************************/
/********************************************************************************/



.q2{
    position: fixed;
    top: 13vw;               /* dove finisce il legno della testata (scala in vw come l'header) */
    bottom: 0;               /* fino in fondo: attaccati al bancone (che li copre) */
    left: 0.2%;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 102;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
.q2::-webkit-scrollbar {
    display: none;
}

.pagina {
    --shelf-height: 20vh;
    --num-shelves: 4;
    width: 70.9vw;
    margin: 0 auto;
    background-image: url("centro.png");
    background-repeat: repeat-y;
    background-size: 100% var(--shelf-height);
    min-height: calc(var(--shelf-height) * var(--num-shelves));
    position: relative;
    z-index: 100;
}
@media (max-width: 625px) {
    .pagina {
        --shelf-height: 16vh;
        --num-shelves: 6;   /* uno scaffale in più: l'ultimo (in fondo) resta vuoto sotto il bancone */
    }
}

/* NB: il blocco @media mobile del layout (header/scaffali/bancone) è IN FONDO al file,
   così le sue regole vincono sulle definizioni base di .q3/.sotto-wrap/.search-input. */






.q3{
    position: fixed;
    bottom: -9.27vw;       /* il legno appoggia sul bordo inferiore (toglie il trasparente sotto) */
    left: 50%;
    transform: translateX(-50%);
    width: 110vw;          /* il legno (90.9% del PNG) diventa ~100vw -> tocca i lati */
    height: 36.76vw;       /* 110vw * 802/2400 = proporzione naturale di sotto52 (niente schiacciamento) */
    z-index: 200;          /* davanti agli scaffali */
}

.sotto-wrap {
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
}

.sotto{
    z-index: 5;
    width: 100%;
    height: 100%;
}

.search-input {
    font-family: 'DM Sans', sans-serif;
    position: absolute;
    top: 40%;                  /* centro VERTICALE del pannello (misurato) */
    left: 49.5%;               /* centro ORIZZONTALE del pannello (misurato) */
    transform: translate(-50%, -50%) perspective(75vw) rotateX(50deg);
    width: 44vw;
    background-color: transparent;
    border: none;
    font-size: clamp(2.4vh, 4vw, 6vh);
    font-weight: bolder;
    text-align: center;
    z-index: 201;              /* sopra il bancone */
    outline: none;
    color: black;
}
.search-input::placeholder {
    font-family: 'DM Sans', sans-serif;
    color: black;
    opacity: 0.6;
}
.search-input:focus::placeholder {
    opacity: 0;
}
















.libro{
    font-family: 'DM Sans', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    max-height: 15vh;
    min-height: 12vh;
    max-width: none;
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.7vh 0.6vh;
    box-sizing: border-box;
    font-size: 1.6vh;
    font-weight: bolder;
    cursor: pointer;
    border-radius: 40% / 0.25vh;
    box-shadow:
            inset 0.3vw 0 0.6vw rgba(0,0,0,0.35),
            inset -0.3vw 0 0.6vw rgba(0,0,0,0.35);

    transition: transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
    transform-origin: bottom center;
    line-height: 0.9;
    padding-block: 1vh;

    overflow: hidden;

    background-image:
            linear-gradient(gold,gold),
            linear-gradient(gold,gold),
            linear-gradient(gold,gold),
            linear-gradient(gold,gold);
    background-repeat:no-repeat;
    background-size:
            100% 0.15vh,
            100% 0.15vh,
            100% 0.15vh,
            100% 0.15vh;
    background-position:
            center 0.7vh,
            center 1vh,
            center calc(100% - 0.7vh),
            center calc(100% - 1vh);

    z-index: 2;
    will-change: transform;
}




.libro:hover{
    transform: translateY(0%) scale(1.1);
    z-index: 50;

    box-shadow:
            inset 0.3vw 0 0.6vw rgba(0,0,0,0.35),
            inset -0.3vw 0 0.6vw rgba(0,0,0,0.35),
            0 1vh 1vh rgba(0,0,0,0.45);

    filter: brightness(1.1);
}









/* il div segnalibro DENTRO al libro */
.segnalibro {
    will-change: transform;
    font-family: 'DM Sans', sans-serif;
    container-type: size;

    transition: transform 0.35s linear;

    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 3em;
    height: 90%;
    background-color: #da0b00;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
    pointer-events: none;
    z-index: 1;
}

.segnalibro-wrap {
    filter: drop-shadow(0 0.1cqh 0.2cqh rgba(0,0,0,0.5));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.libro:hover .segnalibro {
    filter: brightness(1.1);
    transform: translateX(-50%) translateY(-100%);
}

.segnalibro > .titolo {
    text-transform: uppercase;
    font-size: 10cqh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-53%, -56%, 0);
    text-orientation: mixed;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.35s linear;
}

.libro:hover .segnalibro > .titolo {
    transform: translate(-53%, -100%);
}









@media (max-width: 625px) {
    .libro {
        max-height: 12vh;
        min-height: 9.6vh;
        font-size: 1.28vh;
        padding: 1.36vh 0.48vh;
        padding-block: 0.8vh;
        background-size:
                100% 0.12vh,
                100% 0.12vh,
                100% 0.12vh,
                100% 0.12vh;
        background-position:
                center 0.56vh,
                center 0.8vh,
                center calc(100% - 0.56vh),
                center calc(100% - 0.8vh);
    }
    .pagina {
        background-size: 100% 16vh;
    }
    .segnalibro > .titolo {
        font-size: 8cqh;
    }
}





* {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.search-input {
    -webkit-user-select: text;
    user-select: text;
}



.accedi{
    cursor: pointer;
    position: fixed;
    top: 3.4vw;      /* era calc(4% + 0.5vmin) */
    right: 24.5vw;   /* era 18.3% → ora sulla X, e in vw 23.8*/
    width: 4.7vw;    /* era 7.9vmin → ora scala in larghezza come la testata */
    z-index: 10000;
    transition: transform 0.3s ease;
}
.accedi:hover{
    transform: translateY(0%) scale(1.13);
}







/* ============================================================================
   DESKTOP / SCHERMI LARGHI
   sopra: sopra5.png
   sotto: sotto.png
   corregge solo proporzioni sopra + libreria
   ============================================================================ */
@media (min-width: 626px) {

    /* SOPRA: allargata per portare l'angolo interno in linea con la libreria.
       65.3 -> 66.0vw; height immagine = 66.0/1.5 = 44.0vw; bordo basso legno a 11.3vw. */
    .q1 {
        position: fixed;
        top: 0;
        left: 50%;
        width: 66.0vw;
        height: 11.3vw;
        transform: translateX(-50%);
        z-index: 199;
        pointer-events: none;
    }

    .q1 picture {
        display: contents;
    }

    .sopra2 {
        position: fixed;
        left: 50%;
        top: -15.08vw;
        width: 66.0vw;
        height: auto;
        transform: translateX(-50%);
        z-index: 100;
        display: block;
        max-width: none;
        pointer-events: none;
    }

    /* LIBRERIA: stessa larghezza visiva del sopra (60vw).
       bordo basso legno testata = 11.26vw; .q2 a 11.2vw -> ~1.5px di sovrapposizione:
       chiude il filo bianco senza coprire troppo il bordo della testata. */
    .q2 {
        position: fixed;
        top: 11.2vw;
        bottom: 12.5vw;
        left: 0;
        right: 0;
        width: 100vw;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 102;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .q2::-webkit-scrollbar {
        display: none;
    }

    /* larghezza = bordo DIETRO del banco (dove la libreria lo tocca):
       in sotto.png il legno in alto è 71.6% -> 0.716*84vw = 60vw */
    .pagina {
        width: 60vw;
        margin: 0 auto;
        --shelf-height: 19.6vh;
        --num-shelves: 4;
        background-size: 100% var(--shelf-height);
        min-height: calc(var(--shelf-height) * var(--num-shelves));
        position: relative;
        z-index: 100;
    }

    /* SOTTO: lascio le tue proporzioni che funzionano */
    .q3 {
        position: fixed;
        left: 50%;
        bottom: -3.5vw;
        width: 84vw;
        height: 23.7vw;
        transform: translateX(-50%);
        z-index: 300;
        pointer-events: none;
    }

    .sotto-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        z-index: 5;
        pointer-events: none;
    }

    .sotto-wrap picture {
        display: contents;
    }

    .sotto {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        max-width: none;
        pointer-events: none;
    }

    .search-input {
        font-family: 'DM Sans', sans-serif;
        position: absolute;
        top: 46%;
        left: 50%;
        width: 26vw;
        background-color: transparent;
        border: none;
        font-size: clamp(2.2vh, 2.8vw, 5vh);
        font-weight: bolder;
        text-align: center;
        outline: none;
        color: black;
        z-index: 301;
        pointer-events: auto;
        transform: translate(-50%, -50%) perspective(58vw) rotateX(42deg);
    }
}









/* ============================================================================
   MOBILE (≤625px) — LAYOUT A TUTTO SCHERMO
   Corretto su sopra52.png reale: 2048x1365.
   Parte visibile del legno: x 77–1971, y 407–953.
   Obiettivo: il legno tocca bordo alto, sinistro e destro dello schermo.
   ============================================================================ */
@media (max-width: 625px) {

    html, body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        background-image: none;
        background-color: #fff;
    }

    /* HEADER: sopra52.png deve toccare esattamente bordo alto e lati.
       Non usare height forzata: altrimenti l'immagine si deforma e non combacia. */
    .q1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 28.9vw;
        transform: none;
        z-index: 199;
        pointer-events: none;
    }

    .sopra,
    .sopra2 {
        position: fixed;
        width: 108.2vw; /* compensa il trasparente laterale del PNG */
        height: auto; /* mantiene le proporzioni reali */
        left: 50%;
        top: -21.5vw; /* porta il legno a y=0 */
        transform: translateX(-50%);
        z-index: 100;
        pointer-events: none;
        display: block;
        max-width: none;
    }

    /* SCAFFALI: partono subito sotto il legno superiore. */
    .q2 {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overflow-y: scroll;
        position: fixed;
        top: 28.9vw;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        overflow-x: hidden;
        z-index: 102;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .q2::-webkit-scrollbar {
        display: none;
    }

    .pagina {
        width: 100vw;
        margin: 0;
        --shelf-height: 16vh;
        --num-shelves: 6;
        background-size: 100% var(--shelf-height);
    }

    /* BANCONE inferiore MOBILE: nuovo sotto52.png sopra gli scaffali */
    .q3 {
        position: fixed;
        width: 108vw;
        height: 54vw;
        left: 50%;
        bottom: -13.5vw;
        transform: translateX(-50%);
        z-index: 300;
        pointer-events: none;
    }

    .sotto-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        z-index: 5;
        pointer-events: none;
    }

    .sotto {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        max-width: none;
        pointer-events: none;
    }

    /* SEARCH centrato nel riquadro superiore del nuovo sotto52 */
    .search-input {
        pointer-events: auto;
        position: absolute;
        top: 37%;
        left: 50%;
        transform: translate(-50%, -50%) perspective(75vw) rotateX(50deg);
        width: 38vw;
        height: 8vw;
        font-size: 5.2vw;
        text-align: center;
        z-index: 301;
    }


    .accedi {
        top: 8.5vw;      /* era calc(4% + 0.5vmin) */
        right: 8vw;   /* era 18.3% → ora sulla X, e in vw 8.5*/
        width: 11.3vw;    /* era 7.9vmin → ora scala in larghezza come la testata */
    }
}