@keyframes backgroundChange {
    0% {
        background: var(--backgroundChangeBefore);
    }
    100% {
        background: var(--backgroundChangeAfter);
    }
}

[shimmer] {
    mask-position: right;
    mask-size: 450% 100%;
    mask-image: linear-gradient(-60deg, rgba(255, 255, 255, .85) 35%, #fff 45%, rgba(255, 255, 255, .85) 55%);
}

@keyframes shimmer {
    100% {
        mask-position: left;
    }
}

@property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.glow-icon {
    position: relative;
    display: inline-grid;
    z-index: 1;
}

.glow-icon[animate]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(255,255,150,0.3) 60%, rgba(255,200,50,0.1) 40%);
    border-radius: 50%;
    animation: glow-move 3s infinite ease-in-out;
    filter: blur(12px);
    z-index: -1;
}

@keyframes glow-move {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
  }
}