.placement-animated-page{
  position: relative;
  overflow: hidden;
}

.placement-animated-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Set your image file name here (place image in same folder). */
  --placement-bg-image: none;
  /* Change this for background color. */
  --placement-bg-color: #f6fffe;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.92)),
    var(--placement-bg-image),
    radial-gradient(1200px 600px at 10% 10%, rgba(27,158,152,0.14), rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(20,13,69,0.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(27,158,152,0.06), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--placement-bg-color), var(--placement-bg-color));
  background-size: cover, cover, auto, auto, auto, cover;
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.placement-animated-bg:after{
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(600px 360px at 20% 35%, rgba(27,158,152,0.14), rgba(255,255,255,0) 65%),
    radial-gradient(520px 320px at 80% 25%, rgba(20,13,69,0.10), rgba(255,255,255,0) 68%);
  opacity: 0.55;
  animation: placementBgDrift 14s ease-in-out infinite;
}

.placement-animated-bg > *{
  position: relative;
  z-index: 1;
}

.placement-bubbles{
  position: absolute;
  inset: -40px 0 -40px 0;
  opacity: 0.55;
  transform: translate3d(0,0,0);
  background-repeat: no-repeat;
  animation: placementBubblesUp 18s linear infinite;
}
.placement-bubbles--a{
  background-image:
    radial-gradient(circle, rgba(27,158,152,0.30) 0 2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(27,158,152,0.22) 0 1.5px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(20,13,69,0.16) 0 1.8px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(27,158,152,0.18) 0 1.2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(20,13,69,0.10) 0 1.4px, rgba(255,255,255,0) 3px);
  background-size: 12px 12px, 10px 10px, 14px 14px, 9px 9px, 11px 11px;
  background-position:
    6% 110%,
    22% 115%,
    44% 112%,
    68% 118%,
    86% 114%;
  animation-duration: 20s;
}
.placement-bubbles--b{
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(27,158,152,0.22) 0 1.6px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(20,13,69,0.14) 0 1.2px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(27,158,152,0.16) 0 1.1px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(20,13,69,0.10) 0 1.0px, rgba(255,255,255,0) 3px),
    radial-gradient(circle, rgba(27,158,152,0.12) 0 1.4px, rgba(255,255,255,0) 3px);
  background-size: 10px 10px, 9px 9px, 12px 12px, 8px 8px, 11px 11px;
  background-position:
    12% 120%,
    34% 123%,
    58% 121%,
    74% 126%,
    92% 122%;
  animation-duration: 26s;
  animation-delay: -8s;
}

@keyframes placementBubblesUp{
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -220px, 0); }
}

@keyframes placementBgDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(18px,-12px,0) scale(1.04); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .placement-bubbles{ animation: none !important; }
  .placement-animated-bg:after{ animation: none !important; }
}