@keyframes flare-danger {
  0% { opacity: 0 }
  12% { opacity: 0.5 }
  24% { opacity: 0 }
}

@keyframes flare-caution {
  25% { opacity: 0 }
  37% { opacity: 0.5 }
  49% { opacity: 0 }
}

@keyframes flare-bounty {
  50% { opacity: 0 }
  62% { opacity: 0.5 }
  74% { opacity: 0 }
}

@keyframes flare-target {
  75% { opacity: 0 }
  87% { opacity: 0.5 }
  99% { opacity: 0 }
}

.map-flares {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
  pointer-events: none;

  .flare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
    animation-duration: 3s;
    opacity: 0;

    &.danger {
      animation-name: flare-danger;
      background: var(--flare-danger);
    }

    &.caution {
      animation-name: flare-caution;
      background: var(--flare-caution);
    }

    &.bounty {
      animation-name: flare-bounty;
      background: var(--flare-bounty);
    }

    &.target {
      animation-name: flare-target;
      background: var(--flare-target);
    }
  }
}