.robot-three-canvas {
  position: fixed;
  z-index: 5;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  outline: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity .7s ease;
}

body.has-three-robot .robot-three-canvas {
  opacity: 1;
}

body.has-three-robot .hero-stage .robot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.no-three-robot .robot-three-canvas,
body.no-three-robot .three-robot-hit-target,
body.no-three-robot .three-robot-status {
  display: none;
}

.three-robot-hit-target,
.three-robot-status {
  --robot-x: 78vw;
  --robot-y: 56vh;
  --robot-hit-width: 260px;
  --robot-hit-height: 360px;
  --robot-label-offset: 188px;
  --robot-status-shift: -50%;
}

.three-robot-hit-target[data-route="live"],
.three-robot-status[data-route="live"] {
  --robot-x: 91vw;
  --robot-y: 52vh;
  --robot-hit-width: 180px;
  --robot-hit-height: 258px;
  --robot-label-offset: 139px;
  --robot-status-shift: -88%;
}

.three-robot-hit-target[data-route="abilities"],
.three-robot-status[data-route="abilities"] {
  --robot-x: 9vw;
  --robot-y: 56vh;
  --robot-hit-width: 174px;
  --robot-hit-height: 250px;
  --robot-label-offset: 135px;
  --robot-status-shift: -12%;
}

.three-robot-hit-target[data-route="workflow"],
.three-robot-status[data-route="workflow"] {
  --robot-x: 91vw;
  --robot-y: 24vh;
  --robot-hit-width: 160px;
  --robot-hit-height: 230px;
  --robot-label-offset: 126px;
  --robot-status-shift: -88%;
}

.three-robot-hit-target[data-route="trust"],
.three-robot-status[data-route="trust"] {
  --robot-x: 9vw;
  --robot-y: 52vh;
  --robot-hit-width: 174px;
  --robot-hit-height: 250px;
  --robot-label-offset: 135px;
  --robot-status-shift: -12%;
}

.three-robot-hit-target[data-route="downloads"],
.three-robot-status[data-route="downloads"] {
  --robot-x: 91vw;
  --robot-y: 62vh;
  --robot-hit-width: 168px;
  --robot-hit-height: 240px;
  --robot-label-offset: 130px;
  --robot-status-shift: -88%;
}

.three-robot-hit-target {
  position: fixed;
  z-index: 8;
  left: var(--orbita-runtime-robot-x, var(--robot-x));
  top: var(--orbita-runtime-robot-y, var(--robot-y));
  width: var(--robot-hit-width);
  height: var(--robot-hit-height);
  padding: 0;
  border: 0;
  border-radius: 46%;
  outline: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    left .22s cubic-bezier(.2, .72, .2, 1),
    top .22s cubic-bezier(.2, .72, .2, 1),
    width .7s ease,
    height .7s ease,
    opacity .35s ease;
}

.three-robot-hit-target::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(122, 231, 255, .18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 231, 255, .09), transparent 66%);
  box-shadow: 0 0 34px rgba(122, 231, 255, .08);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .25s ease, transform .35s ease;
}

body.has-three-robot .three-robot-hit-target {
  opacity: 1;
  pointer-events: none;
}

body.is-robot-hovered {
  cursor: pointer;
}

.three-robot-hit-target:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.three-robot-hit-target:focus-visible {
  outline: 1px solid rgba(200, 255, 83, .74);
  outline-offset: 5px;
}

.three-robot-status {
  position: fixed;
  z-index: 9;
  left: var(--orbita-runtime-robot-x, var(--robot-x));
  top: var(--orbita-runtime-robot-y, var(--robot-y));
  width: max-content;
  max-width: min(280px, 75%);
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform:
    translate(var(--robot-status-shift), calc(-50% - var(--robot-label-offset) + 8px));
  border: 1px solid rgba(122, 231, 255, .24);
  border-radius: 999px;
  background: rgba(6, 9, 12, .76);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
  backdrop-filter: blur(15px);
  color: #b9c1c8;
  font-size: 9px;
  opacity: 0;
  pointer-events: none;
  transition:
    left .22s cubic-bezier(.2, .72, .2, 1),
    top .22s cubic-bezier(.2, .72, .2, 1),
    opacity .5s ease,
    transform .5s ease,
    border-color .25s ease;
}

body.has-three-robot .three-robot-status {
  opacity: 1;
  transform:
    translate(var(--robot-status-shift), calc(-50% - var(--robot-label-offset)));
}

