:host {
  display: block;
  height: 100vh;
  width: 100vw;
  position: absolute;
  --fiv-color-feature: rgba(56, 128, 255, 0.97);
  --fiv-color-pulse: var(--ion-color-light);
  --fiv-icon-color: var(--fiv-color-feature, var(--ion-color-primary));
}

.backdrop {
  display: block;
  height: 100vh;
  width: 100vw;
  position: absolute;
}

.circle {
  position: absolute;
  border-radius: 100%;
  background: var(--fiv-color-feature);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.feature {
  border-radius: 100%;
  background: var(--fiv-color-pulse);
}

.feature.center.pulse {
  animation: 1.4s infinite feature-pulse;
}

@keyframes feature-pulse {
  0% {
    transform: scale(1) translate(-50%, -50%);
    border-radius: 100%;
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.24);
  }
  50% {
    transform: scale(1.1) translate(-45%, -45%);
  }
  100% {
    transform: scale(1) translate(-50%, -50%);
    border-radius: 100%;
    box-shadow: 0 0 0 28px rgba(0, 0, 0, 0);
  }
}

.content {
  position: absolute;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
