/* /about/ is much longer than the other pages.
   Densify only its ambient vector field so there are no empty vertical gaps. */
.radonega-vector-bg--long .about-vector-cluster {
  height: min(800px, 76vw);
  min-height: 560px;
  opacity: .90;
}

/* 12 evenly spaced clusters cover the long desktop document continuously. */
.radonega-vector-bg--long .about-vector-cluster.c1  { top: 0.2%; }
.radonega-vector-bg--long .about-vector-cluster.c2  { top: 8.8%; }
.radonega-vector-bg--long .about-vector-cluster.c3  { top: 17.4%; }
.radonega-vector-bg--long .about-vector-cluster.c4  { top: 26.0%; }
.radonega-vector-bg--long .about-vector-cluster.c5  { top: 34.6%; }
.radonega-vector-bg--long .about-vector-cluster.c6  { top: 43.2%; }
.radonega-vector-bg--long .about-vector-cluster.c7  { top: 51.8%; }
.radonega-vector-bg--long .about-vector-cluster.c8  { top: 60.4%; }
.radonega-vector-bg--long .about-vector-cluster.c9  { top: 69.0%; }
.radonega-vector-bg--long .about-vector-cluster.c10 { top: 77.6%; }
.radonega-vector-bg--long .about-vector-cluster.c11 { top: 86.2%; }
.radonega-vector-bg--long .about-vector-cluster.c12 { top: 94.8%; }

/* Keep adjacent groups out of phase, so the denser field still feels organic. */
.radonega-vector-bg--long .c6  .about-vector-water { animation-duration: 15s; animation-delay: -5s; }
.radonega-vector-bg--long .c7  .about-vector-water { animation-duration: 18s; animation-delay: -12s; }
.radonega-vector-bg--long .c8  .about-vector-water { animation-duration: 14s; animation-delay: -8s; }
.radonega-vector-bg--long .c9  .about-vector-water { animation-duration: 17s; animation-delay: -3s; }
.radonega-vector-bg--long .c10 .about-vector-water { animation-duration: 19s; animation-delay: -11s; }
.radonega-vector-bg--long .c11 .about-vector-water { animation-duration: 16s; animation-delay: -7s; }
.radonega-vector-bg--long .c12 .about-vector-water { animation-duration: 18s; animation-delay: -14s; }

.radonega-vector-bg--long .c6  .about-vector-gold { animation-duration: 20s; animation-delay: -12s; }
.radonega-vector-bg--long .c7  .about-vector-gold { animation-duration: 17s; animation-delay: -6s; }
.radonega-vector-bg--long .c8  .about-vector-gold { animation-duration: 22s; animation-delay: -15s; }
.radonega-vector-bg--long .c9  .about-vector-gold { animation-duration: 18s; animation-delay: -9s; }
.radonega-vector-bg--long .c10 .about-vector-gold { animation-duration: 21s; animation-delay: -4s; }
.radonega-vector-bg--long .c11 .about-vector-gold { animation-duration: 19s; animation-delay: -13s; }
.radonega-vector-bg--long .c12 .about-vector-gold { animation-duration: 23s; animation-delay: -8s; }

.radonega-vector-bg--long .c6  .about-vector-bubble { animation-delay: calc(var(--delay) - 8s); }
.radonega-vector-bg--long .c7  .about-vector-bubble { animation-delay: calc(var(--delay) - 2.5s); }
.radonega-vector-bg--long .c8  .about-vector-bubble { animation-delay: calc(var(--delay) - 6s); }
.radonega-vector-bg--long .c9  .about-vector-bubble { animation-delay: calc(var(--delay) - 10s); }
.radonega-vector-bg--long .c10 .about-vector-bubble { animation-delay: calc(var(--delay) - 4s); }
.radonega-vector-bg--long .c11 .about-vector-bubble { animation-delay: calc(var(--delay) - 7s); }
.radonega-vector-bg--long .c12 .about-vector-bubble { animation-delay: calc(var(--delay) - 11s); }

/* On phones keep performance low: pin three decorative groups to the viewport,
   rather than animating all 24 groups through the very tall mobile document. */
@media (max-width: 991px) {
  .radonega-vector-bg--long .about-vector-stage {
    position: fixed;
    inset: 0;
    height: 100vh;
  }
  .radonega-vector-bg--long .about-vector-cluster {
    display: none !important;
    height: 54vh;
    min-height: 360px;
    opacity: .64;
  }
  .radonega-vector-bg--long .about-vector-cluster.c1,
  .radonega-vector-bg--long .about-vector-cluster.c5,
  .radonega-vector-bg--long .about-vector-cluster.c9 {
    display: block !important;
  }
  .radonega-vector-bg--long .about-vector-cluster.c1 { top: -8%; }
  .radonega-vector-bg--long .about-vector-cluster.c5 { top: 30%; }
  .radonega-vector-bg--long .about-vector-cluster.c9 { top: 68%; }
  .radonega-vector-bg--long .about-vector-bubble.b4 { display:none; }
}