/* Pastilles à débusquer : petits boutons ronds posés sur une photo (variables --x et --y,
   en %) ou glissés dans un texte (.spot--inline). Voir js/components/spots.js. */

.spot {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(6, 10, 22, .5); color: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease), opacity .4s;
}
.spot svg { width: 18px; height: 18px; }
.spot:hover, .spot:focus-visible { color: #fff; border-color: #fff; background: rgba(6, 10, 22, .8); transform: translate(-50%, -50%) scale(1.14); }
.spot[hidden] { display: none; }
.spot.found { cursor: default; color: var(--night); border-color: var(--gold-hi); background: var(--gold-hi); }
.spot.found:hover { transform: translate(-50%, -50%); }
.spot.pop { animation: spot-pop .5s var(--ease); }
@keyframes spot-pop { 0% { transform: translate(-50%, -50%) scale(.6); } 60% { transform: translate(-50%, -50%) scale(1.3); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* pastille posée dans un texte plutôt que sur une photo */
.spot--inline { position: relative; left: auto; top: auto; margin-top: 12px; transform: none; display: inline-grid; }
.spot--inline:hover, .spot--inline:focus-visible { transform: scale(1.14); }
.spot--inline.found:hover { transform: none; }
.spot--inline.pop { animation: none; }

/* les portraits peuvent eux aussi porter des pastilles */
.voice-img { position: relative; }

/* compteur qui s'élève au-dessus d'une pastille trouvée */
.spot-note { position: absolute; z-index: 4; transform: translate(-50%, -150%); padding: 2px 8px; pointer-events: none; background: var(--gold-hi); color: var(--night); font-size: .7rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; animation: note-up 1.5s ease-out forwards; }
@keyframes note-up { 0% { opacity: 0; transform: translate(-50%, -110%); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -230%); } }

@media (max-width: 680px) {
  .spot { width: 30px; height: 30px; }
  .spot svg { width: 16px; height: 16px; }
}