.preview-note-anchor {
    position: relative;
}

.preview-note {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    will-change: transform, opacity;
    animation: preview-note-rise 1800ms ease-out forwards;
}

.preview-note--b {
    width: 11px;
    height: 11px;
    margin: -5px 0 0 -5px;
    animation-duration: 2100ms;
}

.preview-note--c {
    width: 17px;
    height: 17px;
    margin: -8px 0 0 -8px;
    animation-duration: 1600ms;
}

@keyframes preview-note-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
    }

    18% {
        opacity: 0.85;
    }

    70% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--drift, 0px), -52px, 0) rotate(var(--spin, 12deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .preview-note {
        display: none;
    }
}