.g-motion {
    border: 2px solid #444;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle, #222 0%, #111 70%);

    &::before {
        content: '';
        position: absolute;
        background: #333;
        width: 100%;
        height: 1px;
        top: 50%;
    }

    &::after {
        content: '';
        position: absolute;
        background: #333;
        width: 1px;
        height: 100%;
        left: 50%;
    }

    .g-motion-dot {
        --x: 0;
        --y: 0;
        width: 5%;
        height: 5%;
        background: #00ff00;
        border-radius: 50%;
        position: absolute;
        left: 47.5%;
        top: 47.5%;
        transform: translateX(calc(var(--y) * 100%)) translateY(calc(var(--z) * 100%));
        transition: transform 0.1s linear;
        box-shadow: 0 0 15px #00ff00;
    }

    .g-motion-value {
        color: white;
        position: absolute;
        top: 25%;
        width: 100%;
        text-align: center;
    }
}