:root {
  --visited-clr: rgba(0, 195, 255, 0.85);
  --path-clr: rgb(255, 254, 106);
  --text-light: #515067;
}

span.carret {
  display: inline-block;
  aspect-ratio: 1;
  width: 12px;
  /* border: 1px solid; */
  background: url("../assets/icon/caret-down.svg");
  background-repeat: no-repeat;
  margin-left: 4px;
}
.wall {
  background-color: var(--clr-navy);
  animation: wallAnimation 0.5s ease-out forwards;
}

.unvisited {
  background-color: white;
  border: 1px solid var(--light-line);
}

.visited {
  border-color: var(--visited-clr) !important;
  animation: visitedAnimation 1s ease-out forwards;
}

.path {
  border-color: var(--path-clr) !important;
  animation: pathAnimation 1s ease-out forwards;
}

.carret {
  aspect-ratio: 1;
}

.btn {
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 8px 16px;
  border-radius: 6px;
  background-color: var(--primary-clr);
  color: white;
  font-weight: 600;
  transition: 0.1s ease-in-out;
}

.source {
  background: url(../assets/icon/source.svg);
}
.target {
  background: url(../assets/icon/target.svg);
}

/* =================== animations =================== */

@keyframes wallAnimation {
  0% {
    transform: scale(0.3);
    background-color: var(--wall-clr);
  }

  50% {
    transform: scale(1);
    background-color: var(--wall-clr);
  }
  100% {
    transform: scale(1);
    background-color: var(--wall-clr);
  }
}

/* --visited-clr: rgba(0, 255, 255, 0.85); Bright Cyan Glow */

@keyframes visitedAnimation {
  0% {
    transform: scale(0.3);
    background-color: rgba(0, 0, 80, 0.8); /* Deep Navy */
    border-radius: 100%;
    box-shadow: 0 0 6px rgba(0, 200, 255, 0.4);
  }

  40% {
    background-color: rgba(0, 90, 255, 0.85); /* Electric Blue */
    box-shadow: 0 0 12px rgba(0, 90, 255, 0.6);
  }

  70% {
    transform: scale(1.05);
    background-color: rgba(0, 255, 180, 0.9); /* Aqua Green */
    box-shadow: 0 0 20px rgba(0, 255, 180, 0.7);
  }

  100% {
    transform: scale(1);
    background-color: var(--visited-clr);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.9);
  }
}

@keyframes pathAnimation {
  0% {
    transform: scale(0.6);
    background-color: var(--path-clr);
  }

  50% {
    transform: scale(1);
    background-color: var(--path-clr);
  }

  100% {
    transform: scale(1);
    background-color: var(--path-clr);
  }
}