.line-animation {
  height: 2px;
  background: #000;
  transform: scale(0);
  animation: extend 1.5s ease-out 1s forwards;
  transform-origin: left;
}

@keyframes extend {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


  body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
      url('data:image/svg+xml;utf8,');
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
  }


.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('путь_к_спрайту.png') 0 0 repeat;
  opacity: 0.1; /* Регулируйте прозрачность */
  pointer-events: none; /* Чтобы клики проходили сквозь шум */
  animation: noise 1s steps(10) infinite;
}
@keyframes noise {
  100% { background-position: -1000px 0; }
}




:root{--app-height:100%}.page__noise{position:fixed;display:flex;top:0;left:0;right:0;bottom:0;width:100%;height:100%;height:var(--app-height);background-image:url(https://www.freepik.com/free-vector/abstract-background-black-white-texture-grainy_370770553.htm#fromView=keyword&page=1&position=0&uuid=41e04dc9-dbbd-428a-bc7d-799aa53dabd7&query=Seamless+Noise+Texture);background-size:1400px;opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:9999}.page__noise--visible{opacity:0.3; mix-blend-mode: normal;}class-1{position:relative;z-index:10000}document.addEventListener('DOMContentLoaded',(evt)=>{document.body.insertAdjacentHTML('beforeend','');window.setInterval(fuzz,100);function fuzz(){document.querySelector('.page__noise').style.backgroundPosition=`${Math.floor(Math.random()*100)}% ${Math.floor(Math.random()*100)}%`}});window.addEventListener('load',(e)=>{document.querySelector('.page__noise').classList.add('page__noise--visible')});function appHeight(){const dc=document.documentElement;dc.style.setProperty('--app-height',`${window.innerHeight}px`)}appHeight();window.addEventListener('resize',appHeight)