/*
 * Tarot do Dia.
 *
 * Página inteira em céu noturno, ao contrário da home (escuro só no topo): aqui
 * o escuro não é decoração, é o ambiente do ritual - e a carta, que é clara,
 * precisa de fundo escuro para saltar.
 *
 * A paleta vem de assets/marca/astrofala.css, carregado antes deste ficheiro.
 */

.af-oraculo {
    font-family: var(--af-font);
    color: rgba(255, 255, 255, .84);

    /*
     * O tom do bloco "Outros mapas" (partials/outros_mapas.php), que entra no
     * fim do resultado do Tarot dos 7 Dias.
     *
     * Esse bloco é claro por omissão, e o título dele saía com o `--af-heading`
     * da marca - #010535, que é o MESMO valor do `--af-night` em que este
     * gradiente começa e acaba. Contraste 1,00: não estava pouco legível,
     * estava invisível. O subtítulo ficava em 2,92. Apanhado por ele a
     * 2026-08-28.
     *
     * As cores são as que esta página já usa no seu próprio texto (o branco
     * dos títulos e o branco a 74% do texto secundário), para não nascer aqui
     * uma terceira paleta.
     */
    --md-outros-titulo: #fff;
    --md-outros-sub: rgba(255, 255, 255, .74);
    background:
        radial-gradient(900px 500px at 50% -5%, rgba(25, 86, 193, .45), transparent 70%),
        radial-gradient(700px 400px at 82% 40%, rgba(185, 160, 78, .10), transparent 65%),
        linear-gradient(175deg, var(--af-night) 0%, var(--af-night-2) 60%, var(--af-night) 100%);
    /* sai do container do wrapper para ocupar o ecrã todo */
    margin: -1rem 0 -3rem;
    padding: 3rem 0 4.5rem;
    min-height: 78vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* campo de estrelas, igual ao do hero da home */
.af-oraculo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 10% 18%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 26% 62%, #fff, transparent),
        radial-gradient(1.8px 1.8px at 44% 12%, var(--af-gold-pale), transparent),
        radial-gradient(1.2px 1.2px at 60% 40%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 74% 22%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 88% 58%, var(--af-gold-pale), transparent),
        radial-gradient(1.2px 1.2px at 94% 30%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 6% 74%, #fff, transparent),
        radial-gradient(1.3px 1.3px at 66% 86%, #fff, transparent),
        radial-gradient(1.7px 1.7px at 34% 92%, var(--af-gold-pale), transparent);
    opacity: .7;
    animation: af-twinkle 6s ease-in-out infinite alternate;
}

@keyframes af-twinkle { from { opacity: .3 } to { opacity: .8 } }

/*
 * 🇵🇹 A mesa com o "saber mais" por baixo (2026-09-17, só em Portugal).
 *
 * A mesa foi desenhada para ser a página toda: `min-height: 78vh` e uma
 * margem de -3rem em baixo, que come o espaço do wrapper até ao rodapé. Com o
 * texto de fundo a seguir, as duas coisas estragavam: sobrava um vazio escuro
 * grande por baixo do formulário, e a margem negativa puxava o bloco branco
 * 3rem para cima - e como a mesa é `position: relative`, desenha-se POR CIMA
 * dele e tapava o início, com o primeiro título colado ao azul. Ele apanhou os
 * dois no telemóvel.
 */
.af-oraculo.af-or-com-conteudo {
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 3.5rem;
}

.af-or-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: center;
}

.af-oraculo h1,
.af-oraculo h2,
.af-oraculo h3 {
    font-family: var(--af-font-title);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

/* `.af-oraculo p` tem mais especificidade (0,1,1) do que uma classe sozinha
   (0,1,0): todas as classes de parágrafo abaixo são prefixadas, senão esta
   margem zero come as delas e o texto cola no que vem a seguir. */
.af-oraculo p { line-height: 1.65; margin: 0; }

.af-or-titulo { font-size: clamp(1.9rem, 5vw, 2.75rem); margin-bottom: .9rem; }

/* 🇵🇹 A segunda metade do H1 (2026-09-17): "Tarot Grátis" + "a sua carta de
   hoje". O H1 inteiro é o que se pesquisa; visualmente, o nome fica grande e
   o resto numa linha mais pequena por baixo. Os dois pontos entre as duas
   metades estão no HTML, escondidos com `sr-only`. */
.af-or-titulo-resto {
    display: block;
    font-size: .5em;
    font-weight: 500;
    letter-spacing: 0;
    opacity: .85;
    margin-top: .35rem;
}

.af-oraculo .af-or-sub {
    color: rgba(255, 255, 255, .74);
    font-size: 1.0625rem;
    max-width: 620px;
    margin: 0 auto 2.25rem;
}

.af-or-passo { display: none; }
.af-or-passo.is-ativo { display: block; animation: af-entra .45s ease both; }

@keyframes af-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- onboarding --- */

.af-or-form {
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.af-or-input {
    width: 100%;
    padding: .95rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-family: var(--af-font);
    font-size: 1rem;
    text-align: center;
}

.af-or-input::placeholder { color: rgba(255, 255, 255, .45); }
.af-or-input:focus {
    outline: none;
    border-color: var(--af-gold-bright);
    background: rgba(255, 255, 255, .11);
}

/* ------------------------------------------------------------ baralho --- */

/*
 * A mesa: o baralho INTEIRO aberto, as 78 cartas.
 *
 * Eram doze numa grelha espaçada, o que se lia como uma lista de opções - a
 * pessoa escolhia entre doze coisas, não tirava uma carta de um baralho. Agora
 * as cartas encostam-se umas às outras, cada uma tapada pela seguinte, e o que
 * se vê é o que se vê numa mesa: um baralho espalhado em fileiras.
 *
 * Voltou a ser flex-wrap e não grelha, ao contrário do que aqui estava escrito:
 * com 78 cartas o número por fileira deixa de ser decisão de desenho e passa a
 * ser o que couber na largura, que é diferente no telemóvel e no computador. O
 * wrap trata disso sozinho.
 */
.af-or-baralho {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* de cima para baixo as fileiras encostam-se um pouco, como cartas
       verdadeiras pousadas por cima das outras */
    row-gap: .5rem;
    max-width: 780px;
    margin: 2rem auto 1rem;
    padding: 0 .5rem;
    perspective: 1200px;
}

/*
 * Verso: a capa da Astrofala (579x1000). O aspect-ratio segue o ficheiro, para
 * a carta nunca aparecer esticada.
 *
 * A margem negativa é o que encosta as cartas: sobra uma faixa de ~26px de cada
 * uma, e a última de cada fileira aparece inteira porque não há seguinte a
 * tapá-la. É a margem à DIREITA e não à esquerda de propósito - com margem
 * esquerda, a primeira carta de cada fileira nova saía para fora da mesa, e o
 * CSS não tem como saber onde o wrap quebra.
 */
.af-or-carta-verso {
    width: 104px;
    flex: 0 0 auto;
    margin-right: -78px;
    aspect-ratio: 579 / 1000;
    border-radius: 10px;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    background: url('../oraculo/verso.png') center/cover no-repeat, var(--af-night);
    box-shadow: -6px 8px 16px rgba(0, 0, 0, .5);
    transition: transform .22s ease, box-shadow .22s ease;
}

/* Cartas mais estreitas no telemóvel, senão 78 dariam sete fileiras */
@media (max-width: 559px) {
    .af-or-carta-verso { width: 76px; margin-right: -58px; }
}

/*
 * A flutuação perpétua saiu com as doze cartas. Com 78 encostadas, cada uma a
 * subir e descer no seu tempo, a mesa inteira fervia - e uma carta que sobe
 * descola-se das vizinhas, o que desfazia o baralho.
 */

.af-or-carta-verso:hover,
.af-or-carta-verso:focus-visible {
    /* sobe e roda ligeiramente, como uma carta puxada do meio do baralho */
    transform: translateY(-16px) rotate(-3deg) scale(1.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 0 2px var(--af-gold-bright);
    outline: none;
    /* por cima de todas as vizinhas, senão a seguinte tapa-a a meio */
    z-index: 5;
}

.af-or-carta-verso.is-escolhida { animation: af-revela .55s ease forwards; }

@keyframes af-revela {
    to { transform: translateY(-30px) rotateY(90deg); opacity: 0; }
}

/* ------------------------------------------------------- embaralhar --- */

/*
 * As cartas ENTRAM na mesa, uma a seguir à outra.
 *
 * A primeira versão fazia o contrário: juntava as cartas numa pilha ao centro,
 * cruzava-as em cortes e voltava a distribuí-las. Ficava bonito na pilha, mas
 * durante os cortes a mesa esvaziava-se - doze cartas quase sobrepostas lêem-se
 * como uma - e o que se via era o baralho a desaparecer.
 *
 * Isto vai ao contrário e não tem esse problema: parte-se do vazio e a mesa só
 * enche. Cada carta chega da esquerda, ligeiramente rodada e mais pequena, e
 * assenta no seu lugar. A cascata é o atraso entre elas, posto em JS.
 *
 * Só `transform` e `opacity`: são 78 elementos, e qualquer propriedade que
 * obrigue a refazer o layout dava um arrastar visível no telemóvel.
 */

.af-or-baralho.is-baralhando .af-or-carta-verso {
    /* ninguém escolhe uma carta que ainda está a chegar */
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform var(--af-or-t, .42s) cubic-bezier(.22, .68, .3, 1),
                opacity   var(--af-or-t, .42s) ease-out;
}

/*
 * O estado de onde cada carta parte: fora da mesa, à esquerda, deitada.
 *
 * NÃO está debaixo de `.is-baralhando` de propósito. As cartas têm de poder
 * saltar para aqui ANTES de a transição existir - se as duas classes entrarem
 * juntas, a transição já está ligada quando a carta se torna invisível, e ela
 * ANIMA para fora em vez de aparecer lá. Era o que acontecia: via-se um piscar
 * e nunca a entrada.
 */
.af-or-carta-verso.is-por-chegar {
    opacity: 0;
    transform: translate(var(--af-or-dx, -260px), var(--af-or-dy, -40px)) rotate(-24deg) scale(.82);
}

/* Enquanto entram, o hover não levanta nada: a carta está a meio caminho e o
   levantar competia com o transform da animação. */
.af-or-baralho.is-baralhando .af-or-carta-verso:hover {
    transform: none;
    box-shadow: -6px 8px 16px rgba(0, 0, 0, .5);
}

.af-or-baralhar-wrap {
    display: flex;
    justify-content: center;
    margin: .25rem 0 1.25rem;
}

.af-or-baralhar {
    background: transparent;
    border: 1px solid rgba(222, 196, 96, .45);
    color: var(--af-gold-bright, #DEC460);
    border-radius: 999px;
    padding: .45rem 1.2rem;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.af-or-baralhar:hover:not(:disabled) {
    background: rgba(222, 196, 96, .12);
    border-color: rgba(222, 196, 96, .8);
}

.af-or-baralhar:disabled { opacity: .4; cursor: default; }

/*
 * Quem pediu ao sistema para reduzir o movimento não leva com doze cartas a
 * voar. O JS já salta a animação, e isto trata do que for CSS - inclusive a
 * flutuação, que é movimento perpétuo no ecrã.
 */
@media (prefers-reduced-motion: reduce) {
    .af-or-carta-verso { animation: none; }
    .af-or-baralho.is-baralhando .af-or-carta-verso { transition: none; }
}

.af-oraculo .af-or-dica {
    color: rgba(255, 255, 255, .5);
    font-size: .875rem;
    letter-spacing: .03em;
}

/* ------------------------------------------------------ carta revelada --- */

.af-or-revelada {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    text-align: left;
    margin-top: 1rem;
}

@media (min-width: 820px) {
    .af-or-wrap { max-width: 980px; }
    .af-or-revelada { grid-template-columns: 300px 1fr; gap: 2.5rem; }
}

/* O baralho completo de Marselha (78 cartas) vem em 162x341 - proporção
   diferente da edição de 22 que estava aqui antes (270x520). O aspect-ratio
   TEM de seguir o ficheiro: sem object-fit, a imagem é esticada até caber na
   caixa e as figuras saem deformadas.
   A 260px de largura há um aumento de 1,6x, portanto alguma perda de nitidez -
   é a maior resolução que a fonte tem. */
.af-or-carta-img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 162 / 341;
    margin: 0 auto;
    border-radius: 10px;
    display: block;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(222, 196, 96, .45);
    animation: af-vira .7s ease both;
}

@keyframes af-vira {
    from { transform: rotateY(-90deg) scale(.9); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.af-or-nome {
    font-family: var(--af-font-title);
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: .3rem;
}

.af-oraculo .af-or-intro {
    color: rgba(255, 255, 255, .6);
    font-size: .9375rem;
    margin-bottom: .6rem;
}

.af-or-roman {
    display: inline-block;
    font-family: var(--af-font-title);
    font-size: .8125rem;
    letter-spacing: .18em;
    color: var(--af-gold-bright);
    margin-bottom: .5rem;
}

.af-oraculo .af-or-palavras {
    color: var(--af-gold-pale);
    font-size: .9375rem;
    margin-bottom: 1.4rem;
    letter-spacing: .02em;
}

/* A mensagem passou de uma frase a seis parágrafos - o contentor é uma div e
   quem leva o estilo são os <p> lá dentro. O último perde a margem: com ela,
   a caixa do conselho ficava com um vão maior do que o resto da coluna. */
.af-oraculo .af-or-mensagem {
    margin-bottom: 1.5rem;
}

.af-oraculo .af-or-mensagem p {
    font-size: 1.0625rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .9rem;
}

.af-oraculo .af-or-mensagem p:last-child { margin-bottom: 0; }

.af-or-pratica {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(222, 196, 96, .3);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.af-or-pratica h3 {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--af-gold-bright);
    margin-bottom: .5rem;
}

.af-oraculo .af-or-pratica p {
    font-size: .9375rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .88);
    margin-bottom: .75rem;
}

.af-oraculo .af-or-pratica p:last-child { margin-bottom: 0; }

/* ponte para os mapas pagos.
   A margem de topo substitui o espaço que a fila de botões (Compartilhar e
   WhatsApp, removidos) dava antes: sem ela, o traço encostava-se à prática. */
.af-or-ponte {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1.5rem;
    padding-top: 1.35rem;
}

.af-oraculo .af-or-ponte p { font-size: .9375rem; color: rgba(255, 255, 255, .74); margin-bottom: .9rem; }

/* ------------------------------------------------- sequência e rodapé --- */

.af-or-streak {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(222, 196, 96, .3);
    color: var(--af-gold-pale);
    font-size: .875rem;
    margin-bottom: 1.5rem;
}

.af-or-streak strong { color: #fff; font-family: var(--af-font-title); }

.af-oraculo .af-or-amanha {
    margin-top: 2rem;
    color: rgba(255, 255, 255, .55);
    font-size: .875rem;
}

/* ---------------------------------------------------------- histórico --- */

.af-or-hist { margin-top: 2.5rem; text-align: center; }
.af-or-hist h3 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1rem; }

.af-or-hist-lista {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.af-or-hist-item {
    width: 58px;
    text-align: center;
    opacity: .75;
    transition: opacity .18s ease;
}

.af-or-hist-item:hover { opacity: 1; }
.af-or-hist-item img {
    width: 100%;
    aspect-ratio: 162 / 341;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.af-or-hist-data { font-size: .6875rem; color: rgba(255, 255, 255, .5); margin-top: .3rem; display: block; }

/* --------------------------------------------------------------- misc --- */

.af-or-erro {
    background: rgba(226, 64, 59, .16);
    border: 1px solid rgba(226, 64, 59, .5);
    border-radius: 12px;
    padding: .9rem 1.15rem;
    color: #ffd9d7;
    font-size: .9375rem;
    max-width: 420px;
    margin: 1rem auto 0;
}

.af-or-oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .af-oraculo *,
    .af-oraculo *::before,
    .af-oraculo *::after { animation: none !important; transition: none !important; }
}