.strength-card__tags {
  top: 156px;
  perspective: 720px;
  transform-style: preserve-3d;
}

.strength-card__tags span {
  backface-visibility: hidden;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  filter: blur(2px);
  transition:
    opacity 180ms ease,
    filter 320ms ease,
    transform 480ms cubic-bezier(.16, 1, .3, 1);
}

.strength-card__tags span:nth-child(1) {
  z-index: 3;
  transform: translate3d(0, 110px, -30px) rotateX(-84deg) rotate(-4deg) scale(.9);
  transition-delay: 0ms;
}

.strength-card__tags span:nth-child(2) {
  z-index: 2;
  transform: translate3d(0, 54px, -20px) rotateX(-78deg) rotate(5deg) scale(.92);
  transition-delay: 50ms;
}

.strength-card__tags span:nth-child(3) {
  z-index: 1;
  transform: translate3d(0, 0, -10px) rotateX(-68deg) rotate(-2deg) scale(.94);
  transition-delay: 100ms;
}

.strength-card:hover .strength-card__tags span,
.strength-card:focus-within .strength-card__tags span {
  filter: blur(0);
}

.strength-card:hover .strength-card__tags span:nth-child(3),
.strength-card:focus-within .strength-card__tags span:nth-child(3) {
  transform: translate3d(0, 0, 0) rotateX(0) rotate(-2deg) scale(1);
  transition-delay: 30ms;
}

.strength-card:hover .strength-card__tags span:nth-child(2),
.strength-card:focus-within .strength-card__tags span:nth-child(2) {
  transform: translate3d(0, 0, 0) rotateX(0) rotate(5deg) scale(1);
  transition-delay: 150ms;
}

.strength-card:hover .strength-card__tags span:nth-child(1),
.strength-card:focus-within .strength-card__tags span:nth-child(1) {
  transform: translate3d(0, 0, 0) rotateX(0) rotate(-4deg) scale(1);
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .strength-card__tags span,
  .strength-card:hover .strength-card__tags span,
  .strength-card:focus-within .strength-card__tags span {
    transition-delay: 0ms;
    filter: none;
  }
}