/*
 * ══════════════════════════════════════════════
 *  CURSOR.CSS — Custom Cursor Styles
 * ══════════════════════════════════════════════
 *
 *  Propósito : Estilos base para ring, dot e trail do cursor customizado.
 *              Movidos de inline style="" para este arquivo.
 *  Dependências : tokens.css (--radius-full, --duration-fast).
 *  NÃO COLOCAR AQUI : Lógica de animação (está em cursor.js).
 */

/* ── Ring (anel externo) ──────────────────────── */
#cursor-ring {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(56, 189, 248, 0.85);
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
    box-shadow:
        rgba(2, 132, 199, 0.15) 0 0 0 2px,
        rgba(14, 165, 233, 0.25) 0 0 30px;
    transition:
        width var(--duration-fast),
        height var(--duration-fast),
        border-color var(--duration-fast),
        box-shadow var(--duration-fast),
        opacity var(--duration-fast);
    backdrop-filter: blur(1px);
    opacity: 0.9;
}

/* ── Dot (ponto central) ─────────────────────── */
#cursor-dot {
    width: 6px;
    height: 6px;
    background: rgba(125, 211, 252, 0.95);
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
    transition: opacity var(--duration-fast);
    box-shadow: rgba(125, 211, 252, 0.6) 0 0 10px;
    opacity: 0.9;
}

/* ── Performance (ambos) ─────────────────────── */
#cursor-ring,
#cursor-dot {
    will-change: transform, left, top;
}