.trl-vision-system {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: min(100%, 500px);
  margin-inline: auto;
  transform: translateZ(0);
}

.trl-vision-aura {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 132, 190, .11), rgba(100, 132, 190, .025) 48%, transparent 70%);
  animation: trl-vision-breathe 4.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.trl-vision-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.trl-vision-ring--outer { inset: 5%; }
.trl-vision-ring--middle { inset: 20%; border-style: dashed; border-color: rgba(130, 157, 207, .17); }
.trl-vision-ring--inner { inset: 34%; border-color: rgba(255, 255, 255, .14); }

.trl-vision-sweep {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 80%, rgba(111, 144, 205, .22) 91%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 44%, #fff 45% 49%, transparent 50%);
  animation: trl-vision-spin 7s linear infinite;
}

.trl-vision-orbit {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  animation: trl-vision-spin 18s linear infinite;
}
.trl-vision-orbit--reverse { inset: 20%; animation: trl-vision-spin-reverse 13s linear infinite; }

.trl-vision-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(16, 18, 23, .94);
  color: rgba(239, 242, 248, .84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px rgba(0, 0, 0, .24);
  animation: trl-vision-counter-spin 18s linear infinite;
}
.trl-vision-orbit--reverse .trl-vision-node { animation: trl-vision-counter-spin-reverse 13s linear infinite; }
.trl-vision-node--north { left: 50%; top: -21px; transform: translateX(-50%); }
.trl-vision-node--east { right: -21px; top: 50%; transform: translateY(-50%); }
.trl-vision-node--south { left: 50%; bottom: -21px; transform: translateX(-50%); }
.trl-vision-node--west { left: -21px; top: 50%; transform: translateY(-50%); }

