/* ==========================================================================
   ПОДВАЛ #contacts — пиксельная рябь + медленное цветное свечение
   --------------------------------------------------------------------------
   Эффект «телевизионного шума» переехал из отдельной полосы (#pixel-static)
   прямо в фон подвала. Слои снизу вверх:

     1) .footer-bg          — контейнер фона, лежит под контентом;
     2) .footer-blob (×3)   — большие размытые пятна, медленно дышат и
                              смещаются: фон плавно и еле заметно меняет цвет;
     3) .footer-noise       — тайловый шум 425px (opacity .22), дрожит кадрами
                              из js/pixel-static.js;
     4) .footer-grain       — мелкое зерно 212px (opacity .05).

   Шум инвертирован и работает в режиме screen — на тёмном фоне проступают
   светлые точки, а цветное свечение снизу просвечивает сквозь них.
   ========================================================================== */

.footer--static{
  /* подвал остаётся «шторкой»: прилипает к низу окна, контент уезжает поверх.
     Позицию не переопределяем — иначе ломается субпиксельная подгонка --fsnap. */
  position:sticky;
  bottom:0;
  isolation:isolate;
  overflow:hidden;
  background:#05080a;
  color:#fff;
  padding:clamp(32px,3.6vw,54px) 0 clamp(26px,3vw,46px);
  padding-bottom:calc(clamp(26px,3vw,46px) + var(--fsnap,0px));
  margin-top:0;
}
.footer--static > .container{position:relative;z-index:2}

/* ---------- слой фона ---------- */
.footer-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}

/* ---------- цветные пятна: медленный дрейф и «дыхание» ---------- */
.footer-blob{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.footer-blob--1{
  left:-8%;top:-60%;width:54%;height:190%;
  background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,0) 72%);
  animation:footerBlob1 34s ease-in-out infinite alternate;
}
.footer-blob--2{
  right:-12%;top:-40%;width:48%;height:170%;
  background:radial-gradient(closest-side,rgba(64,150,255,.30),rgba(64,150,255,0) 70%);
  animation:footerBlob2 46s ease-in-out infinite alternate;
}
.footer-blob--3{
  left:26%;bottom:-80%;width:50%;height:170%;
  background:radial-gradient(closest-side,rgba(255,70,150,.22),rgba(255,70,150,0) 72%);
  animation:footerBlob3 58s ease-in-out infinite alternate;
}
@keyframes footerBlob1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7%,5%,0) scale(1.16)}
  100%{transform:translate3d(-4%,7%,0) scale(1.04)}
}
@keyframes footerBlob2{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-6%,7%,0) scale(1)}
  100%{transform:translate3d(4%,-4%,0) scale(1.14)}
}
@keyframes footerBlob3{
  0%{transform:translate3d(0,0,0) scale(1.08)}
  50%{transform:translate3d(-5%,-6%,0) scale(1)}
  100%{transform:translate3d(6%,-3%,0) scale(1.12)}
}

/* ---------- пиксельная рябь ---------- */
.footer-noise,
.footer-grain{
  position:absolute;inset:0;
  background-image:url(../img/tv-noise.png);
  background-repeat:repeat;
  background-position:0 0;
  background-size:425px auto;
  filter:invert(1);
  mix-blend-mode:screen;
  pointer-events:none;
}
.footer-noise{
  opacity:.22;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 16%,#000 76%,transparent 100%);
  mask:linear-gradient(180deg,transparent 0%,#000 16%,#000 76%,transparent 100%);
}
.footer-grain{
  background-size:212px auto;
  opacity:.05;
}

@media (max-width:760px){
  .footer-blob{filter:blur(64px)}
  .footer-noise{opacity:.2}
  .footer-grain{display:none}
  /* на узком экране юр.ссылки переносятся в 3 строки и попадают под
     круглую кнопку «наверх» — добавляем запас снизу */
  .footer--static{padding-bottom:calc(clamp(26px,3vw,46px) + 58px + var(--fsnap,0px))}
}

/* без движения — статичный, но осмысленный кадр */
@media (prefers-reduced-motion:reduce){
  .footer-blob{animation:none}
  .footer-blob--1{transform:translate3d(4%,2%,0)}
  .footer-blob--2{transform:translate3d(-3%,4%,0)}
  .footer-blob--3{transform:translate3d(2%,-2%,0)}
}
