/* Pontos laranja usados nas trilhas (corredor, perdidos, trilho da jornada). */

.dot {
  --dot-size: 0.75rem;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--sun);
  vertical-align: middle;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.dot--lg { --dot-size: 1.125rem; }
.dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--sun);
  opacity: 0;
  pointer-events: none;
}
.dot[data-state="lost"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sun); opacity: 0.6; }
.has-motion .dot[data-state="arrived"]::after { animation: dot-arrive 0.9s var(--ease-out) 1; }
@keyframes dot-arrive {
  0% { inset: -1px; opacity: 0.8; }
  100% { inset: calc(var(--dot-size) * -1.4); opacity: 0; }
}