/* ===========================
        BODY
=========================== */

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    font-family:'Lora', Georgia, serif;

    background:linear-gradient(
        160deg,
        #2b0f14,
        #4a1c22,
        #6e2f2a,
        #3a1218
    );

    background-size:300% 300%;
    animation:respirar 18s ease infinite;

    overflow-x:hidden;

    overflow-y:auto;

}

@keyframes respirar{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* ===========================
      LUZES / PARTÍCULAS
=========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:
        radial-gradient(circle,#ffd9a8 1.5px,transparent 1.5px),
        radial-gradient(circle,#ffe9c7 1px,transparent 1px);

    background-size:
        150px 150px,
        240px 240px;

    background-position:
        0 0,
        90px 110px;

    opacity:.10;

    pointer-events:none;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:radial-gradient(
        circle at 50% 40%,
        rgba(255,180,120,.14),
        transparent 60%
    );

    pointer-events:none;

}

/* ===========================
      CARTA
=========================== */

.carta{

    position:relative;

    width:100%;
    max-width:850px;

    background:#fbf3e7;

    border-radius:14px;

    padding:70px;

    text-align:center;

    box-shadow:
        0 25px 80px rgba(0,0,0,.5),
        0 0 0 1px rgba(196,142,90,.15);

    animation:entrada 1.2s ease;

}

/* moldura sutil dourada */
.carta::before{

    content:"";

    position:absolute;

    inset:14px;

    border:1px solid rgba(196,142,90,.35);

    border-radius:6px;

    pointer-events:none;

}

/* ===========================
      CONTEÚDO
=========================== */

#conteudo{

    min-height:280px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:opacity .35s ease;

}

h1{

    font-family:'Playfair Display', 'Lora', serif;

    font-size:2.7rem;

    font-weight:600;

    color:#5c2a1e;

    margin-bottom:25px;

    line-height:1.35;

}

h2{

    font-family:'Playfair Display', 'Lora', serif;

    font-style:italic;

    font-weight:500;

    font-size:2.2rem;

    color:#8a4a2e;

    margin-top:20px;

}

.subtitulo{

    font-size:1.25rem;

    color:#8a7360;

    line-height:1.8;

}

p{

    font-size:1.2rem;

    color:#6b5646;

    line-height:1.8;

}

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

#botao{

    margin-top:45px;

    padding:18px 42px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#8a4a2e,#5c2a1e);

    color:#fbf3e7;

    font-family:'Lora', serif;

    font-size:18px;

    letter-spacing:.3px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 8px 20px rgba(92,42,30,.35);

}

#botao:hover{

    transform:translateY(-4px);

    background:linear-gradient(135deg,#a35a37,#6e3524);

    box-shadow:0 12px 28px rgba(92,42,30,.45);

}

#botao:active{

    transform:translateY(-1px);

}

/* foco pelo teclado (não aparece no clique do mouse) */

a:focus-visible,
button:focus-visible{

    outline:3px solid #8a4a2e;

    outline-offset:4px;

}

/* ===========================
      LINK DE VOLTAR
=========================== */

/* escondido até o carta3.js adicionar .visivel no fim da revelação */
.voltar{

    display:block;

    width:fit-content;

    margin:40px auto 0;

    font-family:'Lora', serif;

    font-style:italic;

    font-size:.95rem;

    color:#8a7360;

    text-decoration:none;

    border-bottom:1px solid transparent;

    opacity:0;

    visibility:hidden;

    transition:opacity 1.2s ease, visibility 1.2s, color .3s, border-color .3s;

}

.voltar.visivel{

    opacity:1;

    visibility:visible;

}

.voltar:hover{

    color:#5c2a1e;

    border-bottom-color:rgba(140,74,46,.4);

}

/* "voltar" e "ler de novo" lado a lado; empilham se não couberem */
.links-finais{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px 32px;

    margin-top:40px;

}

.links-finais .voltar{

    margin:0;

}

/* ===========================
      ANIMAÇÕES
=========================== */

.fade{

    animation:fade .5s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes entrada{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
      LISTA DE MOTIVOS
=========================== */

#lista{

    margin-top:40px;

    text-align:left;

    max-height:50vh;

    overflow-y:auto;

    padding-right:10px;

}

#lista::-webkit-scrollbar{
    width:6px;
}

#lista::-webkit-scrollbar-thumb{
    background:rgba(140,74,46,.35);
    border-radius:10px;
}

#lista p{

    margin-bottom:18px;

    padding-bottom:14px;

    border-bottom:1px dashed rgba(140,74,46,.2);

    animation:aparecer .5s ease;

}

#lista p:last-child{
    border-bottom:none;
}

#lista strong{

    font-family:'Playfair Display', serif;

    color:#5c2a1e;

    font-weight:600;

}

.motivo-texto{

    display:block;

    margin-top:4px;

    font-size:.95rem;

    font-style:italic;

    color:#8a7360;

}

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
      RESPONSIVO
=========================== */

@media(max-width:768px){

    .carta{

        padding:45px 28px;

    }

    .carta::before{
        inset:10px;
    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    p,
    .subtitulo{

        font-size:1.05rem;

    }

    #conteudo{

        min-height:240px;

    }

    #lista{
        max-height:45vh;
    }

}