/* The overlay is a sibling of the card, so its autofocus marks stay sharp. */
.card-focus-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 480px;
  min-width: 0;
}

.card-focus-overlay {
  position: absolute;
  z-index: 2;
  inset: 17% 18%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  color: #83e497;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.card-focus-target {
  position: relative;
  width: clamp(16px, 3.8vw, 23px);
  aspect-ratio: 1;
  background:
    linear-gradient(currentColor, currentColor) left top / 6px 1px,
    linear-gradient(currentColor, currentColor) left top / 1px 6px,
    linear-gradient(currentColor, currentColor) right top / 6px 1px,
    linear-gradient(currentColor, currentColor) right top / 1px 6px,
    linear-gradient(currentColor, currentColor) left bottom / 6px 1px,
    linear-gradient(currentColor, currentColor) left bottom / 1px 6px,
    linear-gradient(currentColor, currentColor) right bottom / 6px 1px,
    linear-gradient(currentColor, currentColor) right bottom / 1px 6px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px #07190b);
}

.card-focus-target::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  top: calc(50% - 1.5px);
  left: calc(50% - 1.5px);
  background: currentColor;
  border-radius: 50%;
}

.card-focus-target.is-primary {
  width: clamp(23px, 5.5vw, 31px);
  color: #a3f2ad;
}

.card-focus-stage.is-focusing > .membership-card {
  animation: membership-focus-card 1100ms cubic-bezier(.25, .55, .25, 1) both;
  will-change: filter, transform;
}

.card-focus-stage.is-focusing > .card-focus-overlay {
  visibility: visible;
  animation: membership-focus-overlay 1400ms linear both;
}

.card-focus-stage.is-focusing .card-focus-target {
  animation: membership-focus-target 1400ms linear both;
}

.card-focus-stage.is-focusing .card-focus-target:nth-child(even) {
  animation-name: membership-focus-target-alternate;
}

@keyframes membership-focus-card {
  0% { filter: blur(7px); transform: scale(.997); }
  18% { filter: blur(9px); transform: scale(.994); }
  43% { filter: blur(2px); transform: scale(.998); }
  57% { filter: blur(3.5px); transform: scale(.997); }
  83%, 100% { filter: blur(0); transform: scale(1); }
}

@keyframes membership-focus-overlay {
  0%, 13% { opacity: 0; }
  24%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes membership-focus-target {
  0%, 18% { opacity: 0; }
  25% { opacity: .65; }
  34% { opacity: 1; }
  41% { opacity: .25; }
  49%, 100% { opacity: 1; }
}

@keyframes membership-focus-target-alternate {
  0%, 24% { opacity: 0; }
  32% { opacity: .6; }
  40% { opacity: 1; }
  48% { opacity: .2; }
  56%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card-focus-stage.is-focusing > .membership-card {
    animation: none;
    filter: none;
    transform: none;
    will-change: auto;
  }
  .card-focus-overlay,
  .card-focus-stage.is-focusing > .card-focus-overlay {
    display: none;
    animation: none;
  }
  .card-focus-stage.is-focusing .card-focus-target { animation: none; }
}