/* Lo sfondo: forme morbide fuori fuoco e perle. Due disposizioni: .wall-pagina (Esempi, Chi sono, Contatti)
   e .wall-home (pagina iniziale). */
.wall {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* In fondo un velo del colore pieno, largo quanto la finestra: dove finisce la pagina i colori sfumano, senza taglio */
.wall::after {
  content: '';
  position: absolute;
  left: -50vw;
  right: -50vw;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--wall));
}
.blob {
  position: absolute;
  border-radius: 50%;
}
.pearl {
  position: absolute;
  border-radius: 50%;
  filter: blur(1.5px);
  background: radial-gradient(
    circle at 34% 28%,
    var(--bianco) 0%,
    var(--perla-1) 16%,
    var(--perla-2) 46%,
    var(--perla-3) 76%,
    var(--perla-4) 100%
  );
  box-shadow: 0 40px 80px -30px var(--perla-ombra);
}
.wall-pagina .blob {
  filter: blur(80px);
}
.wall-pagina .blob-1 {
  width: 700px;
  height: 600px;
  left: -180px;
  top: -160px;
  background: var(--bianco);
}
.wall-pagina .blob-2 {
  width: 760px;
  height: 620px;
  left: 620px;
  top: -200px;
  background: var(--blob-sand);
}
.wall-pagina .blob-3 {
  width: 700px;
  height: 560px;
  left: -200px;
  top: 620px;
  background: var(--blob-silver);
}
.wall-pagina .blob-4 {
  width: 760px;
  height: 620px;
  left: 640px;
  top: 900px;
  background: var(--blob-sand);
}
.wall-pagina .blob-5 {
  width: 700px;
  height: 560px;
  left: -120px;
  top: 1400px;
  background: var(--blob-stone);
}
.wall-pagina .blob-6 {
  width: 520px;
  height: 420px;
  left: 700px;
  top: 1560px;
  background: var(--bianco);
}
.wall-pagina .pearl-1 {
  width: 260px;
  height: 260px;
  left: 930px;
  top: 120px;
}
.wall-pagina .pearl-2 {
  width: 170px;
  height: 170px;
  left: -60px;
  top: 820px;
}
.wall-pagina .pearl-3 {
  width: 200px;
  height: 200px;
  left: 1060px;
  top: 1240px;
}

/* Pagina iniziale: le sue macchie e perle; le perle si vedono anche, ingrandite, nella lente dei nodi */
.wall-home .blob {
  filter: blur(70px);
}
.wall-home .blob-1 {
  width: 640px;
  height: 560px;
  left: -160px;
  top: -140px;
  background: var(--bianco);
}
.wall-home .blob-2 {
  width: 760px;
  height: 600px;
  left: 640px;
  top: -180px;
  background: var(--blob-sand);
}
.wall-home .blob-3 {
  width: 620px;
  height: 420px;
  left: 260px;
  top: 300px;
  background: var(--blob-stone);
}
.wall-home .blob-4 {
  width: 700px;
  height: 520px;
  left: 760px;
  top: 560px;
  background: var(--blob-sand);
}
.wall-home .blob-5 {
  width: 560px;
  height: 460px;
  left: -120px;
  top: 620px;
  background: var(--blob-silver);
}
.wall-home .blob-6 {
  width: 380px;
  height: 300px;
  left: 600px;
  top: 420px;
  background: var(--blob-taupe);
  filter: blur(80px);
}
.wall-home .pearl-1,
.lente .pearl-1 {
  width: 300px;
  height: 300px;
}
.wall-home .pearl-1 {
  left: 842px;
  top: 150px;
}
.lente .pearl-1 {
  left: 802px;
  top: -234px;
}
.wall-home .pearl-2 {
  width: 190px;
  height: 190px;
  left: -46px;
  top: 676px;
}
.wall-home .pearl-3,
.lente .pearl-3 {
  width: 130px;
  height: 130px;
  filter: blur(2.5px);
}
.wall-home .pearl-3 {
  left: 596px;
  top: 318px;
}
.lente .pearl-3 {
  left: 556px;
  top: -66px;
}

/* Esempi: la pagina è lunga, altre quattro macchie più in basso */
.wall-pagina .blob-7 {
  width: 760px;
  height: 620px;
  left: 560px;
  top: 2200px;
  background: var(--blob-silver);
}
.wall-pagina .blob-8 {
  width: 720px;
  height: 600px;
  left: -160px;
  top: 2600px;
  background: var(--blob-sand);
}
.wall-pagina .blob-9 {
  width: 760px;
  height: 620px;
  left: 600px;
  top: 3050px;
  background: var(--blob-stone);
}
.wall-pagina .blob-10 {
  width: 720px;
  height: 600px;
  left: -180px;
  top: 3400px;
  background: var(--bianco);
}

@media (prefers-reduced-motion: no-preference) {
  .wall-pagina .pearl-1 {
    animation: galleggia 16s var(--ease) infinite alternate;
  }
  .wall-pagina .pearl-3 {
    animation: galleggia 13s var(--ease) infinite alternate-reverse;
  }
  .wall-home .blob-2 {
    animation: deriva-a 34s var(--ease) infinite alternate;
  }
  .wall-home .blob-3 {
    animation: deriva-b 40s var(--ease) infinite alternate;
  }
  .wall-home .blob-4 {
    animation: deriva-a 46s var(--ease) infinite alternate-reverse;
  }
  .wall-home .blob-6 {
    animation: deriva-b 30s var(--ease) infinite alternate-reverse;
  }
  .wall-home .pearl-1,
  .lente .pearl-1 {
    animation: galleggia 16s var(--ease) infinite alternate;
  }
  .wall-home .pearl-2 {
    animation: galleggia 19s var(--ease) infinite alternate-reverse;
  }
  .wall-home .pearl-3,
  .lente .pearl-3 {
    animation: galleggia 13s var(--ease) infinite alternate;
  }
}
@keyframes galleggia {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-14px, 18px);
  }
}
@keyframes deriva-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-70px, 40px) scale(1.08);
  }
}
@keyframes deriva-b {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(80px, -30px) scale(0.94);
  }
}