/* ============================================================
   ASTRON — A MOLDURA

   Quatro âncoras fixas nos cantos da tela: a marca em cima à
   esquerda, e três legendas curtas nos outros três.

   Elas são o único elemento que NÃO se move com a câmera. É isso
   que as faz ler como moldura da apresentação em vez de conteúdo
   da cena — a mesma função que o menu já cumpre embaixo.

   O tema vem do mesmo lugar que o do menu: o main.js copia o
   data-theme da seção ativa para o body, e aqui as cores reagem.
   Sem transparência em nenhum estado: numa call comprimida pelo
   Meet, texto a 70% de opacidade some.
   ============================================================ */

.moldura {
    position: fixed;
    inset: 0;
    z-index: 25;
    /* Abaixo do menu (z-index 30) e acima de tudo que é cena.
     pointer-events none no container: só o link da marca recebe
     clique, e o resto da tela continua rolando normalmente. */
    pointer-events: none;
}

.moldura__item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bone);
    transition: color 0.4s ease;
}

/* As duas barras que abrem as legendas. Verdes no escuro, pretas
   no claro — a inversão inteira acontece no bloco de tema. */
.moldura__barras {
    color: var(--lime);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.4s ease;
}

/* --- Os quatro cantos ---------------------------------------
   O afastamento LATERAL usa a mesma variável de respiro das
   seções. O vertical vem de --moldura-y, que é a linha média do
   menu contada do rodapé.

   Os de baixo ficam nessa linha, centrados no menu; os de cima, na
   mesma distância a partir do topo. É o que faz a moldura ler como
   uma faixa simétrica em vez de quatro elementos avulsos.

   O translateY de -50% existe porque top/bottom posicionam a BORDA
   do elemento, e o que precisa coincidir com o centro do menu é o
   centro do texto. */
.moldura__marca {
    top: var(--moldura-y);
    left: var(--pad);
    transform: translateY(-50%);
    pointer-events: auto;
}

.moldura__tag {
    top: var(--moldura-y);
    right: var(--pad);
    transform: translateY(-50%);
}

.moldura__secao {
    bottom: var(--moldura-y);
    left: var(--pad);
    transform: translateY(50%);
}

.moldura__copy {
    bottom: var(--moldura-y);
    right: var(--pad);
    transform: translateY(50%);
    letter-spacing: 0.16em;
}

/* --- A marca -------------------------------------------------
   SVG inline, para as cores virem do CSS sem um segundo arquivo
   e sem esperar carregamento. */
.moldura__marca {
    display: block;
    width: 132px;
}

.marca__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* cls-1 é o lettering, cls-2 é o símbolo. Os nomes vêm do SVG
   original da marca — não renomear sem trocar o arquivo. */
.marca__svg .cls-1 {
    fill: var(--bone);
    transition: fill 0.4s ease;
}

.marca__svg .cls-2 {
    fill: var(--lime);
    transition: fill 0.4s ease;
}

/* ============================================================
   SEÇÃO CLARA — tudo preto, inclusive as barras

   Resultados e Mecanismo têm fundo quase branco. O lime não lê
   sobre ele (é a mesma razão de o mundo claro ter paleta própria
   no tokens.css), então a moldura inteira vira tinta.
   ============================================================ */
body[data-nav-theme='light'] .moldura__item,
body[data-nav-theme='light'] .moldura__barras {
    color: var(--ink);
}

body[data-nav-theme='light'] .marca__svg .cls-1,
body[data-nav-theme='light'] .marca__svg .cls-2 {
    fill: var(--ink);
}

/* --- Telas menores -------------------------------------------
   A apresentação roda em call, e notebook baixo tem menos altura
   útil do que parece. A moldura encolhe antes de disputar espaço
   com o conteúdo. */
@media (max-height: 800px) {
    .moldura__marca {
        width: 112px
    }

    .moldura__item {
        font-size: 10px;
        letter-spacing: 0.18em
    }
}

@media (max-width: 900px) {
    .moldura__marca {
        width: 96px
    }

    .moldura__item {
        font-size: 9px;
        letter-spacing: 0.14em
    }
}

/* Abaixo disso as legendas de cima brigam com a marca, e as de
   baixo com o menu. Fica só a marca, que é a que importa. */
@media (max-width: 640px) {

    .moldura__tag,
    .moldura__secao,
    .moldura__copy {
        display: none
    }
}