/* turn.css - Estilos responsivos para turn.js */
#flipbook {
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

#flipbook .page{
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

#flipbook .page img{
    width:100%;
    height:100%;
    object-fit: contain;
}

/* Efeitos de sombra durante a virada */
#flipbook .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -webkit-box-shadow 0.5s;
    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
}

#flipbook-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easing suave */
}

/* ========================================================== */
/* MEDIA QUERIES PARA TURN.JS - MOBILE */
/* ========================================================== */

/* TABLET */
@media (max-width: 1024px) {
    #flipbook {
        box-shadow: 0 0 15px rgba(0,0,0,0.15); /* Sombra mais suave */
    }
    
    #flipbook .shadow{
        -webkit-box-shadow:0 0 15px #ccc;
        -moz-box-shadow:0 0 15px #ccc;
        -o-box-shadow:0 0 15px #ccc;
        -ms-box-shadow:0 0 15px #ccc;
        box-shadow:0 0 15px #ccc;
    }
    
    #flipbook-wrapper {
        transition: transform 0.3s ease; /* Transição mais rápida */
    }
}

/* SMARTPHONE */
@media (max-width: 768px) {
    #flipbook {
        box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra mínima */
    }
    
    #flipbook .shadow{
        -webkit-box-shadow:0 0 8px #ccc;
        -moz-box-shadow:0 0 8px #ccc;
        -o-box-shadow:0 0 8px #ccc;
        -ms-box-shadow:0 0 8px #ccc;
        box-shadow:0 0 8px #ccc;
    }
    
    #flipbook-wrapper {
        transition: transform 0.2s ease; /* Muito rápido no mobile */
    }
    
    /* Melhora performance no mobile */
    #flipbook .page {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* SMARTPHONE PEQUENO */
@media (max-width: 480px) {
    #flipbook {
        box-shadow: 0 0 5px rgba(0,0,0,0.05); /* Quase sem sombra */
    }
    
    #flipbook .shadow{
        -webkit-box-shadow:0 0 5px #ccc;
        -moz-box-shadow:0 0 5px #ccc;
        -o-box-shadow:0 0 5px #ccc;
        -ms-box-shadow:0 0 5px #ccc;
        box-shadow:0 0 5px #ccc;
    }
}

/* ORIENTAÇÃO PAISAGEM NO MOBILE */
@media (max-height: 500px) and (orientation: landscape) {
    #flipbook-wrapper {
        transition: transform 0.15s ease; /* Ultra rápido em landscape */
    }
}

/* DISPOSITIVOS COM POUCA MEMÓRIA */
@media (max-width: 768px) and (max-device-width: 1024px) {
    /* Otimizações extras para performance */
    #flipbook .page img {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* DISPOSITIVOS DE ALTA DPI (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #flipbook .page img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* MODE BAIXO CONSUMO (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
    #flipbook-wrapper {
        transition: none !important;
    }
    
    #flipbook .shadow {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }
}

/* DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
    #flipbook {
        background: #1a1a1a; /* Fundo escuro para dark mode */
    }
    
    #flipbook .page{
        background-color: #1a1a1a;
    }
}