/* ==========================================================================
   Oráculo
   Cópia de `site-antigo/site-UL/src/pages/oracle/oracle.css`. Da linha do
   comentário "oracle.css original" para baixo é cópia literal.

   Uma regra da folha original não veio: `.oracle-letter--cyan`. O `oracle.tsx`
   define as constantes que a usariam (o "y" ciano de "Olyvia") mas depois
   desenha a linha inteira com `--gradient` — a classe ciano não é aplicada em
   lugar nenhum. Copiar CSS morto é copiar erro.
   ========================================================================== */

@import url("/src/pages/comum/base.css");
@import url("/src/pages/comum/nav.css");

/* ==========================================================================
   oracle.css original — daqui para baixo é cópia
   ========================================================================== */

/* ── Section wrapper ── */
.oracle-section {
    position: relative;
    min-height: 100svh;
    overflow-x: clip;
    background-color: #000;
    color: white;
}

/* ── Conteúdo principal ── */
.oracle-content {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 6rem 1.25rem 2.5rem;
    min-height: 100vh;
}

/* Em tela larga o conteúdo continua empilhado: o título em cima, o card
   embaixo. Já foi duas colunas, com o título à esquerda e o card à direita, e
   o resultado era um card estreito e altíssimo, com o mapa espremido e metade
   da tela vazia à esquerda. A divisão em duas colunas mudou de lugar: agora
   ela é *dentro* do card, onde há conteúdo para as duas. */
@media (min-width: 1024px) {
    .oracle-content {
        justify-content: center;
        gap: 2.5rem;
        padding: 6rem 2.5rem 3rem;
    }
}

/* ── Colunas ── */
.oracle-title-col {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* O título fica centrado também em tela larga: agora ele ocupa a largura
   inteira em cima do card, e alinhado à esquerda ficaria pendurado num canto
   de uma faixa muito maior que ele. */

.oracle-card-col {
    display: flex;
    width: 100%;
    flex-direction: column;
}

/* O card não passa disso, mesmo num monitor largo: com duas colunas de texto
   dentro, uma linha muito comprida cansa de ler. */
@media (min-width: 1024px) {
    .oracle-card-col {
        max-width: 68rem;
        margin: 0 auto;
    }
}

/* ── Título ── */
.oracle-title {
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-family: 'Optima', 'Zapf Humanist', 'Tenor Sans', sans-serif;
    font-size: clamp(2rem, 9vw, 4.75rem);

    /* Filtro de sombra idêntico ao da home page */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8));
}

/* ── Letras animadas — GSAP controla autoAlpha e y ── */
.oracle-letter {
    display: inline-block;
    /* Estado inicial definido pelo gsap.set() — não declarar opacity/visibility aqui */
    will-change: transform, opacity;
}

/* Espaços entre palavras — mantêm largura natural sem gradiente */
.oracle-space {
    display: inline-block;
    width: 0.28em;
    will-change: transform, opacity;
}

