body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #FFF;
    overflow: hidden;
}

main {
    padding: 40px;
    box-sizing: border-box;
    overflow-y: auto; /* Ativa a rolagem vertical. */
    overflow-x: hidden; /* Evita que a folha "dance" para os lados. */
    -webkit-overflow-scrolling: touch; /* Suaviza a rolagem no celular. */

    /* Garante o visual elegante no Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

main,
.page-wrapper {
    width: 100%;
    max-width: 900px;
    height: 90vh;
    /* Altura da folha na tela */
    margin: 5vh auto;
    background: #fff;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); /* Remova o overflow: hidden daqui para não travar a rolagem. */
}

pre {
    background-color: #f4f4f4;
    padding: 15px;
    border-left: 5px solid #333;
    overflow-x: auto; /* Adiciona barra de rolagem se o código for muito longo. */
    border-radius: 4px;
}

code {
    font-family: "Courier New", Courier, monospace;
    color: #d63384; /* Uma cor de destaque, como rosa ou azul. */
}

/* ======================================================================
   BARRA DE ROLAGEM * INÍCIO
====================================================================== */
/* Funciona nos navegadores Chrome, Edge e Safari */
main::-webkit-scrollbar {
    width: 6px; /* Largura da barra. */
}

main::-webkit-scrollbar-track {
    background: transparent; /* Fundo da calha da barra. */
}

main::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* Cor da barra (cinza transparente). */
    border-radius: 10px;
}

main::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4); /* Escurece ao passar o mouse. */
}
/* ======================================================================
   FINAL * BARRA DE ROLAGEM
====================================================================== */

/* ======================================================================
   EFEITO VISUAL QUANDO O BOTÃO FOR FOCADO OU CLICADO PELO TECLADO
====================================================================== */
/*
    Ao pressionarmos no teclado a seta para a direita (←) ou para a esquerda (→),
    o JavaScript procura no HTML por um link que tenha data-dir="forward".
    Quando ele achar (por exemplo, o link para a página 02), ele executa o comando .click().
    O código de "Sistema de Navegação"(item 3 do nosso código JavaScript) percebe esse clique, toca o som,carrega a página
    e faz a dobra do papel.

    Se em alguma página não tiver um link de "Voltar"(como na Capa) ou de "Seguir Para A Próxima Página" (como na Contracapa),
    a seta esquerda do teclado, ou direita, simplesmente não fará nada, o que evita erros no console.
*/
.nav-btn:focus,
.nav-btn:active {
    outline: none;
    transform: scale(0.95);
    background-color: #333;
    transition: transform 0.1s;
}

/* ======================================================================
   BOTÃO DO SOM DE MUDANÇA DE PÁGINA * INÍCIO
====================================================================== */
/* Características do botão */
.btn-som-de-mudanca-de-pagina {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.btn-som-de-mudanca-de-pagina:hover {
    transform: scale(1.15); /* Aumenta 15% o tamanho. */
    background: rgba(0, 0, 0, 0.8); /* Escurece levemente o fundo. */
}

/* Efeito ao clicar (clique rápido) */
.btn-som-de-mudanca-de-pagina:active {
    transform: scale(0.95); /* Dá um leve "afundada" ao clicar. */
}
/* ======================================================================
   FINAL * BOTÃO DO SOM DE MUDANÇA DE PÁGINA
====================================================================== */

/* ======================================================================
   PALCO 3D E CAMADAS (FLIP LAYERS) * INÍCIO
====================================================================== */
.page-wrapper {
    perspective: 3000px;
    overflow: hidden; /* Mantém o conteúdo dentro da moldura da revista. */
}

.flip-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 40px; /* Devolvemos o padding para não colar o texto na borda. */
    box-sizing: border-box;
    background: white;
    backface-visibility: hidden;
    transform-origin: 0% 50%;

    /* Correção para o texto não vazar embaixo da página durante a mudança entre as páginas */
    overflow: clip;
    contain: paint;
    display: block;
}