.trl-vision-core {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(24, 27, 35, .92);
  color: rgba(245, 247, 251, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 24px 60px rgba(0, 0, 0, .28);
  animation: trl-core-breathe 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.trl-vision-core::before,
.trl-vision-core::after {
  content: "";
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(124, 153, 207, .16);
  border-radius: 50%;
  animation: trl-core-pulse 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.trl-vision-core::after { animation-delay: 1.9s; }

.trl-vision-core-copy {
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .42);
  font: 650 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trl-human-target {
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.trl-human-target--a {
  left: calc(24% + 190px);
  top: calc(24% + 36px);
  --human-cycle: trl-human-cycle-a;
  --human-wave: trl-human-wave-a;
  --human-label: trl-human-label-a;
  --human-burst: trl-human-burst-a;
}
.trl-human-target--b {
  left: calc(24% + 102px);
  top: calc(24% + 190px);
  --human-cycle: trl-human-cycle-b;
  --human-wave: trl-human-wave-b;
  --human-label: trl-human-label-b;
  --human-burst: trl-human-burst-b;
}
.trl-human-target--c {
  left: calc(24% - 22px);
  top: calc(24% + 112px);
  --human-cycle: trl-human-cycle-c;
  --human-wave: trl-human-wave-c;
  --human-label: trl-human-label-c;
  --human-burst: trl-human-burst-c;
}

.trl-human-disc {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(161, 184, 225, .56);
  border-radius: 50%;
  background: rgba(19, 23, 31, .96);
  color: rgba(238, 243, 251, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: var(--human-cycle) 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.trl-human-wave {
  position: absolute;
  z-index: 1;
  inset: 4px;
  border: 1px solid rgba(130, 160, 216, .62);
  border-radius: 50%;
  animation: var(--human-wave) 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.trl-human-label {
  position: absolute;
  z-index: 4;
  top: calc(100% + 10px);
  left: 50%;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(13, 15, 19, .94);
  color: rgba(224, 233, 248, .78);
  font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: var(--human-label) 8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.trl-human-particle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(162, 185, 226, .88);
  animation: var(--human-burst) 8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.trl-human-particle:nth-of-type(2n) { width: 3px; height: 3px; animation-delay: .04s; }
.trl-human-particle:nth-of-type(3n) { animation-delay: .08s; }

.trl-vision-reticle {
  position: absolute;
  z-index: 3;
  left: 24%;
  top: 24%;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(138, 164, 214, .54);
  border-radius: 12px;
  opacity: .78;
  animation: trl-reticle-track 8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.trl-vision-reticle::before,
.trl-vision-reticle::after {
  content: "";
  position: absolute;
  background: rgba(155, 178, 220, .75);
}
.trl-vision-reticle::before { width: 14px; height: 1px; left: -7px; top: 50%; }
.trl-vision-reticle::after { width: 1px; height: 14px; left: 50%; top: -7px; }

.trl-vision-status {
  position: absolute;
  right: 3%;
  bottom: 14%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(13, 15, 19, .88);
  color: rgba(255, 255, 255, .58);
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: trl-status-float 4s cubic-bezier(.16, 1, .3, 1) infinite;
}
.trl-vision-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #77d99a; animation: trl-status-dot 2s ease-in-out infinite; }

@keyframes trl-vision-spin { to { transform: rotate(360deg); } }
@keyframes trl-vision-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes trl-vision-counter-spin { to { rotate: -360deg; } }
@keyframes trl-vision-counter-spin-reverse { to { rotate: 360deg; } }
@keyframes trl-vision-breathe { 50% { transform: scale(.94); opacity: .64; } }
@keyframes trl-core-breathe { 50% { transform: scale(1.045); } }
@keyframes trl-core-pulse { 0% { transform: scale(.82); opacity: 0; } 48% { opacity: .42; } 100% { transform: scale(1.46); opacity: 0; } }
@keyframes trl-reticle-track { 0%, 18%, 100% { transform: translate3d(0, 0, 0); } 30%, 48% { transform: translate3d(190px, 36px, 0); } 60%, 78% { transform: translate3d(102px, 190px, 0); } 90% { transform: translate3d(-22px, 112px, 0); } }
@keyframes trl-human-cycle-a { 0%, 12%, 100% { opacity: 0; transform: scale(.68); } 18%, 44% { opacity: 1; transform: scale(1); } 48% { opacity: 1; transform: scale(.88); } 56%, 92% { opacity: 0; transform: scale(.24); } }
@keyframes trl-human-wave-a { 0%, 30%, 100% { opacity: 0; transform: scale(.78); } 38% { opacity: .78; transform: scale(.9); } 48% { opacity: .18; transform: scale(1.65); } 55% { opacity: 0; transform: scale(2); } }
@keyframes trl-human-label-a { 0%, 35%, 100% { opacity: 0; transform: translate3d(-50%, 6px, 0) scale(.92); } 40%, 46% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } 52% { opacity: 0; transform: translate3d(-50%, -4px, 0) scale(.96); } }
@keyframes trl-human-burst-a { 0%, 45%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.35); } 48% { opacity: .94; transform: translate3d(-50%, -50%, 0) scale(1); } 59% { opacity: 0; transform: translate3d(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y)), 0) scale(.72); } }
@keyframes trl-human-cycle-b { 0%, 40%, 100% { opacity: 0; transform: scale(.68); } 45%, 70% { opacity: 1; transform: scale(1); } 74% { opacity: 1; transform: scale(.88); } 82% { opacity: 0; transform: scale(.24); } }
@keyframes trl-human-wave-b { 0%, 58%, 100% { opacity: 0; transform: scale(.78); } 64% { opacity: .78; transform: scale(.9); } 74% { opacity: .18; transform: scale(1.65); } 81% { opacity: 0; transform: scale(2); } }
@keyframes trl-human-label-b { 0%, 60%, 100% { opacity: 0; transform: translate3d(-50%, 6px, 0) scale(.92); } 64%, 71% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } 77% { opacity: 0; transform: translate3d(-50%, -4px, 0) scale(.96); } }
@keyframes trl-human-burst-b { 0%, 70%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.35); } 73% { opacity: .94; transform: translate3d(-50%, -50%, 0) scale(1); } 84% { opacity: 0; transform: translate3d(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y)), 0) scale(.72); } }
@keyframes trl-human-cycle-c { 0%, 70%, 100% { opacity: 0; transform: scale(.68); } 75%, 93% { opacity: 1; transform: scale(1); } 96% { opacity: 1; transform: scale(.88); } 99% { opacity: 0; transform: scale(.24); } }
@keyframes trl-human-wave-c { 0%, 87%, 100% { opacity: 0; transform: scale(.78); } 91% { opacity: .78; transform: scale(.9); } 96% { opacity: .18; transform: scale(1.65); } 99% { opacity: 0; transform: scale(2); } }
@keyframes trl-human-label-c { 0%, 88%, 100% { opacity: 0; transform: translate3d(-50%, 6px, 0) scale(.92); } 91%, 95% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } 98% { opacity: 0; transform: translate3d(-50%, -4px, 0) scale(.96); } }
@keyframes trl-human-burst-c { 0%, 93%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.35); } 95% { opacity: .94; transform: translate3d(-50%, -50%, 0) scale(1); } 100% { opacity: 0; transform: translate3d(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y)), 0) scale(.72); } }
@keyframes trl-status-float { 50% { transform: translate3d(0, -5px, 0); } }
@keyframes trl-status-dot { 50% { opacity: .42; transform: scale(.72); } }

@media (prefers-reduced-motion: reduce) {
  .trl-vision-system *, .trl-vision-system *::before, .trl-vision-system *::after { animation: none !important; }
}