/* Grid 3×3: movimiento de celdas (30s, demo Yudiz). Usado solo con #mws-preshow .box */

@keyframes mwsps-box-1 {
  0%,
  90%,
  100% {
    left: 0;
    top: 0;
  }

  2.5%,
  12.5% {
    left: calc(100% / 3);
  }

  15%,
  25% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  27.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
  }

  29.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  31.5%,
  33.5% {
    left: calc(100% / 3);
    width: 100%;
  }

  35.5%,
  37.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  40%,
  50% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  52.5%,
  62.5% {
    left: calc(100% / 3);
  }

  65%,
  75% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  77.5%,
  87.5% {
    top: calc(100% / 3);
  }
}

@keyframes mwsps-box-2 {
  0%,
  90%,
  100% {
    left: calc(100% / 3);
  }

  2.5%,
  12.5% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  15%,
  17% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  19%,
  21% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }

  23%,
  25% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  27.5%,
  37.5% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  40%,
  50% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  52.5%,
  62.5% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  65%,
  75% {
    left: 0;
    top: calc(100% / 3);
  }

  77.5%,
  87.5% {
    left: 0;
    top: 0;
  }
}

@keyframes mwsps-box-3 {
  0%,
  90%,
  100% {
    left: calc((100% / 3) * 2);
  }

  2.5%,
  12.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
  }

  4.5%,
  10.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  6.5%,
  8.5% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }

  15%,
  25% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  27.5%,
  37.5% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  40%,
  50% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  52.5%,
  62.5% {
    left: 0;
    top: calc(100% / 3);
  }

  65%,
  75% {
    left: 0;
    top: 0;
  }

  77.5%,
  87.5% {
    left: calc(100% / 3);
    top: 0;
  }
}

@keyframes mwsps-box-4 {
  0%,
  90%,
  100% {
    top: calc(100% / 3);
  }

  2.5%,
  12.5% {
    left: 0;
    top: 0;
  }

  15%,
  25% {
    left: calc(100% / 3);
    top: 0;
  }

  27.5%,
  37.5% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  40%,
  42%,
  48%,
  50% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  44%,
  46% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }

  52.5%,
  62.5% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  65%,
  75% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  77.5%,
  87.5% {
    left: 0;
    top: calc((100% / 3) * 2);
  }
}

@keyframes mwsps-box-5 {
  0%,
  90%,
  92%,
  98%,
  100% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  2.5%,
  12.5% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  15%,
  25% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  27.5%,
  37.5% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  40%,
  50% {
    left: 0;
    top: calc(100% / 3);
  }

  52.5%,
  62.5% {
    left: 0;
    top: 0;
  }

  65%,
  75% {
    left: calc(100% / 3);
    top: 0;
  }

  77.5%,
  87.5% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  94%,
  96% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }
}

@keyframes mwsps-box-6 {
  0%,
  90%,
  100% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  2.5%,
  12.5% {
    left: 0;
    top: calc(100% / 3);
  }

  15%,
  25% {
    left: 0;
    top: 0;
  }

  27.5%,
  37.5% {
    left: calc(100% / 3);
    top: 0;
  }

  40%,
  50% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  52.5%,
  54.5%,
  60.5%,
  62.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  56.5%,
  58.5% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }

  65%,
  75% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  77.5%,
  87.5% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }
}

@keyframes mwsps-box-7 {
  0%,
  90%,
  100% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  2.5%,
  12.5% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  15%,
  25% {
    left: 0;
    top: calc(100% / 3);
  }

  27.5%,
  37.5% {
    left: 0;
    top: 0;
  }

  40%,
  50% {
    left: calc(100% / 3);
    top: 0;
  }

  52.5%,
  62.5% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  65%,
  67%,
  73%,
  75% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
  }

  69%,
  71% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }

  77.5%,
  87.5% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }
}

@keyframes mwsps-box-8 {
  0%,
  90%,
  100% {
    left: calc((100% / 3) * 2);
    top: calc((100% / 3) * 2);
  }

  2.5%,
  12.5% {
    left: calc(100% / 3);
    top: calc((100% / 3) * 2);
  }

  15%,
  25% {
    left: 0;
    top: calc((100% / 3) * 2);
  }

  27.5%,
  37.5% {
    left: 0;
    top: calc(100% / 3);
  }

  40%,
  50% {
    left: 0;
    top: 0;
  }

  52.5%,
  62.5% {
    left: calc(100% / 3);
    top: 0;
  }

  65%,
  75% {
    left: calc((100% / 3) * 2);
    top: 0;
  }

  77.5%,
  79.5%,
  85.5%,
  87.5% {
    left: calc((100% / 3) * 2);
    top: calc(100% / 3);
    width: calc((100% / 3) - 16px);
    border-radius: 100%;
  }

  81.5%,
  83.5% {
    left: calc(100% / 3);
    top: calc(100% / 3);
    width: 100%;
  }
}