/* ==========================================================
   AS CRÔNICAS DE AURÍVIA
   Site Oficial
   Desenvolvido para Lucas Felipe da Silva
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#F3E8CF;

    color:#2B2B2B;

    font-family:'Cormorant Garamond', serif;

    overflow-x:hidden;

    opacity:0;

    animation:fadeIn .6s ease forwards;

}


/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

}


/* ==========================================================
   IMAGENS
========================================================== */

img{

    max-width:100%;

    display:block;

}


/* ==========================================================
   HEADER
========================================================== */

header{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

    transition:.4s;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    font-family:'Cinzel', serif;

    font-size:1.4rem;

    font-weight:700;

    color:#F3E8CF;

    letter-spacing:2px;

}


/* ==========================================================
   MENU
========================================================== */

nav{

    display:flex;

    gap:35px;

}


nav a{

    font-family:'Cinzel', serif;

    color:#F3E8CF;

    font-size:.95rem;

    transition:.3s;

}

nav a:hover{

    color:#C8A24A;

}


/* ==========================================================
   HERO
========================================================== */

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:120px 8% 80px;

    background:linear-gradient(rgba(10,20,35,.85),rgba(10,20,35,.90));

}


/* ==========================================================
   TEXTO HERO
========================================================== */

.hero-texto{

    width:50%;

}


.subtitulo{

    font-family:'Cinzel', serif;

    color:#C8A24A;

    letter-spacing:3px;

    margin-bottom:20px;

}


.hero-texto h1{

    font-family:'Cinzel', serif;

    color:white;

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:25px;

}


.descricao{

    color:#EFE7D2;

    font-size:1.5rem;

    max-width:550px;

    margin-bottom:45px;

}


/* ==========================================================
   BOTÃO
========================================================== */

.botao{

    display:inline-block;

    background:#C8A24A;

    color:#13233E;

    padding:18px 40px;

    border-radius:50px;

    font-family:'Cinzel', serif;

    font-weight:bold;

    transition:.3s;

}


.botao:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}


/* ==========================================================
   CAPA PROVISÓRIA
========================================================== */

.hero-imagem{

    width:40%;

    display:flex;

    justify-content:center;

}


.capa-livro{

    width:360px;

    border-radius:10px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.45);

    transition:.35s ease;

    animation:respirar 6s ease-in-out infinite;

}

.capa-livro:hover{

    transform:translateY(-10px) scale(1.02);

}


/* ==========================================================
   SEÇÕES
========================================================== */

section:not(#hero){

    padding-top:45px;
    padding-bottom:20px;

    padding-left:8%;
    padding-right:8%;

}



section h2{

    font-family:'Cinzel', serif;

    color:#13233E;

    font-size:2.2rem;

    margin-bottom:18px;

}


section p{

    font-size:1.35rem;

    line-height:1.8;

    max-width:900px;

}


/* ==========================================================
   RODAPÉ
========================================================== */

footer{

    background:#13233E;

    color:#EFE7D2;

    text-align:center;

    padding:50px;

}


footer p{

    margin-bottom:12px;

}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */

/* ==========================================================
   HEADER AO ROLAR A PÁGINA
========================================================== */

.header-scroll{

    background:rgba(19,35,62,.96);

    backdrop-filter:blur(8px);

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    padding:18px 8%;

}

/* ==========================================================
   INDICADOR DE ROLAGEM
========================================================== */

.scroll-indicador{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#EFE7D2;

    font-family:'Cinzel', serif;

    letter-spacing:2px;

    font-size:.8rem;

}

.seta{

    margin-top:12px;

    font-size:1.7rem;

    animation:flutuar 1.8s infinite;

}

@keyframes flutuar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   SINOPSE
========================================================== */

.sinopse{

    max-width:900px;

    margin:20px auto 0;

}

.sinopse p{

    font-size:1.45rem;

    line-height:2;

    margin-bottom:28px;

    text-align:justify;

}

.capitular{

    float:left;

    font-family:'Cinzel', serif;

    font-size:4.5rem;

    line-height:1;

    margin-right:12px;

    color:#C8A24A;

}

