@layer genr.component {
    @media (prefers-reduced-motion: no-preference) {
      .circle {
        --circle-size: 3rem;

        position: fixed;
        top: var(--y);
        left: var(--x);
        z-index: 1000;
        width: var(--circle-size);
        height: var(--circle-size);
        margin: calc(var(--circle-size) / -2);
        border-radius: var(--circle-size);
        opacity: 0.1;
        pointer-events: none;
        transition: opacity 0.6s, transform 0.6s;
        transform: scale(0);

        &.fade-out {
          opacity: 0;
          transform: scale(1);
        }
      }
    }}