/* Keep the artwork alive when a browser cannot create or retain a WebGL context. */
.button:not([data-cloud-mode="webgl"]) .button__clouds {
  background:
    radial-gradient(ellipse at 16% 32%, rgb(248 248 244 / .72), transparent 28%),
    radial-gradient(ellipse at 54% 70%, rgb(124 185 181 / .85), transparent 38%),
    radial-gradient(ellipse at 88% 24%, rgb(220 238 233 / .68), transparent 30%);
  background-size: 145% 125%;
}

.button:not([data-cloud-mode="webgl"]):is(:hover, :focus-visible) .button__clouds {
  animation: bw-button-cloud-drift 6s ease-in-out infinite alternate;
}

@keyframes bw-button-cloud-drift {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}

.cw-overlay[data-cw-case-study="explorations"][data-cw-cloud-mode="fallback"] .cw-cloud-fallback {
  background-size: 115% 115%;
  animation: bw-explorations-cloud-drift 24s ease-in-out infinite alternate;
}

@keyframes bw-explorations-cloud-drift {
  from { background-position: 0% 25%; }
  to { background-position: 100% 75%; }
}

.cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback {
  overflow: hidden;
}

.cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback::before,
.cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback::after {
  content: "";
  position: absolute;
  inset: -16%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 44%, rgb(124 185 181 / .28), transparent 36%),
    radial-gradient(ellipse at 72% 56%, rgb(220 238 233 / .18), transparent 42%),
    radial-gradient(ellipse at 54% 78%, rgb(50 92 84 / .3), transparent 46%);
  animation: bw-overlay-cloud-drift 26s ease-in-out infinite alternate;
}

.cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback::after {
  opacity: .64;
  transform: scaleX(-1);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

@keyframes bw-overlay-cloud-drift {
  from { translate: -4% 2%; }
  to { translate: 6% -3%; }
}

.site-shell > main > .contact .contact-flag.is-fallback .contact-flag__poster {
  transform-origin: 50% 0;
  animation: bw-fabric-fallback 6.8s ease-in-out infinite;
}

@keyframes bw-fabric-fallback {
  0%, 100% { transform: translateX(-50%) rotate(-.4deg) scaleX(.992); }
  38% { transform: translateX(-50%) rotate(.7deg) scaleX(1.008); }
  72% { transform: translateX(-50%) rotate(-.2deg) scaleX(.996); }
}

@media (prefers-reduced-motion: reduce) {
  .button:not([data-cloud-mode="webgl"]):is(:hover, :focus-visible) .button__clouds,
  .cw-overlay[data-cw-case-study="explorations"][data-cw-cloud-mode="fallback"] .cw-cloud-fallback,
  .cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback::before,
  .cw-overlay[data-pd-cloud-mode="fallback"] .pd-cloud-fallback::after,
  .site-shell > main > .contact .contact-flag.is-fallback .contact-flag__poster {
    animation: none;
  }
}