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

body{

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

    background:
        radial-gradient(circle at 20% 10%, rgba(216,184,93,.10), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(200,60,70,.06), transparent 40%),
        #efe2c2;

    color:#3f2e20;

    padding:40px;

    min-height:100vh;

}

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

header{

    text-align:center;

    margin-bottom:60px;

    animation:entrada .9s ease;

}

header h1{

    font-family:'Playfair Display', serif;

    font-size:3rem;

    color:#5c3d2e;

}

.subtitulo{

    margin-top:15px;

    max-width:700px;

    margin-inline:auto;

    color:#6d5a4c;

    font-size:18px;

    line-height:1.7;

}

/* ===========================
   LISTA DAS CARTAS
=========================== */

.cartas{

    display:flex;

    flex-direction:column;

    gap:35px;

    max-width:700px;

    margin:auto;

}

/* ===========================
   ENVELOPE PADRÃO
=========================== */

.carta{

    position:relative;

    display:block;

    text-decoration:none;

    color:inherit;

    padding:70px 35px 35px;

    border-radius:12px;

    background:#fffdf8;

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

    transition:transform .35s, box-shadow .35s;

    overflow:hidden;

    opacity:0;

    animation:entrada .7s ease forwards;

}

/* --ordem (0, 1, 2...) é definido para cada envelope em js/script.js */
.cartas .carta{ animation-delay:calc(.15s + var(--ordem, 0) * .2s); }

/* Aba */

.carta::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:60px;

    background:#ead8b4;

    clip-path:polygon(0 0,100% 0,50% 100%);

}

/* Selo */

.carta::after{

    content:"❤";

    position:absolute;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:36px;

    height:36px;

    border-radius:50%;

    background:#b8895d;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

/* Hover */

.carta:hover{

    transform:translateY(-8px) rotate(-.3deg);

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

}

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

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

    outline:3px solid #8b5e3c;

    outline-offset:4px;

}

.teclado button:focus-visible{

    outline-color:#d8b85d;

    outline-offset:2px;

}

/* ===========================
   CARTA #002 - MADRUGADA
=========================== */

.tema-noite{

    color:#f5f1e6;

    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.8) 1px, transparent 2px),
        radial-gradient(circle at 35% 70%, rgba(255,255,255,.6) 1px, transparent 2px),
        radial-gradient(circle at 60% 25%, rgba(255,255,255,.9) 1.5px, transparent 2px),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.7) 1px, transparent 2px),
        radial-gradient(circle at 90% 18%, rgba(255,255,255,.8) 1px, transparent 2px),
        linear-gradient(135deg,#233b67,#162949);

}

.tema-noite::before{

    background:#304f87;

}

.tema-noite::after{

    content:"🌙";

    background:#f2d58b;

    color:#1a2c4d;

}

/* ===========================
      ESTRELA CADENTE MINI (Carta II)
=========================== */

