/* ==========================================================================
   INCLINAÇÃO 3D — prefixo tilt-
   Efeito, não seção: um par estilo.css + script.js que se liga em qualquer
   elemento marcado com [data-tilt]. A dobra que acompanha este arquivo
   (.tilt-grid, .tilt-card...) é só o palco de demonstração — ver o
   comentário de cabeçalho do markup.html. O que se cataloga, o que cola
   sem adaptação em outra grade da biblioteca, é só o atributo.

   Tokens usados:
     --ease                   curva única do projeto — volta ao plano e glare
     --light                  cor do brilho (glare), sempre claro sobre o vidro
     --radius-media           raio do card de demonstração; o glare herda dele
     --display --sans         tipografia dos cards do palco
     --fg --fg-2 --fg-muted   texto do palco, herdado do escopo .sec-dark

   POR QUE SELETOR DE ATRIBUTO, E NÃO CLASSE, NA RAIZ. [data-tilt] precisa
   colar em qualquer card já pronto — de solução, de equipe, de plano — sem
   entrar em guerra de especificidade com o prefixo de outro componente e
   sem herdar um nome que não é dele. Tudo que É classe aqui embaixo carrega
   tilt-, como o §6.1 do contrato pede; o atributo é a única exceção
   declarada na ficha, e é também a raiz do efeito.
   ========================================================================== */

/* ==========================================================================
   O EFEITO
   Só existe em ponteiro fino com hover de verdade. Fora disso — toque,
   trackpad em modo touch, tablet — nem esta regra nem o script.js pagam
   custo algum: sem a media query batendo, [data-tilt] não ganha nenhum
   transform (getComputedStyle devolve "none", medido), e o script (que
   confere a MESMA expressão) nem chega a varrer o document. As duas fontes
   usam a expressão idêntica de propósito, para nunca divergir uma da outra.
   ========================================================================== */
@media(hover:hover) and (pointer:fine){

  [data-tilt]{
    --tilt-max:7;      /* graus no pico do gesto. Lido por card via getComputedStyle */
    --tilt-lift:1.02;  /* escala no pico, só enquanto .is-tilting. 1 desliga o "levantar" */

    /* Ancora o glare (::after), que é absolute. SEM overflow:hidden aqui:
       cortaria o anel de :focus-visible de um card que também seja link ou
       botão em algum uso futuro (o core desenha o anel 3px para fora da
       caixa). border-radius:inherit no glare, logo abaixo, resolve o canto
       arredondado sem precisar cortar nada. */
    position:relative;

    /* scale mora numa variável à parte (--tilt-scale) e não faz parte fixa
       desta lista por escrito — é o que permite a .is-tilting, abaixo, MUDAR
       só um número em vez de reescrever perspective/rotateX/rotateY de novo.
       As duas regras compartilham a mesma lista de funções sempre na mesma
       ordem, e isso importa: transform com a MESMA lista de funções nos dois
       lados interpola função a função; listas diferentes forçam o navegador
       a cair para interpolação de matriz, que também funciona mas é menos
       previsível num ganho pequeno (2%) como este. */
    transform:perspective(var(--tilt-persp,900px))
              rotateX(var(--tilt-x,0deg))
              rotateY(var(--tilt-y,0deg))
              scale(var(--tilt-scale,1));
    transform-style:preserve-3d;
    transition:transform .55s var(--ease);
    will-change:transform;
  }

  /* Presente do pointerenter em diante — mas só a partir da SEGUNDA escrita
     do script. Ver script.js e o gotcha do "pulo" na ficha: a primeira
     escrita entra ainda com a transition acima ligada, para o card não
     saltar seco de 0° direto ao ângulo do canto onde o ponteiro entrou. */
  [data-tilt].is-tilting{
    transition:none;
    --tilt-scale:var(--tilt-lift);
  }

  /* O brilho. ::after do próprio [data-tilt] — nenhum elemento a mais no
     markup. border-radius:inherit e NÃO overflow:hidden no elemento: um
     background (mesmo em gradiente) já respeita o raio da própria caixa
     sozinho, sem precisar cortar nada por cima. */
  [data-tilt]::after{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(circle at var(--tilt-gx,50%) var(--tilt-gy,50%),
                color-mix(in srgb,var(--light) 18%,transparent),transparent 60%);
    opacity:0;
    transition:opacity .4s var(--ease);
  }
  [data-tilt].is-tilting::after{opacity:1}

  /* Reduzir movimento desliga por CSS, sem depender de o script.js ter
     rodado (uso colado num Elementor sem o script, por exemplo). Como o
     resto da casa (pfl-strip-rail, depo-track, cur-note), esta regra NÃO
     reage a ?motion=on: nenhuma outra transição pura-CSS da biblioteca
     reage a esse parâmetro, e aqui o efeito também depende de um ponteiro
     de verdade se movendo — forçar por URL não teria o que mostrar sem
     alguém de fato mexendo o mouse do outro lado. */
  @media(prefers-reduced-motion:reduce){
    [data-tilt]{transition:none;transform:none}
    [data-tilt]::after{transition:none;opacity:0}
  }
}

/* ==========================================================================
   O PALCO — grade de demonstração
   Existe só para os três cards terem onde morar. Troque como quiser: nada
   daqui para baixo é parte do que se cataloga (ver markup.html).
   ========================================================================== */

.tilt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(40px,6vh,64px);
}

/* O item de grade de verdade é o slot, não o card — ver o gotcha de
   especificidade no cabeçalho do markup.html. [data-rv] mora aqui; sem
   regra própria além de repassar a altura esticada pelo grid (align-items
   é stretch por padrão) para o card, via height:100%, porque um <div> não
   herda altura do pai sozinho. */
.tilt-card-slot{height:100%}

.tilt-card{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,32px);
  border-radius:var(--radius-media);
}

.tilt-card-num{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--fg-muted);
}

.tilt-card-title{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(19px,1.8vw,22px);
  line-height:1.3;
  color:var(--fg);
}

.tilt-card-text{
  flex:1 0 auto;
  font-size:15px;
  line-height:1.55;
  color:var(--fg-2);
}

.tilt-card .pill{align-self:flex-start;margin-top:4px}

/* ---------------------------------------------------------------- mobile */
@media(max-width:860px){
  .tilt-grid{grid-template-columns:1fr}
}