/*
 * Curseur maison. Il n'existe que si le contrôleur a pu se connecter (classe
 * `.a-curseur` posée sur <body>) et que le pointeur est fin : sur tablette,
 * ces deux éléments n'existent tout simplement pas à l'écran.
 */

.curseur {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-curseur);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-sortie);
}

body:not(.a-curseur) .curseur {
    display: none;
}

.curseur--visible {
    opacity: 1;
}

.curseur__point,
.curseur__anneau {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    border-radius: 50%;
    /* Le décalage de moitié est fait ici, une fois : le JS n'a plus qu'à
       pousser des coordonnées brutes. */
    margin-block-start: -3px;
    margin-inline-start: -3px;
}

.curseur__point {
    inline-size: 6px;
    block-size: 6px;
    /* Blanc en différence : sombre sur fond clair, clair sur le pied de page. */
    background: var(--craie);
    mix-blend-mode: difference;
}

.curseur__anneau {
    inline-size: 38px;
    block-size: 38px;
    margin-block-start: -19px;
    margin-inline-start: -19px;
    border: 1px solid var(--trait-fort);
    display: grid;
    place-items: center;
    transition:
        inline-size 0.4s var(--ease-sortie),
        block-size 0.4s var(--ease-sortie),
        margin 0.4s var(--ease-sortie),
        background-color 0.4s var(--ease-sortie),
        border-color 0.4s var(--ease-sortie);
}

.curseur--presse .curseur__anneau {
    inline-size: 26px;
    block-size: 26px;
    margin-block-start: -13px;
    margin-inline-start: -13px;
}

/* Sur un lien : l'anneau se resserre et s'éclaire. */
.curseur[data-mode="lien"] .curseur__anneau {
    inline-size: 52px;
    block-size: 52px;
    margin-block-start: -26px;
    margin-inline-start: -26px;
    border-color: var(--cyan);
    background-color: rgb(46 163 242 / 0.12);
}

/* Sur un bouton plein : le curseur natif suffit, on efface l'anneau. */
.curseur[data-mode="masque"] .curseur__anneau {
    opacity: 0;
}

/* Sur un média : l'anneau devient une pastille avec un mot. */
.curseur[data-mode="voir"] .curseur__anneau,
.curseur[data-mode="glisser"] .curseur__anneau {
    inline-size: 84px;
    block-size: 84px;
    margin-block-start: -42px;
    margin-inline-start: -42px;
    background: var(--flux);
    border-color: transparent;
}

.curseur[data-mode="voir"] .curseur__point,
.curseur[data-mode="glisser"] .curseur__point {
    opacity: 0;
}

.curseur__libelle {
    font-family: var(--police-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .curseur {
        display: none;
    }
}