@media(max-width:1200px){

    #hero{

        position:relative;

        flex-direction:column;

        justify-content:center;

        text-align:center;

    }

    .hero-texto{

        width:100%;

    }

    .serie{

    color:#C8A24A;

    font-family:'Cinzel', serif;

    font-size:1.1rem;

    font-weight:400;

    margin-top:-8px;

    margin-bottom:28px;

    letter-spacing:2px;

    }

    .hero-imagem{

        width:100%;

        margin-top:60px;

    }

    .hero-texto h1{

        font-size:3rem;

    }

    nav{

        display:none;

    }

    .autor{

    flex-direction:column-reverse;

    text-align:center;

    }

    .autor-foto{

        margin-bottom:20px;

    }

    .autor-foto img{

        width:220px;

        height:220px;

    }

    .universo{

    flex-direction:column;

    }

    .universo-brasao img{

    width:300px;

    height:300px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #C8A24A;

    background:#13233E;

    padding:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.20);

    transition:.35s;

    }

    #player-musica{

        position:static;

        width:220px;

        margin:25px auto 40px;

    }


    }

        .scroll-indicador{

            display:none;

    }


@keyframes respirar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================================
   UNIVERSO E AUTOR
========================================================== */

.universo-texto,
.autor-texto{

    max-width:900px;

    margin:20px auto 0;

}

.universo-texto p,
.autor-texto p{

    font-size:1.45rem;

    line-height:2;

    text-align:justify;

    margin-bottom:24px;

}

#contato p{

    font-size:1.45rem;

    line-height:1.8;

    margin-bottom:35px;

}

.autor{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.autor-texto{

    flex:1;

}

.autor-foto{

    flex-shrink:0;

}

.autor-foto img{

    width:280px;

    height:280px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid #C8A24A;

    box-shadow:0 15px 40px rgba(0,0,0,.20);

}

.universo{

    display:flex;

    align-items:center;

    gap:60px;

}

.universo-brasao{

    flex-shrink:0;

}

.universo-brasao img{

    width:340px;

    height:auto;

    transition:.35s;

}

.universo-brasao img:hover{

    transform:scale(1.03);

}

/*======================================
COMPRA
======================================*/

.compra{

    padding:140px 8% 80px;

}

.compra-card{

    max-width:760px;

    margin:auto;

    background:#F8F2E6;

    border-radius:18px;

    padding:50px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.compra-capa{

    width:260px;

    margin:auto;

    margin-bottom:30px;

    border-radius:10px;

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.compra h1{

    text-align:center;

    font-family:'Cinzel', serif;

    color:#13233E;

    margin-bottom:10px;

}

.texto-intro{

    text-align:center;

    max-width:620px;

    margin:25px auto 45px;

}

.preco,
.subtotal{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(0,0,0,.08);

    font-size:1.2rem;

}

/*======================================
KINDLE
======================================*/

.kindle-opcao{

    text-align:center;

    margin:28px 0 35px;

}

.kindle-opcao p{

    margin-bottom:12px;

    font-size:1.15rem;

    color:#555;

}

.btn-kindle{

    display:inline-block;

    padding:12px 26px;

    border:2px solid #C8A24A;

    border-radius:30px;

    background:transparent;

    color:#13233E;

    font-family:'Cinzel', serif;

    font-size:1rem;

    transition:.3s;

}

.btn-kindle:hover{

    background:#C8A24A;

    color:#13233E;

    transform:translateY(-2px);

}

.preco strong,
.subtotal strong{

    color:#C8A24A;

    font-size:1.6rem;

}

.controle-quantidade{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin:15px 0 35px;

}

.btn-qtd{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#13233E;

    color:white;

    font-size:1.6rem;

    cursor:pointer;

    transition:.3s;

}

.btn-qtd:hover{

    background:#C8A24A;

    color:#13233E;

}

#quantidade{

    font-family:'Cinzel', serif;

    font-size:2rem;

    min-width:40px;

    text-align:center;

}

/*======================================
FORMULÁRIO
======================================*/

#pedido{

    margin-top:40px;

}

#pedido label{

    display:block;

    margin-top:28px;

    margin-bottom:10px;

    font-family:'Cinzel', serif;

    color:#13233E;

}

