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

/* com o html também cortando, o overflow-x do body passa a valer
   no próprio body: o halo da lua não alarga a página no celular */
html{

    overflow-x:hidden;

}

body{

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

    background:linear-gradient(
        180deg,
        #071428 0%,
        #13294b 60%,
        #091423 100%
    );

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    overflow-x:hidden;

    position:relative;

}

/* ===========================
   CAMADA ESCURA
=========================== */

.overlay{

    position:fixed;

    inset:0;

    background:#000;

    opacity:.65;

    animation:clarear 2.5s ease forwards;

    pointer-events:none;

    z-index:1;

}

@keyframes clarear{

    from{

        opacity:.65;

    }

    to{

        opacity:0;

    }

}

/* ===========================
        ESTRELAS (camada base)
=========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1px),

    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px);

    background-size:
    120px 120px,
    180px 180px;

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

    opacity:0;

    animation:estrelas 3s ease forwards;

    pointer-events:none;

}

@keyframes estrelas{

    to{

        opacity:.18;

    }

}

/* ===========================
      CÉU (camadas de brilho/profundidade)
=========================== */

.ceu{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

}

.ceu::before,
.ceu::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.9) 1.4px, transparent 2px);

    background-size:
        95px 95px,
        160px 160px,
        260px 260px;

}

.ceu::before{

    background-position:
        15px 35px,
        90px 150px,
        200px 40px;

    animation:piscar 4.5s ease-in-out infinite;

}

.ceu::after{

    background-position:
        55px 10px,
        190px 85px,
        40px 220px;

    animation:piscar 6.5s ease-in-out infinite reverse;

    animation-delay:1.2s;

}

@keyframes piscar{

    0%,100%{

        opacity:.12;

    }

    50%{

        opacity:.5;

    }

}

/* ===========================
      ESTRELAS CADENTES
=========================== */

.estrela-cadente{

    position:fixed;

    top:18%;

    left:-15%;

    width:130px;

    height:2px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.85) 75%,
        #ffffff 100%
    );

    border-radius:50%;

    opacity:0;

    z-index:2;

    pointer-events:none;

    animation:cadente1 9s ease-in infinite;

    animation-delay:3s;

}

.estrela-cadente::after{

    content:"";

    position:absolute;

    right:-2px;

    top:50%;

    width:4px;

    height:4px;

    background:#fff;

    border-radius:50%;

    transform:translateY(-50%);

    box-shadow:0 0 10px 2px rgba(255,255,255,.9);

}

.estrela-cadente.segunda{

    top:58%;

    width:95px;

    animation-name:cadente2;

    animation-duration:13s;

    animation-delay:8s;

}

@keyframes cadente1{

    0%{

        transform:translate(0,0) rotate(20deg);

        opacity:0;

    }

    2%{

        opacity:1;

    }

    16%{

        transform:translate(145vw,75vh) rotate(20deg);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

@keyframes cadente2{

    0%{

        transform:translate(0,0) rotate(25deg);

        opacity:0;

    }

    2%{

        opacity:1;

    }

    11%{

        transform:translate(150vw,95vh) rotate(25deg);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

/* ===========================
      HALO DA LUA
=========================== */

body::after{

    content:"";

    position:fixed;

    width:450px;

    height:450px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:
        radial-gradient(

            circle,

            rgba(255,255,255,.18) 0%,

            rgba(255,255,255,.08) 35%,

            rgba(255,255,255,.03) 55%,

            transparent 75%

        );

    filter:blur(80px);

    pointer-events:none;

    opacity:0;

    animation:haloLua 2.5s ease forwards;

}

@keyframes haloLua{

    to{

        opacity:1;

    }

}

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

.carta{

    position:relative;

    z-index:5;

    max-width:850px;

    width:100%;

    padding:65px;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #f2ead6 0%,
        #ece1c8 55%,
        #e4d7bc 100%
    );

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

    opacity:0;

    overflow:visible;

    animation:surgirNoite 1.7s ease .8s forwards;

}

/* ===========================
        LUA
=========================== */

.carta::before{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    border-radius:50%;

    top:-45px;

    right:-45px;

    background:radial-gradient(

        circle at 35% 35%,

        #fffef4,

        #f7f2dc 60%,

        #e6dcb7

    );

    box-shadow:

        0 0 20px rgba(255,255,255,.45),

        0 0 50px rgba(255,255,255,.20);

}

/* Halo */

.carta::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    top:-160px;

    right:-160px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,255,255,.16),

        transparent 70%

    );

    filter:blur(70px);

    z-index:-1;

}

@keyframes surgirNoite{

    from{

        opacity:0;

        transform:translateY(40px) scale(.97);

        filter:blur(6px);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

        filter:blur(0);

    }

}

/* ===========================
        TITULO
=========================== */

h1{

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

    text-align:center;

    margin:20px 0 45px;

    color:#5a3d2d;

    font-size:40px;

}

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

p{

    font-size:21px;

    line-height:2;

    color:#352d26;

    text-align:justify;

    margin-bottom:25px;

    font-style:italic;

}

/* ===========================
      FRASE FINAL
=========================== */

.frase-final{

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

    margin-top:70px;

    text-align:center;

    font-size:28px;

    line-height:1.8;

    color:#4b3325;

    font-weight:900;

    font-style:normal;

}

.destaque{

    color:#b8860b;

    font-weight:900;

}

/* ===========================
      ASSINATURA
=========================== */

.assinatura{

    text-align:right;

    margin-top:70px;

    font-size:19px;

    color:#5a3d2d;

    font-style:italic;

}

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

.voltar{

    display:inline-block;

    margin-top:60px;

    padding:12px 24px;

    border-radius:30px;

    background:#1d3356;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.voltar:hover{

    transform:translateY(-4px);

    background:#274574;

}

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

a:focus-visible{

    outline:3px solid #274574;

    outline-offset:4px;

}

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

@media(max-width:768px){

    body{

        padding:20px;

    }

    .carta{

        padding:35px;

    }

    .carta::before{

        width:65px;

        height:65px;

        top:-28px;

        right:-20px;

    }

    .carta::after{

        width:220px;

        height:220px;

        top:-110px;

        right:-110px;

    }

    h1{

        font-size:30px;

    }

    p{

        font-size:18px;

    }

    .frase-final{

        font-size:23px;

    }

}

@media(max-width:700px){

    /* justificado em tela estreita abre buracos entre as palavras */
    p{

        text-align:left;

    }

}