/* ============================================================ CHÊDA — Cursor customizado (3 camadas concêntricas) Estrutura (do exterior para o interior): · .cursor-ring — anel externo cream translúcido, segue com lerp ~12% · .cursor-disc — disco médio blood, segue 1:1 · .cursor-dot — dot central cream, segue 1:1 Estados: · [data-hover="true"] no — quando o mouse está sobre um alvo interativo, o ring cresce e a opacidade sobe · [data-hidden="true"] — quando o mouse está sobre um iframe (SoundCloud) ou sai da janela; o cursor customizado some para não bloquear o nativo Só ativa em ponteiros finos com hover verdadeiro (desktop com mouse). Mobile e touch usam cursor do sistema (nenhum, nesse caso). ============================================================ */ @media (hover: hover) and (pointer: fine) { html, body { cursor: none; } a, button, .route, .mix, .set-card, .brand-logo, iframe, input, textarea { cursor: none; } /* Iframe é uma exceção — dentro do iframe o browser força o cursor nativo (não temos como injetar CSS nele). Mas por fora do iframe, nosso cursor custom continua ativo até o mouse cruzar a borda. */ .cursor-layer { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; /* translate3d ativa GPU compositing */ transform: translate3d(-50%, -50%, 0); /* Sem transição no movimento (JS controla), transição só em size/opacity */ will-change: transform, width, height, opacity; } .cursor-ring { width: 52px; height: 52px; border-radius: 50%; background: rgba(23, 18, 16, .6); border: 1px solid rgba(233, 224, 206, .3); backdrop-filter: blur(2px); transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, border-color .2s ease, background .2s ease; } .cursor-disc { width: 20px; height: 20px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 8px rgba(181, 34, 26, .4); transition: opacity .2s ease, transform .2s ease; } .cursor-dot { width: 4.8px; height: 4.8px; border-radius: 50%; background: var(--cream); } /* Hover state — anel externo cresce e clareia */ body[data-cursor-hover="true"] .cursor-ring { width: 88px; height: 88px; border-color: rgba(233, 224, 206, .6); background: rgba(181, 34, 26, .08); } body[data-cursor-hover="true"] .cursor-disc { transform: translate3d(-50%, -50%, 0) scale(1.15); } /* Hidden state — some totalmente (sobre iframe, ou fora da janela) */ body[data-cursor-hidden="true"] .cursor-layer { opacity: 0; transition-duration: .15s; } /* Reduce motion — cursor ainda existe mas sem lag no ring nem crescimento */ @media (prefers-reduced-motion: reduce) { .cursor-ring { transition: opacity .2s ease; } body[data-cursor-hover="true"] .cursor-ring { width: 52px; height: 52px; } body[data-cursor-hover="true"] .cursor-disc { transform: translate3d(-50%, -50%, 0); } } } /* Fallback: touch / mobile — não renderiza nada */ @media (hover: none), (pointer: coarse) { .cursor-layer { display: none; } }