/* едва заметная интенсивность зерна */
  :root { --grain-opacity: .06; }  /* 0.04–0.10 по вкусу */

  /* Глобальный слой зерна поверх всех фонов, но ниже текста/картинок */
  html, body { height: 100%; }
  body::after{
    content:"";
    position: fixed;
    inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
    pointer-events: none;     /* клики проходят сквозь слой */
    z-index: 10;              /* слой выше фоновых цветов блоков */

    /* сам «шум» */
    opacity: var(--grain-opacity);
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    background-size: 300% 300%;   /* крупное зерно без повторов «квадратами» */
    animation: grain-move 8s steps(10) infinite;
    mix-blend-mode: normal;       /* можно попробовать overlay/soft-light */
  }

  /* Чтобы текст/картинки точно были над зерном */
  .t-records { position: relative; z-index: 11; }

  @keyframes grain-move {
    0%,100% { transform: translate(0,0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(5%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(5%, 35%); }
    90% { transform: translate(-10%, 10%); }
  }