/* Row of floating dots (template-parts/dots.php). */
.oasis-dots {
  display: block;
  width: 71.4%;
  max-width: 1371px;
  height: auto;
  margin: clamp(24px, 2.3vw, 44px) auto 0;
  overflow: hidden;
}

.oasis-dots__dot {
  transform-box: fill-box;
  animation: oasis-float 3.2s ease-in-out infinite alternate;
}

.oasis-dots__dot:nth-child(3n) {
  animation-duration: 4s;
}

.oasis-dots__dot:nth-child(3n + 1) {
  animation-duration: 2.7s;
}

.oasis-dots__dot--navy   { fill: var(--oasis-navy); }
.oasis-dots__dot--blue   { fill: var(--oasis-blue-light); }
.oasis-dots__dot--green  { fill: var(--oasis-green); }
.oasis-dots__dot--orange { fill: var(--oasis-orange); }

/* In % of each dot's size, so bigger dots travel further. The viewBox margin
   in dots.php is sized for this range. */
@keyframes oasis-float {
  from { transform: translate(-8%, -25%); }
  to   { transform: translate(8%, 25%); }
}

@media (prefers-reduced-motion: reduce) {
  .oasis-dots__dot {
    animation: none;
  }
}

@media (max-width: 768px) {
  .oasis-dots {
    width: 90%;
  }
}