/* ==========================================================================
   1. RESET & CONFIGURAÇÕES GERAIS
   ========================================================================== */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow: hidden;
    background: #fff;
    font-family: sans-serif;
}

#cena{
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* Todas as imagens usam a regra unificada de proporção e alinhamento,
   travando o poste e as placas no local exato do design. */
#silhueta, #bicicleta, #poste-interativo {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    object-fit: contain;
    object-position: bottom center;
}

#silhueta, #bicicleta { z-index: 1; }
#poste-interativo { z-index: 5; }

/* Em telas estreitas (celular em retrato), a proporção da tela é muito
   diferente da proporção da imagem (16:9). Em vez de forçar a cena
   completa (silhueta + bicicleta + poste) a caber ou cortar de forma
   estranha, simplificamos: escondemos silhueta e bicicleta (elementos
   só decorativos) e mantemos apenas o poste com as placas, que é o
   elemento funcional. O poste sozinho, centralizado e por inteiro,
   garante que as placas fiquem em tamanho clicável. Um aviso fixo no
   rodapé (#aviso-retrato) sugere girar o aparelho para a experiência
   completa com a ilustração inteira. */
@media (max-aspect-ratio: 4/5) {
    #silhueta, #bicicleta {
        display: none;
    }

    /* O poste sozinho, em contain, ficava limitado pela largura estreita
       da tela e sobrava muito espaço vazio acima/abaixo. Com cover, ele
       cresce até preencher a altura da tela, cortando um pouco das
       laterais — o poste e as placas ficam bem maiores e mais fáceis
       de tocar. */
    #poste-interativo {
        object-fit: cover;
    }
}

/* Aviso de rotação — escondido por padrão (desktop/paisagem), só aparece
   na media query de retrato definida acima. Fica fixo no rodapé, acima
   de tudo (inclusive dos painéis), para estar sempre visível. */
#aviso-retrato {
    display: none;
}

@media (max-aspect-ratio: 4/5) {
    #aviso-retrato {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 18; /* acima dos painéis/faixas (15-16), abaixo do #escuro (20) */
        padding: 10px 16px;
        background: #2c3e50;
        color: #fff;
        font-family: sans-serif;
        font-size: 13px;
        text-align: center;
    }
}

/* ==========================================================================
   2. CONTAINER DA LOGO E POESIA
   ========================================================================== */
#container-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    animation: logo 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#container-logo #logo {
    position: absolute;
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    left: 0;
    top: 0;
}

#gatilho-logo {
    position: absolute;
    top: 10vh;
    left: 35vw;
    width: 30vw;
    height: 30vh;
    cursor: pointer;
    pointer-events: auto;
}

#texto-logo {
    position: absolute;
    top: 8vh;
    right: 8vw;
    max-width: 320px;
    white-space: pre-line;
    text-align: left;
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.8;
    color: #2c3e50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s, visibility 0.5s;
}

#texto-logo p { margin-bottom: 24px; }

/* Hover só em dispositivos com ponteiro de precisão (mouse/trackpad).
   Em touch, a abertura do texto-logo é feita por clique via JS. */
@media (hover: hover) and (pointer: fine) {
    #gatilho-logo:hover ~ #texto-logo, #texto-logo:hover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* No desktop o fechamento é por "tirar o mouse de cima" — o botão
       de fechar não é necessário e ficaria redundante na tela. */
    #fechar-texto-logo {
        display: none;
    }
}

/* Em touch, a classe .ativo (adicionada via JS) controla a visibilidade,
   no mesmo padrão usado pelos demais painéis. */
#texto-logo.ativo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   3. TRANSIÇÃO DE TELA (AMANHECER)
   ========================================================================== */
#escuro {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 20;
    animation: amanhecer 5s linear forwards;
}

@keyframes amanhecer {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

@keyframes logo {
    0% { transform: translate(-50%, 271px); }
    100% { transform: translate(-50%, 0); }
}

/* ==========================================================================
   4. HOTSPOTS (PLACAS CLICÁVEIS)
   Coordenadas convertidas a partir do artboard do Affinity (2634 x 1482 px)
   para porcentagem da tela, mantendo o alinhamento com object-fit: contain.
   ========================================================================== */
#hotspots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 6; /* acima do poste (5), abaixo da logo (10) */
    pointer-events: none; /* o container não bloqueia cliques fora das placas */
}

#hotspots a,
#hotspots button {
    position: absolute;
    display: block;
    pointer-events: auto; /* cada placa é clicável individualmente */
    cursor: pointer;
    /* Posição/tamanho são definidos via JavaScript (main.js),
       calculados a partir da área real renderizada da imagem
       #poste-interativo (compensando o letterboxing do object-fit: contain). */
    /* Descomente a linha abaixo apenas durante calibração visual:
    background: rgba(255, 0, 0, 0.25); */
}

#hotspots a:hover,
#hotspots button:hover {
    filter: brightness(1.15);
    transition: filter 0.2s ease;
}

#hotspots button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
}

/* ==========================================================================
   5. PAINÉIS DE TEXTO (MISSÃO / QUEM SOMOS)
   Mesma estética visual do #texto-logo, mas controlados por clique (classe
   .ativo via JS) em vez de hover — necessário para funcionar em touch.
   ========================================================================== */
