/* Animated background, shared by the Bioplast pages.
   Markup: <div class="bg green|grey|blue" aria-hidden="true"><i></i><i></i><i></i><i></i></div><div class="glow" aria-hidden="true"></div>
   Circles filled with a linear gradient that rotates (transform only, so the GPU does the work), a light that
   follows the pointer and a slight parallax per circle (both from assets/glow.js). Geometry from bg-green.png:
   ring 1.16 x the height, inner circle 0.63, side circles tangent to the ring. */
.bg {
  --light: #22C98B; --base: #1EC283; --dark: #158C5E;
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--light), var(--base) 45%, #19A670);
}
.bg.grey { --light: #93A5D2; --base: #7482A6; --dark: #697696; background: linear-gradient(180deg, #6E7C9D, var(--base) 55%, #7E8DB3); }
.bg.blue { --light: #4C8FEF; --base: #206FE1; --dark: #1554B5; background: linear-gradient(180deg, #2B7AE8, var(--base) 50%, #1A5EC4); }
.bg i {
  position: absolute; top: 50%; left: 50%; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2 + var(--x, 0vmin));
  border-radius: 50%; background: linear-gradient(135deg, var(--light) 5%, var(--base) 45%, var(--dark) 100%);
  box-shadow: 0 0 90px rgba(0, 0, 0, .08);
  translate: calc(var(--mx, 0) * var(--depth) * 1px) calc(var(--my, 0) * var(--depth) * 1px);
  animation: spin var(--t) linear infinite; will-change: transform;
}
.bg.grey i, .bg.blue i { background: linear-gradient(135deg, var(--light) 0%, var(--base) 50%, var(--dark) 100%); }
.bg i:nth-child(1) { --d: 116vmin; --t: 50s; --depth: 10; }                                            /* ring */
.bg i:nth-child(2) { --d: 63vmin; --t: 32s; --depth: 22; animation-direction: reverse; }               /* inner circle */
.bg i:nth-child(3) { --d: 116vmin; --x: -116vmin; --t: 64s; --depth: 6; animation-direction: reverse; } /* left, cut by the edge */
.bg i:nth-child(4) { --d: 116vmin; --x: 116vmin; --t: 58s; --depth: 6; }                               /* right, cut by the edge */
@keyframes spin { to { transform: rotate(1turn); } }

/* light on glass: follows the pointer (assets/glow.js), drifts by itself on touch screens */
.glow {
  position: fixed; top: 0; left: 0; z-index: -1; width: 80vmax; height: 80vmax; margin: -40vmax 0 0 -40vmax;
  border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, 0));
  transform: translate3d(50vw, 45vh, 0);
}
@media (hover: none) { .glow { animation: drift 16s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: translate3d(20vw, 30vh, 0); } to { transform: translate3d(80vw, 65vh, 0); } }
@media (prefers-reduced-motion: reduce) { .bg i, .glow { animation: none; } }