#pedido input,
#pedido textarea{

    width:100%;

    padding:16px;

    border:2px solid #D8C8A5;

    border-radius:10px;

    background:white;

    font-size:1.1rem;

    font-family:'Cormorant Garamond', serif;

    transition:.25s;

}

#pedido input:focus,
#pedido textarea:focus{

    outline:none;

    border-color:#C8A24A;

    box-shadow:0 0 12px rgba(200,162,74,.25);

}

.erro{

    display:block;

    color:#9E2A2A;

    font-size:.95rem;

    margin-top:6px;

    min-height:18px;

}

/*======================================
BOTÃO DE COMPRA
======================================*/

#btn-whatsapp{

    width:100%;

    margin-top:40px;

    font-size:1.15rem;

}

#btn-whatsapp:disabled{

    opacity:.8;

    cursor:wait;

    transform:none;

}

.privacidade{

    text-align:center;

    font-size:.95rem;

    color:#666;

    margin-top:18px;

    line-height:1.6;

}

body{
    transition:opacity .45s ease;
}

body.fade-out{
    opacity:0;
}

/*======================================
MENSAGEIRO
======================================*/

#mensageiro-overlay{

    position:fixed;

    inset:0;

    background:rgba(10,20,35,.82);

    backdrop-filter:blur(4px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:99999;

}

#mensageiro-overlay.ativo{

    opacity:1;

    visibility:visible;

}

.mensageiro-card{

    width:min(420px,90vw);

    background:#F8F2E6;

    border-radius:18px;

    padding:40px;

    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.mensageiro-brasao{

    width:120px;

    margin:auto;

    margin-bottom:25px;

}

#mensageiro-titulo{

    font-family:'Cinzel', serif;

    color:#13233E;

    margin-bottom:18px;

}

#mensageiro-texto{

    font-size:1.25rem;

    color:#444;

}

/*======================================
ANIMAÇÃO DO BRASÃO
======================================*/

.mensageiro-brasao{

    animation:respirarBrasao 2.5s ease-in-out infinite;

}

@keyframes respirarBrasao{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.mensageiro-card{

    animation:entradaMensageiro .7s ease;

}

@keyframes entradaMensageiro{

    from{

        opacity:0;

        transform:translateY(25px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*======================================
SONS DE AURÍVIA
======================================*/

#player-musica{

    position:absolute;

    right:8%;

    bottom:35px;

    width:240px;

    background:#13233E;

    border:2px solid #C8A24A;

    border-radius:14px;

    padding:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.30);

    z-index:20;

}

.nota-player{

    position:absolute;

    top:10px;

    right:14px;

    color:#C8A24A;

    font-size:1.3rem;

    animation:flutuarNota 2.5s ease-in-out infinite;

}

@keyframes flutuarNota{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

.player-titulo{

    font-family:'Cinzel', serif;

    color:#EFE7D2;

    text-align:center;

    margin-bottom:12px;

    letter-spacing:1px;

}

#btn-musica{

    width:100%;

    border:none;

    border-radius:8px;

    padding:12px;

    background:#C8A24A;

    color:#13233E;

    font-family:'Cinzel', serif;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;

}

#btn-musica:hover{

    transform:translateY(-2px);

}

.nota-player.tocando{

    animation:flutuarNota 2.5s ease-in-out infinite,
              brilhoNota 1.8s ease-in-out infinite;

}

@keyframes brilhoNota{

    0%{

        text-shadow:0 0 0px #C8A24A;

    }

    50%{

        text-shadow:0 0 12px #C8A24A;

    }

    100%{

        text-shadow:0 0 0px #C8A24A;

    }

}

/*======================================
TRANSIÇÕES ENTRE PÁGINAS
======================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-out{

    animation:fadeOut .45s ease forwards;

}

@keyframes fadeOut{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-12px);

    }

}

/*======================================
INSTAGRAM
======================================*/

.instagram-aurivia{

    margin-top:35px;

    text-align:center;

}

.instagram-aurivia p{

    margin-bottom:20px;

    font-size:1.3rem;

}