.painel-info {
    position: absolute;
    top: 8vh;
    right: 8vw;
    max-width: 320px;
    z-index: 15; /* acima das placas e da logo, abaixo do #escuro */
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.8;
    color: #2c3e50;
    text-align: left;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.painel-info.ativo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.painel-info p {
    margin: 0;
}

.painel-info .fechar-painel {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c3e50;
    color: #fff;
    font-family: sans-serif;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.painel-info .fechar-painel:hover {
    filter: brightness(1.2);
}

/* ==========================================================================
   6. FAIXA DE PUBLICAÇÕES (CARROSSEL DE CAPAS)
   ========================================================================== */
.faixa-carrossel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 22vh;
    min-height: 160px;
    z-index: 15;
    background: rgba(44, 62, 80, 0.92);
    padding: 16px 24px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.faixa-carrossel.ativo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.trilho-carrossel {
    display: flex;
    gap: 16px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Esconde a barra de scroll visualmente, mantendo a funcionalidade */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.trilho-carrossel::-webkit-scrollbar {
    height: 6px;
}

.trilho-carrossel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

.item-carrossel {
    flex: 0 0 auto;
    scroll-snap-align: start;
    height: 100%;
    aspect-ratio: 2 / 3; /* proporção comum de capa de livro */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #ccc; /* fallback enquanto a imagem real não existe */
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.item-carrossel:hover {
    border-color: #fff;
    transform: translateY(-4px);
}

.item-carrossel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.faixa-carrossel .fechar-faixa {
    top: 12px;
    right: 12px;
}

/* ==========================================================================
   7. PAINEL DE DETALHES DO LIVRO
   ========================================================================== */
.painel-detalhe-livro {
    /* Herda posição/fonte de .painel-info, mas com largura maior por ter
       imagem + título + sinopse + link */
    max-width: 380px;
    z-index: 16; /* acima da faixa de carrossel */
}

.painel-detalhe-livro img {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin-bottom: 12px;
    background: #ccc;
}

.painel-detalhe-livro h2 {
    font-family: 'Georgia', serif;
    font-style: normal;
    font-size: 20px;
    margin: 0 0 8px;
    color: #2c3e50;
}

.painel-detalhe-livro p {
    margin: 0 0 12px;
}

.painel-detalhe-livro a {
    display: inline-block;
    font-style: normal;
    font-size: 14px;
    color: #fff;
    background: #2c3e50;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
}

.painel-detalhe-livro a:hover {
    filter: brightness(1.15);
}

/* ==========================================================================
   8. PAINEL DE CONTATO
   ========================================================================== */
.painel-contato {
    max-width: 320px;
}

.painel-contato h2 {
    font-family: 'Georgia', serif;
    font-style: normal;
    font-size: 20px;
    margin: 0 0 16px;
    color: #2c3e50;
}

.botao-whatsapp {
    display: block;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    color: #fff;
    background: #25d366; /* verde característico do WhatsApp */
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 20px;
}

.botao-whatsapp:hover {
    filter: brightness(1.1);
}

.form-contato {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-style: normal;
}

.form-contato label {
    font-size: 13px;
    color: #2c3e50;
}

.form-contato input,
.form-contato textarea {
    font-family: sans-serif;
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    margin-bottom: 10px;
}

.form-contato input:focus,
.form-contato textarea:focus {
    outline: none;
    border-color: #2c3e50;
}

.botao-enviar-email {
    font-family: sans-serif;
    font-size: 14px;
    color: #fff;
    background: #2c3e50;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.botao-enviar-email:hover {
    filter: brightness(1.15);
}

/* ==========================================================================
   9. RESPONSIVIDADE MOBILE
   ========================================================================== */

/* Telas estreitas (celular em retrato e a maioria dos celulares em
   paisagem) — os painéis laterais ocupam quase a largura toda, em vez de
   ficarem espremidos em 320px max-width, que sobra pouco espaço em telas
   pequenas e empurra o texto para várias linhas estreitas. */
@media (max-width: 600px) {
    #texto-logo,
    .painel-info {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        font-size: 15px;
        padding: 16px;
        padding-top: 36px; /* espaço para o botão de fechar não sobrepor o texto */
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        box-sizing: border-box;
        max-height: 70vh;
        overflow-y: auto;
        position: fixed; /* ancora na viewport, não no #cena, evitando cortes no scroll interno */
    }

    #texto-logo .fechar-painel,
    .painel-info .fechar-painel {
        top: 8px;
        right: 8px;
    }

    .painel-detalhe-livro img {
        max-width: 120px;
    }

    /* Faixa de carrossel mais baixa em telas pequenas — 22vh em celular
       deitado pode sobrar pouca altura útil de tela; reduzimos a faixa e
       damos mais prioridade ao carrossel em si. */
    .faixa-carrossel {
        height: 30vh;
        min-height: 140px;
        padding: 12px 16px;
    }

    .painel-contato .form-contato input,
    .painel-contato .form-contato textarea {
        font-size: 16px; /* evita zoom automático do iOS Safari em campos < 16px */
    }
}

/* Celular em modo paisagem (largura maior que altura, mas tela ainda
   pequena em altura) — a faixa de 30vh definida acima pode ficar baixa
   demais para mostrar uma capa inteira; usamos altura fixa em vez de vh
   nesse caso específico. Repetimos aqui (em vez de confiar só na media
   de max-width) porque em paisagem a largura do celular costuma passar
   de 600px e não ativar aquela outra regra, ficando com font-size e
   overflow padrão (que não cabem na altura reduzida). */
@media (max-height: 450px) and (orientation: landscape) {
    .faixa-carrossel {
        height: 180px;
        min-height: 120px;
    }

    #texto-logo,
    .painel-info {
        position: fixed;
        top: 4vh;
        bottom: auto;
        right: 12px;
        left: auto;
        max-width: 320px;
        max-height: 92vh;
        overflow-y: auto;
        font-size: 13px;
        line-height: 1.5;
        padding: 12px;
        padding-top: 32px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 8px;
        box-sizing: border-box;
    }

    .painel-info h2 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .painel-detalhe-livro img {
        max-width: 90px;
        margin-bottom: 8px;
    }

    #gatilho-logo {
        top: 5vh;
        height: 20vh;
    }
}