/* ─────────────────────────────────────────────────────────────
   Hidden Porto — livro folheável dentro da secção final.
   Ocupa o mesmo lugar da fotografia do livro aberto (.hp-fcta-book).

   O volume do livro é feito com três coisas por cima e por baixo das
   páginas, nenhuma delas a tocar nas transformações do StPageFlip:
   o corte das folhas nas duas beiras, a sombra da lombada ao meio e a
   sombra no chão. Uma perspetiva no elemento pai partiria as contas do
   rato da biblioteca, que converte as coordenadas pelo getBoundingClientRect.
   ───────────────────────────────────────────────────────────── */

.hp-livro {
    position: relative;
    z-index: 1;
}

.hp-livro[hidden] {
    display: none;
}

/* O `hidden` do HTML vale display:none na folha do browser, e a folha do
   browser perde para `.hp-fcta-book img { display:block }` do bloco. Sem esta
   linha a fotografia estática continuava por cima do livro depois de o JS a
   esconder. */
.hp-fcta-book .hp-fcta-book-img[hidden] {
    display: none;
}

/* ── cena: o livro e tudo o que lhe dá volume ── */
.hp-livro-cena {
    position: relative;
    /* Contém o multiply do vinco, que de outra forma procurava um fundo
       mais acima e mudava de aspeto conforme a secção. */
    isolation: isolate;
}

/* corte das folhas nas duas beiras */
.hp-livro-cena::before,
.hp-livro-cena::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 8px;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0) 90%,
            rgba(0, 0, 0, 0.22) 100%),
        repeating-linear-gradient(90deg,
            #efe9dc 0 1px,
            #c9bfa8 1px 2px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.38);
}

.hp-livro-cena::before {
    left: -8px;
    border-radius: 4px 0 0 4px;
}

.hp-livro-cena::after {
    right: -8px;
    border-radius: 0 4px 4px 0;
}

/* sombra no chão, por baixo de tudo */
.hp-livro-chao {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: -18px;
    height: 36px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 72%);
    filter: blur(7px);
}

.hp-livro-palco {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    /* O StPageFlip arrasta a página com o rato; sem isto o telemóvel
       interpreta o arrasto como scroll e o canto nunca levanta. */
    touch-action: pan-y;
    /* Clicar na metade direita avança e na esquerda recua, por isso o
       cursor de mão é verdade em todo o livro. */
    cursor: pointer;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}

/* sombra da lombada: só com duas páginas e só com o livro parado, senão
   aparecia desenhada por cima da folha a virar */
.hp-livro-vinco {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 58px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    mix-blend-mode: multiply;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.08) 32%,
        rgba(0, 0, 0, 0.28) 48%,
        rgba(0, 0, 0, 0.34) 50%,
        rgba(0, 0, 0, 0.28) 52%,
        rgba(0, 0, 0, 0.08) 68%,
        rgba(0, 0, 0, 0) 100%);
}

.hp-livro--duplo.hp-livro--parado .hp-livro-vinco {
    opacity: 1;
}

/* canto de baixo à direita sombreado, a dizer que é ali que se pega.
   Desaparece assim que a pessoa mexe no livro. */
.hp-livro-canto {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 86px;
    height: 86px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: linear-gradient(315deg,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.16) 40%,
        rgba(0, 0, 0, 0) 64%);
}

.hp-livro--parado .hp-livro-canto {
    opacity: 1;
}

/* A animação só arranca com o livro à vista, senão gastava-se com a secção
   ainda por baixo da dobra. */
.hp-livro--a-vista.hp-livro--parado .hp-livro-canto {
    animation: hp-livro-respira 2.8s ease-in-out 3;
}

.hp-livro--tocado .hp-livro-canto {
    opacity: 0;
    animation: none;
}

@keyframes hp-livro-respira {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

.hp-livro-pag {
    background: var(--hp-cream, #F4F1EA);
}

/* Selector com dois níveis de propósito: o bloco tem `.hp-fcta-book img` com
   width:100% e duas drop-shadow, e essa regra apanharia cada página do livro.
   A sombra é do livro inteiro, não de cada folha. */
.hp-fcta-book .hp-livro-pag img,
.hp-livro-pag img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: none;
}

/* ── controlos ──
   Em repouso não aparecem: o livro já se explica sozinho, com a lombada, o
   corte das folhas e o canto levantado. Voltam ao passar o rato pelo livro e
   com o teclado. Continuam a ocupar o lugar, para nada saltar quando surgem. */
.hp-livro-controlos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 38px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hp-livro:hover .hp-livro-controlos,
.hp-livro-controlos:focus-within {
    opacity: 1;
}

/* Sem rato não há como os fazer aparecer, e tocar nas setas é a alternativa a
   arrastar. Ficam sempre à vista. */
@media (hover: none) {
    .hp-livro-controlos {
        opacity: 1;
    }
}

.hp-livro-seta {
    font: inherit;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201, 160, 99, 0.55);
    background: transparent;
    color: #F0EBE0;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.hp-livro-seta:hover {
    background: rgba(201, 160, 99, 0.18);
}

.hp-livro-seta:disabled {
    opacity: 0.3;
    cursor: default;
}

.hp-livro-conta {
    font-family: var(--hp-font-body, 'Courier New', monospace);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(240, 235, 224, 0.6);
    min-width: 92px;
    text-align: center;
}

/* A dica é um convite, não uma nota de rodapé: estava a 11,5 px com 40% de
   opacidade, a coisa mais apagada da secção. Fica no dourado dos controlos,
   que é a cor do que se pode tocar. Contraste medido do #C9A063 sobre o
   #1F3144: 5,5:1, acima dos 4,5:1 que o AA pede. */
.hp-livro-dica {
    text-align: center;
    font-family: var(--hp-font-body, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hp-gold, #C9A063);
    margin: 20px 0 0;
}

@media (max-width: 782px) {
    .hp-livro-cena::before,
    .hp-livro-cena::after {
        width: 5px;
    }
    .hp-livro-cena::before { left: -5px; }
    .hp-livro-cena::after  { right: -5px; }

    .hp-livro-chao {
        bottom: -12px;
        height: 24px;
    }

    .hp-livro-canto {
        width: 56px;
        height: 56px;
    }

    .hp-livro-controlos {
        margin-top: 28px;
        gap: 14px;
    }
    .hp-livro-seta {
        width: 42px;
        height: 42px;
    }
    .hp-livro-dica {
        font-size: 12px;
        letter-spacing: 1.6px;
        margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-livro--a-vista.hp-livro--parado .hp-livro-canto {
        animation: none;
    }
    .hp-livro-vinco,
    .hp-livro-canto,
    .hp-livro-controlos {
        transition: none;
    }
}