/* ── Variante gradiente prata metálica da logo ── */
.oracle-letter--gradient {
    /* Gradiente metálico líquido de prata e platina */
    background: linear-gradient(135deg,
        #ffffff 0%,
        #f1f5f9 20%,
        #cbd5e1 40%,
        #94a3b8 55%,
        #475569 70%,
        #94a3b8 85%,
        #ffffff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Card Informativo ── */
.oracle-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    padding: 1.25rem;
    font-family: 'Exo 2', system-ui, sans-serif;
    /* Estado inicial definido pelo gsap.set() */
    will-change: transform, opacity;
}

@media (min-width: 640px) { .oracle-card { padding: 1.5rem; } }
@media (min-width: 768px) { .oracle-card { padding: 1.75rem; } }

/* ── As duas colunas de dentro do card ──

   No celular, uma coluna na ordem do documento: o texto, depois onde acontece
   e os botões. Em tela larga, o texto à esquerda e o mapa com os botões à
   direita.

   `align-items: start` porque as duas colunas têm alturas diferentes por
   natureza — o texto é o que for, o mapa tem altura fixa — e esticar a mais
   curta só abriria vão dentro dela. E `1.05fr 1fr` em vez de `1fr 1fr`: a
   coluna do texto é linha corrida e ganha um respiro a mais que a do mapa. */
.oracle-card-grade {
    position: relative;   /* acima do brilho, que é `absolute` no card */
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .oracle-card-grade {
        grid-template-columns: 1.05fr 1fr;
        align-items: start;
        gap: 2.5rem;
    }
}

/* A coluna da direita empilha o "onde acontece" e o agendamento. */
.oracle-card-lado {
    display: flex;
    flex-direction: column;
}

/* ── Brilho interno do card ── */
.oracle-card-glow {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(to bottom, rgba(139, 92, 246, 0.08), transparent);
}

/* ── Textos do card ── */
.oracle-card-subtitle {
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.65rem, 1.5vw + 0.3rem, 0.8rem);

    /* Gradiente idêntico ao do título principal */
    background: linear-gradient(135deg,
        #ffffff 0%,
        #f1f5f9 20%,
        #cbd5e1 40%,
        #94a3b8 55%,
        #475569 70%,
        #94a3b8 85%,
        #ffffff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.oracle-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-weight: 300;
    line-height: 1.6;
    color: #e5e5e5;
    font-size: clamp(0.8rem, 1.5vw + 0.3rem, 0.95rem);
}

.oracle-card-body p { margin: 0; }

.oracle-card-note {
    font-style: italic;
    color: #a3a3a3;
    font-size: clamp(0.72rem, 1.3vw + 0.25rem, 0.85rem);
}

/* ── Botão de agendamento ── */
.oracle-btn-container {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

.oracle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.4rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.oracle-btn:hover  { transform: scale(1.05); }
.oracle-btn:active { transform: scale(0.95); }

/* O botão não tinha nenhum fundo próprio: no `oracle.tsx` ele recebia
   `style={BTN_PRIMARY}` e a classe `btn-silver-snake`. O `BTN_PRIMARY` é um
   objeto **vazio** — está marcado como `@deprecated` em
   `constants/btnPrimary.ts`, mantido só para não quebrar imports — e a classe
   `btn-silver-snake` não existe em folha nenhuma do projeto. O resultado lá
   era um botão sem contorno nem fundo, texto branco solto sobre o card.
   Aqui ele ganha a mesma pílula de vidro do menu da home, que é a linguagem
   que este projeto já tem. */
.oracle-btn {
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.oracle-btn:hover {
    background: rgb(255 255 255 / 0.14);
    border-color: rgb(255 255 255 / 0.3);
    box-shadow: 0 4px 20px -5px rgba(155, 161, 166, 0.4);
}

.oracle-btn-icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* ── Background e Overlay ── */
.oracle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

.oracle-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(5, 5, 8, 0.8) 0%, rgba(15, 5, 20, 0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

/* O canvas das partículas. No site antigo o componente trazia estes valores
   num `style` inline do JSX, não em folha. */
.oracle-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: auto;
    mix-blend-mode: screen;
}

/* ==========================================================================
   O botão secundário

   Mesma pílula de vidro do agendamento, um degrau menor. Hoje veste só o
   "Como chegar", do mapa.

   Aqui havia também o bloco do livro, com a capa e um botão de compra no fim
   do card. Ele saiu: o livro tem página própria em /book, com a sinopse
   inteira, e a entrada está no menu. Repetido aqui, ele só disputava a
   atenção com o agendamento, que é o que esta página existe para pedir.
   ========================================================================== */

.oracle-btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.4rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.oracle-btn-secundario:hover {
    transform: scale(1.05);
    background: rgb(255 255 255 / 0.14);
    border-color: rgb(255 255 255 / 0.3);
    box-shadow: 0 4px 20px -5px rgba(155, 161, 166, 0.4);
}

.oracle-btn-secundario:active { transform: scale(0.95); }

/* ==========================================================================
   Onde acontece — acréscimo, não existe no oracle.css original
   ========================================================================== */

.oracle-local {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Em duas colunas o filete some. Ele existe para separar blocos empilhados; no
   alto da coluna da direita ele não separaria nada, seria só um risco solto. */
@media (min-width: 1024px) {
    .oracle-local {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

.oracle-local-titulo {
    margin: 0 0 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.6rem, 1.4vw + 0.25rem, 0.72rem);
    color: rgba(255, 255, 255, 0.45);
}

.oracle-local-endereco {
    margin: 0 0 0.9rem;
    font-weight: 300;
    line-height: 1.55;
    color: #e5e5e5;
    font-size: clamp(0.78rem, 1.4vw + 0.3rem, 0.92rem);
}

.oracle-local-endereco strong {
    font-weight: 500;
    color: #fff;
}

/* O mapa. A altura é fixa e a proporção não: um mapa não tem conteúdo que
   precise caber, e altura fixa evita que o card salte quando o iframe carrega. */
/* O mapa nasce com o atributo `hidden`, e só o `oracle.js` o tira, depois do
   consentimento. Sem esta regra ele continuaria ocupando os 210px de altura
   mesmo escondido: `[hidden] { display: none }` vem da folha do navegador, e
   qualquer `display` declarado aqui **ganha** dela. O sintoma era um vão morto
   entre o endereço e o botão "Como chegar", sem nada visível que o explicasse.

   É a mesma armadilha do `.menu[hidden]` na home, anotada no LEIAME. */
.oracle-mapa[hidden] { display: none; }

.oracle-mapa {
    display: block;
    width: 100%;
    height: 180px;
    border: 0;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   O escurecimento do mapa, e por que ele deixou de ser um `filter`

   Havia aqui `filter: invert(0.92) hue-rotate(180deg) saturate(0.75)
   brightness(0.95)` no próprio iframe. A ideia era boa: o mapa do Google é
   claro e abriria um retângulo branco numa página de tinta, e inverter mais
   girar o matiz é o recurso que os mapas em modo escuro usam.

   O preço era o carregamento. `filter` num iframe obriga o navegador a
   rasterizar e refiltrar o conteúdo **a cada quadro**, e um mapa vivo redesenha
   o tempo todo. Medido três vezes cada, no mesmo aparelho:

     com o filtro   mediana 49,6s   amostras 114,0 · 49,6 · 35,1
     sem o filtro   mediana 21,3s   amostras  21,8 · 21,3 · 16,8

   Menos da metade do tempo. E repare na dispersão: com o filtro uma amostra
   deu quase dois minutos; sem ele os três tempos ficam juntos.

   No lugar dele, uma camada escura por cima. Ela não filtra nada: é um plano
   de cor que o compositor desenha uma vez, e custa perto de zero. Não deixa o
   mapa com aparência de tema escuro — deixa mais apagado, que é o suficiente
   para ele não furar a página. `pointer-events: none` para o mapa continuar
   podendo ser arrastado e ampliado por baixo dela.
   -------------------------------------------------------------------------- */

/* Explícito, mesmo já valendo por padrão: a regra logo abaixo declara
   `position`, não `display`, então o `[hidden]` da folha do navegador
   sobrevive. Fica escrito porque foi exatamente esse detalhe que, no iframe,
   deixou 210px de vão morto no card — e o próximo a mexer aqui merece o aviso.  */
.oracle-mapa-moldura[hidden] { display: none; }

.oracle-mapa-moldura {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;   /* mata a folga que o iframe herda de linha de texto */
}

.oracle-mapa-moldura::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgb(8 6 16 / 0.34);
}

@media (min-width: 768px) {
    .oracle-mapa { height: 210px; }
}

.oracle-local-acao {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
}