/* A box carries the mark by asking for this stylesheet and the script beside it:

   <article class="my-card" data-controller="cursor" data-cursor-label-value="Mehr">

   The mark itself is the controller's, no markup carries it. */
@media (hover: hover) and (pointer: fine) {
    /* The link too, since the user agent puts a hand on every one of them and a stretched link
       covers the whole box. */
    [data-cursor],
    [data-cursor] :any-link {
        cursor: none;
    }

    /* Fixed, since that is the frame the pointer is reported in: no box has to be measured, and
       no scrolling row cuts the mark off. */
    .cursor {
        position: fixed;
        z-index: 1;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* The 129 × 64 the design draws, and the room a longer word needs. */
        min-inline-size: 8.0625rem;
        min-block-size: 4rem;
        padding-inline: 2rem;
        border-radius: 5.625rem;
        background-color: var(--sav-color-dunkelblau);
        backdrop-filter: blur(2px);
        color: var(--sav-color-weiss);
        font-size: var(--sav-text-s-size);
        line-height: 1.5rem;
        white-space: nowrap;
        opacity: 0;
        /* It sits under the pointer, so it must never take the events the box needs. */
        pointer-events: none;

        /* `translate` comes from the controller: the pointer's place, less half the mark. */

        @media (prefers-reduced-motion: no-preference) {
            transition: opacity 0.2s;
        }
    }

    [data-cursor]:hover .cursor {
        opacity: 1;
    }
}

/* The box the playground gives the mark to ride across. */
.cursor-story {
    display: grid;
    place-items: center;
    min-block-size: 12rem;
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-hellgrau);
}