/* Estilos comuns às páginas (home e cases). Usa os tokens --tinta, --fonte e --ease de cada página. */

/* ---------- CURSOR próprio + rastro (cursor.js). Mesma lógica do site do Guedes: ponto exato,
   anel com atraso; disco que inverte sobre o que é clicável; pílula com rótulo sobre o case.
   A inversão é mix-blend-mode difference com branco (preto no branco, avesso nas cores). */
.cursor-ativo,.cursor-ativo *{cursor:none!important}
.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;mix-blend-mode:difference}
.cursor[data-estado="midia"]{mix-blend-mode:normal}
.cursor__ponto,.cursor__anel{position:fixed;top:0;left:0;pointer-events:none;will-change:transform;opacity:0;transition:opacity .2s}
.cursor.visivel .cursor__ponto,.cursor.visivel .cursor__anel{opacity:1}
.cursor__ponto{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.cursor__anel{display:grid;place-items:center;width:34px;height:34px;border:1px solid #fff;border-radius:999px;overflow:hidden;transition:opacity .2s,width .25s var(--ease),height .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),scale .15s}
.cursor__rotulo{font:500 13px/1 var(--fonte);white-space:nowrap;color:#fff;opacity:0;transition:opacity .2s}
.cursor[data-estado="link"] .cursor__anel{width:58px;height:58px;background:#fff}
.cursor[data-estado="link"] .cursor__ponto{opacity:0}
.cursor[data-estado="midia"] .cursor__anel{width:var(--rotulo-w,104px);height:40px;border-color:var(--tinta);background:var(--tinta)}
.cursor[data-estado="midia"] .cursor__rotulo{opacity:1}
.cursor[data-estado="midia"] .cursor__ponto,
.cursor[data-estado="oculto"] .cursor__ponto,.cursor[data-estado="oculto"] .cursor__anel{opacity:0}
.cursor.pressionado .cursor__anel{scale:.86}
/* o rastro fica atrás de tudo (z-index -1 sobre o fundo branco do body): só aparece no branco */
.rastro{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media (hover:none),(pointer:coarse){.cursor,.rastro{display:none}}