.tt-hero-visual--robot { isolation: isolate; pointer-events: none; }
.tt-hero-visual--robot .tt-hero-visual__orbit { top: 6%; right: 1%; animation-duration: 28s; }
.tt-hero-visual--robot .tt-hero-visual__orbit-inner { animation-duration: 20s; }

.tt-ai-robot__aura {
  position: absolute;
  z-index: 0;
  inset: 8% -2% 3% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 51% 50%, rgba(220, 190, 123, .23), rgba(220, 190, 123, .07) 42%, transparent 72%);
  filter: blur(18px);
  animation: tt-robot-aura 5s ease-in-out infinite;
}

.tt-ai-robot__track {
  position: absolute;
  z-index: 2;
  top: 6%;
  right: 9%;
  height: min(108%, 560px);
  aspect-ratio: 2 / 3;
}

.tt-ai-robot__gesture {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.tt-ai-robot__gesture:focus-visible {
  outline: 2px solid #c99321;
  outline-offset: 4px;
  border-radius: 36%;
}

.tt-ai-robot__puppet {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 18px 20px rgba(45, 48, 58, .16));
}

.tt-ai-robot__arm,
.tt-ai-robot__forearm { transform-box: view-box; }
.tt-ai-robot__arm {
  transform-origin: 63% 36%;
  animation: tt-robot-wave-arm 18s ease-in-out infinite;
}
.tt-ai-robot__forearm {
  transform-origin: 65% 45%;
  animation: tt-robot-wave-forearm 18s ease-in-out infinite;
}
.tt-ai-robot__gesture.is-reacting .tt-ai-robot__arm { animation: tt-robot-click-arm 1.8s ease-in-out; }
.tt-ai-robot__gesture.is-reacting .tt-ai-robot__forearm { animation: tt-robot-click-forearm 1.8s ease-in-out; }

.tt-ai-robot__expression { opacity: 0; pointer-events: none; }
.tt-ai-robot__expression path {
  fill: none;
  stroke: #8bdcff;
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px #36aafa);
}
.tt-ai-robot__expression--wink { animation: tt-robot-wink 18s linear infinite; }
.tt-ai-robot__expression--blink { animation: tt-robot-blink 18s linear infinite; }
.tt-ai-robot__gesture.is-reacting .tt-ai-robot__expression--wink { animation: tt-robot-click-wink 1.8s ease-in-out; }

.tt-ai-robot__shadow {
  position: absolute;
  right: 17%;
  top: calc(6% + min(108%, 560px) - 14px);
  width: 48%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(24, 35, 54, .24), rgba(24, 35, 54, .07) 62%, transparent 76%);
  filter: blur(7px);
}

.tt-ai-robot__orbit-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ddb96c;
  box-shadow: 0 0 14px rgba(221, 185, 108, .7);
}
.tt-ai-robot__orbit-node--one { top: 16%; left: 11%; }
.tt-ai-robot__orbit-node--two { right: 12%; bottom: 11%; width: 5px; height: 5px; }

@keyframes tt-robot-wave-arm {
  0%, 13%, 30%, 100% { transform: rotate(0); }
  18%, 26% { transform: rotate(-49deg); }
  22% { transform: rotate(-53deg); }
}
@keyframes tt-robot-wave-forearm {
  0%, 13%, 30%, 100% { transform: rotate(0); }
  18%, 26% { transform: rotate(-94deg); }
  20%, 24% { transform: rotate(-106deg); }
  22% { transform: rotate(-84deg); }
}
@keyframes tt-robot-click-arm {
  0%, 100% { transform: rotate(0); }
  28%, 72% { transform: rotate(-49deg); }
}
@keyframes tt-robot-click-forearm {
  0%, 100% { transform: rotate(0); }
  28%, 72% { transform: rotate(-94deg); }
  42%, 58% { transform: rotate(-106deg); }
  50% { transform: rotate(-84deg); }
}
@keyframes tt-robot-wink {
  0%, 17%, 27%, 100% { opacity: 0; }
  19%, 25% { opacity: 1; }
}
@keyframes tt-robot-blink {
  0%, 45%, 47%, 80%, 82%, 100% { opacity: 0; }
  46%, 81% { opacity: 1; }
}
@keyframes tt-robot-click-wink {
  0%, 20%, 75%, 100% { opacity: 0; }
  28%, 67% { opacity: 1; }
}
@keyframes tt-robot-aura {
  0%, 100% { opacity: .7; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (max-width: 991px) {
  .tt-ai-robot__track { right: 0; top: 0; height: 101%; }
  .tt-ai-robot__shadow { top: calc(101% - 10px); }
  .tt-ai-robot__aura { inset: 8% -9% 4%; }
}
@media (max-width: 719px) {
  .tt-hero-visual--robot .tt-hero-visual__orbit { top: -2%; right: -4%; width: 108%; }
  .tt-ai-robot__track { right: 10%; top: -2%; height: 107%; }
  .tt-ai-robot__shadow { right: 22%; top: calc(105% - 10px); width: 56%; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-hero-visual--robot .tt-hero-visual__orbit,
  .tt-hero-visual--robot .tt-hero-visual__orbit-inner,
  .tt-ai-robot__aura,
  .tt-ai-robot__puppet g { animation: none !important; }
}