/* The search must happen in the 3D scene, not only in the bottom sheet. */
.scene__glow {
  transition: background .5s, transform .7s;
}

.game.is-scanning .scene__glow {
  transform: translate(-50%, -50%) scale(1.35);
  background: rgba(83, 203, 194, .18);
}

.search-scan {
  position: absolute;
  z-index: 9;
  top: 48%;
  left: 50%;
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%) rotateX(66deg);
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
}

.search-scan i {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(125, 242, 232, .72);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(83, 220, 211, .38), inset 0 0 30px rgba(83, 220, 211, .12);
  transform: scale(.15);
  opacity: 0;
}

.search-scan i:nth-child(2) { animation-delay: .16s; }
.search-scan i:nth-child(3) { animation-delay: .32s; }

.search-scan b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #c8fff8, transparent);
  box-shadow: 0 0 12px #77e8df;
  opacity: 0;
}

.game.is-scanning .search-scan { opacity: 1; }
.game.is-scanning .search-scan i { animation: scan-ring .95s ease-out forwards; }
.game.is-scanning .search-scan b { opacity: 1; animation: scan-beam .8s linear infinite; }

.search-lock {
  position: absolute;
  z-index: 11;
  top: 43%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%) scale(.45);
  pointer-events: none;
  opacity: 0;
  transition: transform .55s cubic-bezier(.2, 1.35, .25, 1), opacity .35s;
}

.search-lock i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 211, 122, .8);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(245, 211, 122, .08), 0 0 32px rgba(245, 211, 122, .28);
}

.search-lock i::before,
.search-lock i::after {
  position: absolute;
  content: "";
  background: #efd07a;
}

.search-lock i::before { top: 50%; right: -12px; left: -12px; height: 1px; }
.search-lock i::after { top: -12px; bottom: -12px; left: 50%; width: 1px; }

.search-lock span {
  position: absolute;
  top: 130px;
  padding: 7px 12px;
  border: 1px solid rgba(245, 211, 122, .32);
  border-radius: 999px;
  background: rgba(4, 17, 21, .9);
  color: #f1d888;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game.has-results .search-lock { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.game.is-inspecting .search-lock { transform: translate(-50%, -50%) scale(.82); opacity: .35; }
.map-pin { transition: transform .45s, background .45s, box-shadow .45s, opacity .4s, filter .4s; }
.game.is-scanning .map-pin { animation: pin-probe .7s ease-in-out infinite alternate; }
.game.is-scanning .map-pin--two { animation-delay: .12s; }
.game.is-scanning .map-pin--target { animation-delay: .24s; }

.game.has-results .map-pin--target {
  transform: translateZ(95px) rotate(-45deg) scale(1.18);
  background: linear-gradient(145deg, #fff1b7, #d3a63e);
  box-shadow: 0 14px 0 #785514, 0 0 0 20px rgba(242, 205, 112, .16), 0 32px 58px rgba(0, 0, 0, .55);
}

.game.is-inspecting .map-pin:not(.map-pin--target) { opacity: .22; filter: grayscale(1); }
.game.is-inspecting .map-pin--target { transform: translateZ(120px) rotate(-45deg) scale(1.3); }

.map-scan-line {
  position: absolute;
  z-index: 5;
  top: -5%;
  bottom: -5%;
  left: -20%;
  width: 34px;
  transform: translateZ(24px) rotate(9deg);
  background: linear-gradient(90deg, transparent, rgba(137, 249, 237, .68), transparent);
  filter: blur(1px);
  opacity: 0;
}

.game.is-scanning .map-scan-line { opacity: 1; animation: map-sweep .85s ease-in-out forwards; }

@keyframes pin-probe {
  to { transform: translateZ(72px) rotate(-45deg) scale(1.12); filter: brightness(1.35); }
}

@keyframes scan-ring {
  0% { transform: scale(.1); opacity: .9; }
  100% { transform: scale(1.45); opacity: 0; }
}

@keyframes scan-beam { to { transform: rotate(360deg); } }
@keyframes map-sweep { 0% { left: -20%; } 100% { left: 118%; } }

@media (prefers-reduced-motion: reduce) {
  .search-scan,
  .search-lock,
  .map-scan-line { display: none; }
  .game.has-results .map-pin--target { transform: translateZ(70px) rotate(-45deg); }
}