@keyframes future-grid {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  40% {
    opacity: 0.28;
  }
  100% {
    opacity: 0.24;
    transform: scale(1);
  }
}

@keyframes future-square-sequence {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    box-shadow: none;
    border-color: rgba(210, 220, 255, 0.18);
    background-color: rgba(70, 80, 120, 0.16);
  }
  20% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.85);
    box-shadow: none;
  }
  40% {
    box-shadow: 80px 0 0 rgba(190, 200, 240, 0.24);
  }
  60% {
    box-shadow:
      80px 0 0 rgba(190, 200, 240, 0.24),
      0 80px 0 rgba(190, 200, 240, 0.22);
  }
  80% {
    box-shadow:
      80px 0 0 rgba(190, 200, 240, 0.24),
      0 80px 0 rgba(190, 200, 240, 0.22),
      80px 80px 0 rgba(190, 200, 240, 0.18);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      80px 0 0 rgba(210, 220, 255, 0.28),
      0 80px 0 rgba(210, 220, 255, 0.26),
      80px 80px 0 rgba(210, 220, 255, 0.22),
      -80px 0 0 rgba(210, 220, 255, 0.24);
    border-color: rgba(230, 235, 255, 0.42);
    background-color: rgba(110, 125, 180, 0.22);
  }
}

.card-art--future::before,
.card-art--future::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.card-art--future::before {
  inset: 12%;
  background-image:
    linear-gradient(rgba(200, 210, 240, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 210, 240, 0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0;
  transform: scale(0.9);
}

.card-art--future::after {
  top: 46%;
  left: 44%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(210, 220, 255, 0.18);
  background-color: rgba(70, 80, 120, 0.16);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}

.card-preview:hover .card-art--future::before {
  animation: future-grid 2.4s ease forwards;
}

.card-preview:hover .card-art--future::after {
  animation: future-square-sequence 3s ease forwards;
}