/* ==========================================================================
   Sombra dinâmica baseada na posição do cursor.

   A sombra de cada superfície tem duas camadas:

   1. base  - sombra leve e uniforme, sempre presente, em qualquer aparelho;
   2. glow  - reforço localizado que segue o cursor, mais forte na área por onde
              o mouse passa e invisível quando ele está longe.

   O reforço é um box-shadow com spread negativo: a silhueta encolhe para dentro
   do elemento e só reaparece do lado em que é deslocada. Deslocando-a na direção
   do cursor, a sombra escurece exatamente ali e não no resto da borda.

   Divisão de responsabilidades:
   - o sombra_dinamica.js escreve só valores normalizados (--glow-x, --glow-y e
     --glow-strength, todos entre 0 e 1);
   - este arquivo decide, por componente, o "orçamento visual" do efeito.

   Com --glow-strength em 0 (o padrão), sobra apenas a camada base. Então sem
   JS, em tela de toque ou com movimento reduzido, o resultado é uma sombra
   estática correta, nunca a ausência de sombra.
   ========================================================================== */

/* Registrar as custom properties dá dois ganhos: valores tipados (parse mais
   barato a cada quadro) e inherits: false, que impede um componente aninhado
   de herdar o orçamento do componente de fora. */
@property --glow-x {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --glow-y {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --glow-strength {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --glow-reach {
    syntax: '<length>';
    inherits: false;
    initial-value: 24px;
}

@property --glow-blur {
    syntax: '<length>';
    inherits: false;
    initial-value: 30px;
}

@property --glow-spread {
    syntax: '<length>';
    inherits: false;
    initial-value: -14px;
}

@property --glow-alpha {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.15;
}

/* A fórmula precisa ser declarada nos próprios componentes, e não em :root.
   Um var() dentro de outra custom property é substituído no elemento onde essa
   propriedade é DECLARADA, não onde ela é usada: o valor computado já sai com
   as variáveis resolvidas e é esse texto que os descendentes herdam. Declarada
   em :root, ela congelava --glow-x/--glow-y/--glow-strength em zero e o reforço
   nunca aparecia. Aqui ela é resolvida em cada elemento, com os valores dele. */
.card:not(.shadow-sm),
.card-aula,
.chart-box,
.chart-box-2,
.moldura,
.cv-card {
    --shadow-composta:
        var(--shadow-base, 0 2px 10px rgba(0, 0, 0, 0.08)),
        calc(var(--glow-reach, 24px) * var(--glow-x, 0))
        calc(var(--glow-reach, 24px) * var(--glow-y, 0))
        var(--glow-blur, 15px)
        var(--glow-spread, -14px)
        rgba(var(--glow-rgb, 0, 0, 0), calc(var(--glow-alpha, 0.28) * var(--glow-strength, 0)));

    box-shadow: var(--shadow-composta);
}


/* --------------------------------------------------------------------------
   Componentes adotados.
   -------------------------------------------------------------------------- */

/* Cards de cursos e de processos seletivos.
   Cards com a utilitária .shadow-sm do Bootstrap ficam de fora: ela é
   !important e venceria a sombra composta aqui. */
.card:not(.shadow-sm) {
    --shadow-base: 0 10px 10px rgba(0, 0, 0, 0.15);
    --glow-reach: 26px;
    --glow-blur: 30px;
    --glow-spread: -14px;
    --glow-alpha: 0.34;

    /* O card.css transiciona box-shadow em 0.3s, o que brigaria com a
       interpolação feita no JS a cada quadro. A transição do transform, que é
       o que anima o hover do card, continua igual à original. */
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* O .card:hover do card.css tem a mesma especificidade da regra acima, então
   qual vence dependeria da ordem dos arquivos. Esta regra é mais específica e
   resolve isso de forma explícita. */
.card:not(.shadow-sm):hover {
    box-shadow: var(--shadow-composta);
}

/* Painéis de aula. */
.card-aula {
    --shadow-base: 0 10px 10px rgba(0, 0, 0, 0.15);
    --glow-reach: 26px;
    --glow-blur: 30px;
    --glow-spread: -14px;
    --glow-alpha: 0.34;
}

/* Caixas de gráfico do relatório. O cinza opaco original (4px 4px 10px gray)
   era uma sombra dura; vira base clara com o mesmo tom mais o reforço. */
.chart-box,
.chart-box-2 {
    --glow-rgb: 128, 128, 128;
    --shadow-base: 0 10px 10px rgba(128, 128, 128, 0.22);
    --glow-reach: 22px;
    --glow-blur: 28px;
    --glow-spread: -14px;
    --glow-alpha: 0.48;
}

/* Bloco em destaque dos processos seletivos. Mantém o tom esverdeado da
   sombra original. */
.moldura {
    --glow-rgb: 51, 121, 50;
    --shadow-base: 0 10px 10px rgba(51, 121, 50, 0.12);
    --glow-reach: 18px;
    --glow-blur: 24px;
    --glow-spread: -12px;
    --glow-alpha: 0.36;
}

/* Card de currículo. A sombra original era quase imperceptível; a base
   continua discreta e o reforço é o mais leve de todos. */
.cv-card {
    --shadow-base: 0 1px 6px rgba(0, 0, 0, 0.06);
    --glow-reach: 18px;
    --glow-blur: 26px;
    --glow-spread: -14px;
    --glow-alpha: 0.2;
}


/* --------------------------------------------------------------------------
   Rede de segurança. O JS já não liga o efeito em tela de toque nem com
   movimento reduzido, mas o !important também vence o style inline que ele
   escreve, cobrindo o caso de a preferência mudar com a página aberta.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .dynamic-cursor-shadow {
        --glow-strength: 0 !important;
    }
}