<div class="card">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

.card {
  position: relative;
  width: 15rem;
  height: 15rem;

  background: white;
  border-radius: 2rem;
  box-shadow: 0 1rem 3rem -2rem hsla(0 0% 0% / 40%);

  &:hover {
    cursor: pointer;

    & > .color {
      animation: wobbley 1s linear infinite;

      @media (prefers-reduced-motion: reduce) {
        animation: cross-fade 3s ease-in-out infinite;

        &:nth-child(1) {
          transform: translateX(-10px) translateY(-12px);
        }

        &:nth-child(2) {
          transform: translateX(9px) translateY(13px);
          animation-delay: -1s;
        }

        &:nth-child(3) {
          transform: translateX(-12px) translateY(19px);
          animation-delay: -2s;
        }
      }
    }

    & > .color:nth-child(1) { animation-delay: 0s; animation-duration:1.35; }
    & > .color:nth-child(2) { animation-delay: -.25s; }
    & > .color:nth-child(3) { animation-delay: -.75s; animation-duration:.85; }
  }

  &:hover > .color {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 2rem;
    mix-blend-mode: multiply;
    pointer-events: none;

    &:nth-child(1) {
      background-color: cyan;
    }

    &:nth-child(2) {
      background-color: magenta;
    }

    &:nth-child(3) {
      background-color: yellow;
    }
  }
}

@keyframes wobbley {
  0%,100% { transform: translateX(-10px) translateY(-8px); }
  25% { transform: translateX(10px) translateY(-12px); }
  50% { transform: translateX(12px) translateY(15px); }
  75% { transform: translateX(-11px) translateY(14px); }
}

@keyframes cross-fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

body {
  margin: 0;
  font-family: system-ui;
  display: grid;
  place-content: center;
  min-height: 100vh;
  background-color: hsl(0,0%,92%);
}