@keyframes clue-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--ink), 0 4px 0 rgb(32 49 73 / 28%); }
  50% { box-shadow: 0 0 0 7px rgb(245 198 79 / 55%), 0 4px 0 rgb(32 49 73 / 28%); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes confetti-fall {
  from { transform: translateY(-12vh) rotate(0deg); }
  to { transform: translateY(112vh) rotate(540deg); }
}

.clue-hotspot:not(.inspected) {
  animation: clue-pulse 2.4s ease-in-out infinite;
}

.clue-modal {
  animation: modal-in 180ms ease-out both;
}

.hint-popover {
  animation: hint-in 180ms ease-out both;
}

.confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  top: -20px;
  left: calc((var(--i) * 31) % 100 * 1%);
  width: 8px;
  height: 15px;
  background: var(--coral);
  animation: confetti-fall calc(2.7s + (var(--i) % 5) * 0.35s) linear infinite;
  animation-delay: calc((var(--i) % 9) * -0.31s);
}

.confetti i:nth-child(3n) { background: var(--yellow); }
.confetti i:nth-child(4n) { background: var(--teal); }
.confetti i:nth-child(5n) { background: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .confetti {
    display: none;
  }
}