/* ARCHIVE0 — фон и световой курсор */

.bg-anim{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--par:0px}

/* мягкие световые пятна */
.bg-anim>span{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.bg-anim .b1{
  width:52vw;height:52vw;left:-14vw;top:-12vw;opacity:.5;
  background:radial-gradient(circle,oklch(0.6 0.1 78 / .34),transparent 68%);
  animation:drift1 46s ease-in-out infinite;
}
.bg-anim .b2{
  width:44vw;height:44vw;right:-12vw;top:26vh;opacity:.45;
  background:radial-gradient(circle,oklch(0.55 0.09 238 / .32),transparent 68%);
  animation:drift2 58s ease-in-out infinite;
}
.bg-anim .b3{
  width:48vw;height:48vw;left:24vw;bottom:-20vw;opacity:.38;
  background:radial-gradient(circle,oklch(0.55 0.08 318 / .28),transparent 68%);
  animation:drift3 68s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate3d(0,var(--par),0) scale(1)}50%{transform:translate3d(4vw,calc(var(--par) - 3vh),0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,var(--par),0) scale(1.08)}50%{transform:translate3d(-5vw,calc(var(--par) + 4vh),0) scale(1)}}
@keyframes drift3{0%,100%{transform:translate3d(0,var(--par),0) scale(1)}50%{transform:translate3d(3vw,calc(var(--par) - 5vh),0) scale(1.16)}}

/* сетка, растворяющаяся к низу экрана */
.bg-anim::after{
  content:"";position:absolute;inset:-10% -10% auto -10%;height:120%;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%);
  opacity:.45;
  transform:translate3d(0,calc(var(--par) * .5),0);
  animation:gridBreath 24s ease-in-out infinite;
}
@keyframes gridBreath{0%,100%{opacity:.32}50%{opacity:.5}}

/* мягкая виньетка — держит внимание в центре */
.bg-anim::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 40%,transparent 42%,oklch(0.05 0.005 80 / .72) 100%);
}

/* тонкое зерно поверх фона */
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 9s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-1.5%,1%,0)}
  40%{transform:translate3d(1%,-1.5%,0)}
  60%{transform:translate3d(-1%,-1%,0)}
  80%{transform:translate3d(1.5%,.5%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* световой курсор */
.glow{
  position:fixed;top:0;left:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,oklch(0.82 0.12 78 / .085),transparent 64%);
}

@media (max-width:640px){
  .bg-anim>span{filter:blur(70px)}
  .grain{opacity:.024}
}

@media (prefers-reduced-motion:reduce){
  .bg-anim>span,.bg-anim::after,.grain{animation:none}
}