/* Aplicação das Classes de Animação */
.flip-out {
    animation: pageOut 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10 !important; /* overflow: visible aqui é necessário para a dobra e a sombra aparecerem. */
    overflow: visible !important;
}

.flip-in {
    animation: pageIn 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.flip-back {
    animation: pageBack 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10 !important;
}
/* ======================================================================
   FINAL * PALCO 3D E CAMADAS (FLIP LAYERS)
====================================================================== */

/* ======================================================================
   PÁGINA QUE SAI (COM ESPERA PARA A DOBRA) * INÍCIO
====================================================================== */
@keyframes pageOut {

    0%,
    20% {
        transform: rotateY(0deg) skewY(0deg) scale(1) translateY(0);
    }

    45% {
        transform: rotateY(-50deg) skewY(-10deg) scale(0.95) translateY(-10px);
        box-shadow: -20px 30px 50px rgba(0, 0, 0, 0.2);
    }

    70% {
        transform: rotateY(-110deg) skewY(-5deg) scale(0.98) translateY(-5px);
        filter: brightness(1.1);
    }

    100% {
        transform: rotateY(-180deg) skewY(0deg) scale(1) translateY(0);
    }
}

/* --- DOBRA NA PONTA INFERIOR DIREITA (O Papel Virando) --- */
.flip-out::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #fff 45%, #ddd 50%, #aaa 56%, rgba(0, 0, 0, 0.1) 62%);
    box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.2);
    z-index: 20; /* Fica acima de tudo. */
    animation: foldTip 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes foldTip {
    0% {
        width: 0;
        height: 0;
    }

    15% {
        width: 130px;
        height: 130px;
    }

    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

/* --- SOMBRA PROJETADA (A sombra que aparece na folha de baixo) --- */
/* Usamos o ::before da flip-out para "sujar" o que está embaixo dela. */
.flip-out::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 250px; /* Gradiente que simula a sombra projetada na página de baixo. */
    background: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
    z-index: -1; /* Fica ATRÁS da página que está saindo, mas na frente da que entra. */
    pointer-events: none;
    opacity: 0;
    animation: shadowBelow 1.5s forwards;
}

@keyframes shadowBelow {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    /* Sombra aparece quando a ponta dobra */
    35% {
        opacity: 0;
    }

    /* Some quando a folha levanta alto */
    100% {
        opacity: 0;
    }
}
/* ======================================================================
   FINAL * PÁGINA QUE SAI (COM ESPERA PARA A DOBRA)
====================================================================== */

/* ======================================================================
   PÁGINA QUE ENTRA * INÍCIO
====================================================================== */
@keyframes pageIn {

    0%,
    20% {
        transform: translateX(10px) scale(0.98);
        filter: brightness(0.6);
    }

    100% {
        transform: translateX(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pageBack {
    0% {
        transform: rotateY(-180deg) skewY(0deg) scale(1);
    }

    40% {
        transform: rotateY(-130deg) skewY(10deg) scale(0.95) translateY(-10px);
    }

    100% {
        transform: rotateY(0deg) skewY(0deg) scale(1);
    }
}
/* ======================================================================
   FINAL * PÁGINA QUE ENTRA
====================================================================== */

/* ======================================================================
   MOBILE
====================================================================== */
@media (max-width: 768px) {
    body {
        overscroll-behavior: none;
        touch-action: pan-y;
    }

    /* Ajuste do container para telas pequenas */
    main,
    .page-wrapper {
        width: 95%;
        height: 85vh; /* Ajusta a altura para caber melhor no visor do celular. */
        margin: 5vh auto;
        padding: 25px;
    }

    /* Permite ler textos longos deslizando para cima/baixo dentro da folha */
    main {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ajuste do botão de som para não atrapalhar a leitura */
    .btn-som-de-mudanca-de-pagina {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        font-size: 18px;
    }
}