.cadente-mini{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.cadente-mini::before{

    content:"";

    position:absolute;

    top:22%;

    left:-25%;

    width:70px;

    height:2px;

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

    border-radius:50%;

    filter:drop-shadow(0 0 4px rgba(255,255,255,.8));

    opacity:0;

    animation:cadenteMini 5.5s ease-in infinite;

    animation-delay:2s;

}

@keyframes cadenteMini{

    0%{

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

        opacity:0;

    }

    5%{

        opacity:1;

    }

    38%{

        transform:translate(340px,150px) rotate(18deg);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

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

.tema-amor{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #fffdf9,
        #fff7f4
    );

    border:2px solid #d94c5c;

    color:#7b2430;

}

.tema-amor::before{

    background:linear-gradient(
        180deg,
        #d94c5c,
        #b82f43
    );

}

.tema-amor::after{

    content:"III";

    width:42px;

    height:42px;

    top:16px;

    background:#c53045;

    color:white;

    font-size:17px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* confete discreto, sugerindo comemoração sem entregar o motivo */

.confete{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.confete::before,
.confete::after{

    content:"✦";

    position:absolute;

    color:rgba(216,184,93,.55);

}

.confete::before{

    top:22%;

    left:14%;

    font-size:15px;

}

.confete::after{

    top:62%;

    left:78%;

    font-size:11px;

    color:rgba(255,255,255,.4);

}

/* ===========================
      SELO SECRETO - CARTA IV
=========================== */

.selo-secreto{

    /* é um <button>: zera os estilos padrão para manter o visual */
    border:0;

    padding:0;

    font-family:inherit;

    line-height:inherit;

    -webkit-appearance:none;

    appearance:none;

    position:fixed;

    bottom:24px;

    right:24px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:radial-gradient(circle at 35% 30%, #2a2f3d, #0d1117 70%);

    color:#e8e1d0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(0,0,0,.4);

    z-index:40;

    transition:transform .3s, box-shadow .3s;

}

.selo-secreto:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 10px 26px rgba(255,224,150,.25);

}

/* ===========================
      TECLADO NUMÉRICO - CARTA IV
=========================== */

.modal-cofre{

    position:fixed;

    inset:0;

    background:rgba(6,8,9,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    pointer-events:none;

    /* fechado também sai da ordem do Tab e dos leitores de tela */
    visibility:hidden;

    transition:opacity .3s, visibility .3s;

    z-index:60;

}

.modal-cofre.visivel{

    opacity:1;

    pointer-events:all;

    visibility:visible;

    /* ao abrir fica visível na hora, para poder receber o foco */
    transition:opacity .3s, visibility 0s;

}

.cofre-caixa{

    background:#12161f;

    border:1px solid rgba(216,184,93,.3);

    border-radius:14px;

    padding:35px 30px;

    width:290px;

    text-align:center;

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

}

/* recebe o foco ao abrir só para anunciar o diálogo; sem contorno */
.cofre-caixa:focus{

    outline:none;

}

.cofre-caixa h3{

    color:#e8e1d0;

    font-size:1.2rem;

    margin-bottom:4px;

}

.cofre-caixa p{

    color:#8a8a7c;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.pontos{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-bottom:24px;

}

.pontos span{

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(216,184,93,.5);

    transition:.2s;

}

.pontos span.preenchido{

    background:#d8b85d;

    border-color:#d8b85d;

}

.teclado{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}

.teclado button{

    padding:14px 0;

    border-radius:8px;

    border:1px solid rgba(216,184,93,.25);

    background:#1c2230;

    color:#e8e1d0;

    font-size:17px;

    cursor:pointer;

    transition:.2s;

}

.teclado button:hover{

    background:#262e40;

    border-color:rgba(216,184,93,.6);

}

.tecla-especial{

    font-size:11px !important;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.erro-cofre{

    color:#c96a6a;

    font-size:13px;

    min-height:16px;

    margin-top:14px;

}

.tremer{

    animation:tremerCofre .4s ease;

}

@keyframes tremerCofre{

    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-8px); }
    75%{ transform:translateX(8px); }

}

@media(max-width:700px){

    /* no celular sai do canto fixo e fica no fluxo, depois do último envelope */
    .selo-secreto{

        position:static;

        margin:50px auto 0;

        width:44px;

        height:44px;

        font-size:20px;

        opacity:.85;

        box-shadow:0 4px 12px rgba(0,0,0,.3);

    }

}

/* ===========================
      CORAÇÕES
=========================== */

.coracoes{

    position:absolute;
    inset:0;
    pointer-events:none;

    /* corta sozinho: o envelope deixa de cortar enquanto abre */
    overflow:hidden;
    border-radius:inherit;

}

.coracoes::before{

    content:"♡";

    position:absolute;

    top:20px;
    left:40px;

    font-size:22px;

    color:rgba(200,40,60,.20);

    text-shadow:
        120px 30px rgba(200,40,60,.18),
        260px 80px rgba(200,40,60,.18),
        420px 20px rgba(200,40,60,.16),
        80px 170px rgba(200,40,60,.16),
        320px 220px rgba(200,40,60,.18),
        510px 140px rgba(200,40,60,.14);
}

/* ===========================
      ESCRITA
=========================== */

.escrita{

    position:absolute;

    inset:0;

    pointer-events:none;

    /* corta sozinho: o envelope deixa de cortar enquanto abre */
    overflow:hidden;

    border-radius:inherit;

}

.escrita::before{

    content:
    "love love love love love love love";

    position:absolute;

    top:52%;

    left:-40px;

    width:150%;

    transform:rotate(-8deg);

    font-family:cursive;

    font-size:38px;

    letter-spacing:10px;

    color:rgba(170,60,60,.08);

}

/* ===========================
      SELO POSTAL
=========================== */

.selo-postal{

    position:absolute;

    top:18px;

    right:20px;

    width:55px;

    height:55px;

    border:2px dashed rgba(200,60,70,.45);

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    font-size:10px;

    color:#b53042;

    font-weight:bold;

    transform:rotate(8deg);

    line-height:1.1;

}

/* ===========================
      PÉTALAS CAINDO (Carta III)
=========================== */

.petala{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.petala::before,
.petala::after{

    content:"❀";

    position:absolute;

    top:-20px;

    font-size:14px;

    color:rgba(217,76,92,.35);

    animation:cair 6s linear infinite;

}

.petala::before{

    left:20%;

    animation-delay:0s;

}

.petala::after{

    left:70%;

    font-size:11px;

    animation-delay:2.5s;

    color:rgba(217,76,92,.25);

}

@keyframes cair{

    0%{

        transform:translateY(-20px) rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:translateY(220px) rotate(200deg);

        opacity:0;

    }

}

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

.carta h2{

    font-family:'Playfair Display', serif;

    margin-bottom:15px;

    color:inherit;

}

.carta p{

    margin-bottom:20px;

    color:inherit;

    opacity:.88;

}

/* "Clique para abrir →": cor com contraste ≥4.5:1 no fundo de cada envelope */
.carta span{

    color:#8b5e3c;

    font-weight:bold;

}

.tema-noite span{

    color:#d8b85d;

}

.tema-amor span{

    color:#b53042;

}

/* ===========================
   SELO "NOVA"
   (js/script.js cria a .selo-nova nos envelopes com data-nova ainda não abertos)
=========================== */

/* carimbo postal de moldura dupla, no canto de baixo: longe do título e do selo do topo */
.selo-nova{

    position:absolute;

    right:22px;

    bottom:22px;

    padding:3px 9px 2px;

    border:2px solid currentColor;

    border-radius:4px;

    outline:1px solid currentColor;

    outline-offset:2px;

    color:#a13a3a;

    font-family:'Playfair Display', serif;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transform:rotate(-8deg);

    pointer-events:none;

    /* carimba logo depois do envelope entrar; depois balança de leve a cada 5s */
    --entrada-selo:calc(.75s + var(--ordem, 0) * .2s);

    animation:
        carimbarNova .5s cubic-bezier(.36,1.6,.6,1) var(--entrada-selo) both,
        chamarNova 5s ease-in-out calc(var(--entrada-selo) + 2s) infinite;

}

.tema-noite .selo-nova{

    color:#f2d58b;

}

.tema-amor .selo-nova{

    color:#b53042;

}

@keyframes carimbarNova{

    0%{

        opacity:0;

        transform:rotate(-8deg) scale(1.8);

    }

    60%{

        opacity:1;

        transform:rotate(-8deg) scale(.94);

    }

    100%{

        opacity:1;

        transform:rotate(-8deg) scale(1);

    }

}

/* parado em -8deg quase o tempo todo; só uma balançadinha no começo do ciclo */
@keyframes chamarNova{

    0%, 16%, 100%{ transform:rotate(-8deg); }
    4%{ transform:rotate(-13deg); }
    8%{ transform:rotate(-4deg); }
    12%{ transform:rotate(-10deg); }

}

@media (prefers-reduced-motion: reduce){

    /* parado e visível desde o início */
    .selo-nova{

        animation:none;

    }

}

/* ===========================
   ABRIR O ENVELOPE
   (js/script.js adiciona .abrindo e a .folha-janela ao clicar)
=========================== */

/* a aba e a folha passam da borda de cima, então o envelope para de cortar;
   z-index para ficar por cima do envelope anterior */
.carta.abrindo{

    overflow:visible;

    z-index:1;

    perspective:700px;

    perspective-origin:50% 0;

}

/* aba gira pela borda de cima, na cor de cada tema */
.carta.abrindo::before{

    transform-origin:50% 0;

    animation:abrirAba .4s ease-in-out forwards;

}

/* o selo vai junto com a aba e some quando ela fica de costas */
.carta.abrindo::after{

    transform-origin:50% -18px;

    backface-visibility:hidden;

    animation:abrirSelo .4s ease-in-out forwards;

}

@keyframes abrirAba{

    to{

        transform:rotateX(180deg);

        filter:brightness(.92);

    }

}

@keyframes abrirSelo{

    from{ transform:translateX(-50%) rotateX(0deg); }
    to{ transform:translateX(-50%) rotateX(180deg); }

}

/* janela acima da borda: a folha aparece só ao sair de dentro do envelope */
.folha-janela{

    position:absolute;

    left:0;

    right:0;

    bottom:100%;

    height:64px;

    overflow:hidden;

    pointer-events:none;

}

.folha{

    position:absolute;

    left:9%;

    right:9%;

    top:6px;

    bottom:0;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0 13px,
            rgba(139,94,60,.14) 13px 14px
        ),
        #fffdf8;

    border-radius:3px 3px 0 0;

    box-shadow:0 -2px 8px rgba(0,0,0,.12);

    transform:translateY(100%);

    animation:subirFolha .4s cubic-bezier(.2,.7,.3,1) .25s forwards;

}

@keyframes subirFolha{

    to{

        transform:translateY(0);

    }

}

/* ===========================
   FOOTER
=========================== */

footer{

    text-align:center;

    margin-top:60px;

    color:#777;

    font-style:italic;

}

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

@keyframes entrada{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:700px){

    body{

        padding:20px;

    }

    header h1{

        font-size:2.3rem;

    }

}