.discovery-star {
  --star-size: clamp(0.32rem, 0.62vw, 0.52rem);
  --twinkle-duration: 3.9s;

  position: absolute;
  top: 28%;
  left: 69%;
  --star-delay: 0s;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.discovery-star__light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #f6d879;
  box-shadow:
    0 0 0.55rem rgba(246, 216, 121, 0.58),
    0 0 1.6rem rgba(246, 216, 121, 0.16);
  transform: translate(-50%, -50%);
  animation: star-twinkle var(--twinkle-duration) ease-in-out var(--star-delay) infinite;
  transition:
    background 1.2s ease,
    box-shadow 1.2s ease,
    transform 1.2s ease;
}

.discovery-star__light::before,
.discovery-star__light::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: clamp(1.8rem, 3.6vw, 3rem);
  border-radius: 50%;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255, 246, 207, 0.82) 48%,
      transparent
    );
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(1);
  animation: star-rays var(--twinkle-duration) ease-in-out var(--star-delay) infinite;
}

.discovery-star__light::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(1);
}

.discovery-star--second {
  top: 19%;
  left: 43%;
  --star-delay: -1.4s;
}

.discovery-star--third {
  top: 35%;
  left: 24%;
  --star-delay: -2.8s;
}

.discovery-star--fourth {
  top: 16%;
  left: 76%;
  --star-delay: -3.7s;
}

.discovery-star:focus-visible {
  outline: 1px solid rgba(246, 216, 121, 0.72);
  outline-offset: -0.25rem;
}

.discovery-star:hover .discovery-star__light,
.discovery-star:focus-visible .discovery-star__light {
  box-shadow:
    0 0 0.75rem rgba(246, 216, 121, 0.82),
    0 0 2rem rgba(246, 216, 121, 0.28);
}

.discovery-star.is-discovered .discovery-star__light {
  --twinkle-duration: 6.4s;
  background: #fff1b8;
  box-shadow:
    0 0 0.9rem rgba(255, 241, 184, 0.9),
    0 0 2.8rem rgba(246, 216, 121, 0.42);
  transform: translate(-50%, -50%) scale(1.22);
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.56;
    transform: translate(-50%, -50%) scale(0.78);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.28);
  }

  27% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.9);
  }

  68% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }

  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes star-rays {
  0%,
  10%,
  32%,
  62%,
  84%,
  100% {
    opacity: 0;
  }

  18%,
  76% {
    opacity: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-star__light {
    animation: none;
  }

  .discovery-star__light::before,
  .discovery-star__light::after {
    animation: none;
  }
}

.refuge.is-restoring::after,
.refuge.is-restoring .sky-phase-layer,
.refuge.is-restoring .moon,
.refuge.is-restoring .ambient-stars,
.refuge.is-restoring .flower--discovery,
.refuge.is-restoring .discovery-star__light {
  transition: none;
}