@keyframes grain-animation {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-15%, -10%); }
    20% { transform: translate(-2%, 15%); }
    30% { transform: translate(15%, -5%); }
    40% { transform: translate(-10%, 15%); }
    50% { transform: translate(7%, -15%); }
    60% { transform: translate(-15%, 5%); }
    70% { transform: translate(12%, 12%); }
    80% { transform: translate(-5%, -15%); }
    90% { transform: translate(15%, 2%); }
    100% { transform: translate(0, 0); }
}

.grain-overlay {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    background-image: url('../img/image-noise.png');
    background-size: 256px 256px;
    background-repeat: repeat;
    opacity: 0.1;

    pointer-events: none;
    z-index: 1;

    animation: grain-animation 1.2s steps(1) infinite;
    will-change: transform;
}