body.has-three-robot .three-robot-status.is-travelling {
  opacity: 0;
  transform:
    translate(var(--robot-status-shift), calc(-50% - var(--robot-label-offset) + 8px))
    scale(.94);
}

@media (min-width: 721px) {
  body.has-three-robot .three-robot-status[data-route="workflow"] {
    transform: translate(calc(-100% - 84px), -50%);
  }

  body.has-three-robot .three-robot-status.is-travelling[data-route="workflow"] {
    transform: translate(calc(-100% - 76px), -50%) scale(.94);
  }
}

.three-robot-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.three-robot-status[data-mood="thinking"] i,
.three-robot-status[data-mood="dreamy"] i,
.three-robot-status[data-mood="sleepy"] i {
  background: var(--violet);
  box-shadow: 0 0 10px var(--violet);
}

.three-robot-status[data-mood="working"] i,
.three-robot-status[data-mood="curious"] i,
.three-robot-status[data-mood="waving"] i {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.three-robot-status[data-mood="surprised"] i {
  transform: scale(1.5);
  background: #fff2c9;
  box-shadow: 0 0 18px #ffcf7e;
}

.three-robot-status[data-mood="pleased"] i,
.three-robot-status[data-mood="celebrate"] i {
  transform: scale(1.35);
  background: var(--acid);
  box-shadow: 0 0 16px var(--acid);
}

.three-robot-status.is-delighted {
  border-color: rgba(200, 255, 83, .62);
  color: #fff;
}

@media (max-width: 720px) {
  .three-robot-status {
    bottom: auto;
    max-width: min(220px, 68vw);
    padding: 7px 10px;
    font-size: 8px;
  }

  .three-robot-hit-target,
  .three-robot-status {
    --robot-x: 82vw;
    --robot-y: 82vh;
    --robot-hit-width: 122px;
    --robot-hit-height: 180px;
    --robot-label-offset: 100px;
    --robot-status-shift: -50%;
  }

  .three-robot-hit-target[data-route="hero"] {
    --robot-y: 90vh;
    --robot-hit-width: 112px;
    --robot-hit-height: 164px;
  }

  .three-robot-status[data-route="hero"] {
    --robot-x: 34vw;
    --robot-y: 88vh;
    --robot-label-offset: 0;
  }

  .three-robot-hit-target[data-route="live"],
  .three-robot-status[data-route="live"],
  .three-robot-hit-target[data-route="workflow"],
  .three-robot-status[data-route="workflow"] {
    --robot-x: 92vw;
    --robot-y: 49vh;
    --robot-hit-width: 62px;
    --robot-hit-height: 88px;
    --robot-label-offset: 0;
  }

  .three-robot-hit-target[data-route="abilities"],
  .three-robot-status[data-route="abilities"],
  .three-robot-hit-target[data-route="trust"],
  .three-robot-status[data-route="trust"] {
    --robot-x: 8vw;
    --robot-y: 64vh;
    --robot-hit-width: 62px;
    --robot-hit-height: 88px;
    --robot-label-offset: 0;
  }

  .three-robot-hit-target[data-route="downloads"],
  .three-robot-status[data-route="downloads"] {
    --robot-x: 92vw;
    --robot-y: 72vh;
    --robot-hit-width: 62px;
    --robot-hit-height: 88px;
    --robot-label-offset: 0;
  }

  .three-robot-status[data-route="live"],
  .three-robot-status[data-route="abilities"],
  .three-robot-status[data-route="workflow"],
  .three-robot-status[data-route="trust"],
  .three-robot-status[data-route="downloads"] {
    --robot-x: 50vw;
    --robot-label-offset: 0;
  }
}

.three-robot-hit-target[data-slot="0"],
.three-robot-status[data-slot="0"] {
  --robot-y: 20vh;
}

.three-robot-hit-target[data-slot="1"],
.three-robot-status[data-slot="1"] {
  --robot-y: 34vh;
}

.three-robot-hit-target[data-slot="2"],
.three-robot-status[data-slot="2"] {
  --robot-y: 49vh;
}

.three-robot-hit-target[data-slot="3"],
.three-robot-status[data-slot="3"] {
  --robot-y: 64vh;
}

.three-robot-hit-target[data-slot="4"],
.three-robot-status[data-slot="4"] {
  --robot-y: 79vh;
}

@media (prefers-reduced-motion: reduce) {
  .robot-three-canvas,
  .three-robot-hit-target,
  .three-robot-status,
  .three-robot-hit-target::before {
    transition: none !important;
  }
}