/* ==========================================================
   TABERNA IOSEPHI 1.6 - ALBUNS / ESTANTE
   Visual "caderno" tridimensional
   ========================================================== */

/* A ordem de empilhamento e intencional:
   E1 (baixo) cobre E2; E2 cobre E3. */
#estante1 { z-index: 1030; }
#estante2 { z-index: 1020; }
#estante3 { z-index: 1010; }

#estante1,
#estante2,
#estante3 {
    overflow: visible !important;
}

#estante1::before,
#estante1::after,
#estante2::before,
#estante2::after,
#estante3::before,
#estante3::after {
    content: none !important;
    display: none !important;
}

/* O botao continua recortado pelo quadrilatero criado por taberna.js.
   O "caderno" e um irmao do botao, portanto pode sair do nicho. */
.hotspot-album .hotspot-area {
    background: transparent;
    overflow: visible;
    z-index: 20;
    pointer-events: none;
}

/* ----------------------------------------------------------
   OBJETO VISUAL DO ALBUM
   ---------------------------------------------------------- */
.album-estante-objeto {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    /* Largura grande o bastante para a capa ficar legivel.
       A altura nasce da proporcao A4 no elemento interno. */
    width: 84%;

    /* O album se apoia proximo da borda inferior do nicho e sobe
       sobre o nicho superior. */
    bottom: 7%;

    /* Perspectiva geral coerente com as prateleiras da estante. */
    transform-origin: 50% 100%;
}

.album-estante-caderno {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;

    /* A linha superior das prateleiras sobe para a direita;
       por isso o caderno acompanha aproximadamente esse angulo. */
    transform: rotate(-12.5deg) perspective(700px) rotateX(7deg);
    transform-origin: 50% 100%;

    filter: drop-shadow(5px 8px 5px rgba(0, 0, 0, .42));
}

/* ----------------------------------------------------------
   POSICAO DOS TRES ALBUNS
   ---------------------------------------------------------- */

/* E1: esquerda e na frente. */
.album-estante-objeto.album-estante1 {
    left: -5%;
    bottom: 15%;
    width: 86%;
}

/* E2: direita. */
.album-estante-objeto.album-estante2 {
    right: -5%;
    left: auto;
    bottom: 36%;
    width: 85%;
}

/* E3: centro. */
.album-estante-objeto.album-estante3 {
    left: 50%;
    bottom: 2%;
    width: 84%;
    transform: translateX(-50%);
}

/* Pequenas diferencas de angulo para evitar o aspecto mecanico. */
.album-estante1 .album-estante-caderno {
    transform: rotate(-13.5deg) perspective(700px) rotateX(8deg);
}

.album-estante2 .album-estante-caderno {
    transform: rotate(-11deg) perspective(700px) rotateX(7deg);
}

.album-estante3 .album-estante-caderno {
    transform: rotate(-12.5deg) perspective(700px) rotateX(6deg);
}

/* ----------------------------------------------------------
   CAPA
   ---------------------------------------------------------- */
.album-estante-capa {
    position: absolute;
    z-index: 4;
    inset: 0;

    width: 100%;
    height: 100%;
    display: block;

    /* O canvas ja tem a pagina completa do PDF; width/height 100%
       preservam toda a capa e os titulos. */
    border: 0;
    border-radius: 1.5px 2px 2px 1.5px;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    filter: saturate(.90) brightness(.91) contrast(1.03);

    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.20),
        inset -1px 0 0 rgba(0,0,0,.14),
        inset 0 -1px 0 rgba(0,0,0,.18);
}

/* Reflexo discreto da capa plastificada/encadernada. */
.album-estante-brilho {
    position: absolute;
    z-index: 5;
    inset: 0;
    border-radius: 2px;
    pointer-events: none;
    background: linear-gradient(
        108deg,
        rgba(255,255,255,.13) 0%,
        rgba(255,255,255,.03) 24%,
        rgba(255,255,255,0) 47%,
        rgba(0,0,0,.05) 100%
    );
}

/* ----------------------------------------------------------
   LOMBADA
   Visto de cima, como o livro da foto de referencia.
   ---------------------------------------------------------- */
.album-estante-lombada {
    position: absolute;
    z-index: 2;

    left: -7%;
    top: 1.2%;
    width: 8%;
    height: 98%;

    transform-origin: right center;
    transform: skewY(10deg);

    border-radius: 3px 0 0 3px;

    background:
        linear-gradient(to right,
            #17110e 0%,
            #3c2b22 24%,
            #72513d 58%,
            #2a1c16 100%);

    box-shadow:
        inset 1px 0 rgba(255,255,255,.12),
        inset -2px 0 rgba(0,0,0,.33);
}

/* ----------------------------------------------------------
   MIOLO DAS PAGINAS - BORDA SUPERIOR
   Esta faixa cria o efeito de varias folhas vistas de cima.
   ---------------------------------------------------------- */
.album-estante-paginas-topo {
    position: absolute;
    z-index: 3;

    left: 2.5%;
    top: -1.6%;
    width: 95%;
    height: 1.8%;

    transform-origin: bottom left;
    transform: skewX(-17deg);

    border-radius: 2px 2px 0 0;

    background:
        repeating-linear-gradient(
            to bottom,
            #f5f0e5 0,
            #f5f0e5 1px,
            #d8d0c1 1px,
            #d8d0c1 2px
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.75),
        inset 0 -1px rgba(99,82,61,.35);
}

/* Borda lateral das folhas removida.
   No teste anterior ela parecia uma folha A4 branca saindo do album. */
.album-estante-paginas-direita {
    display: none !important;
}

/* ----------------------------------------------------------
   INTERACAO / ACESSIBILIDADE
   ---------------------------------------------------------- */
.album-estante-objeto:hover .album-estante-capa,
.album-estante-objeto:focus-visible .album-estante-capa {
    filter: saturate(.98) brightness(1.00) contrast(1.04);
}

.album-estante-objeto:hover .album-estante-caderno,
.album-estante-objeto:focus-visible .album-estante-caderno {
    filter: drop-shadow(6px 10px 6px rgba(0,0,0,.48));
}

.album-estante-objeto:focus-visible {
    outline: 3px solid #dfff00;
    outline-offset: 2px;
}

/* Em telas pequenas, mantemos o mesmo desenho; a sala inteira ja escala
   proporcionalmente pelo mecanismo normal da Taberna. */
@media (max-width: 700px) {
    .album-estante-objeto {
        width: 96%;
    }
}