/* Load after robot-materials.css and after your site's existing hero stylesheet. */
/* Add huva-agent-hero to the existing hero container, excluding the site header. */
.huva-agent-hero {
  container: huva-hero / inline-size;
  position: relative;
}

.huva-agent-hero .huva-stage,
.huva-agent-hero .huva-stage *,
.huva-agent-hero .huva-stage *::before,
.huva-agent-hero .huva-stage *::after {
  box-sizing: border-box;
}

.huva-agent-hero .huva-stage {
  --huva-bot-scale: 1;
  position: absolute;
  right: 4.1%;
  top: 9cqw;
  width: 44cqw;
  height: 31.8cqw;
  margin: 0;
  padding: 0;
  z-index: 2;
  font-family: inherit;
}

.huva-agent-hero .huva-team { position: absolute; inset: 0; }
.huva-agent-hero .huva-team::before,
.huva-agent-hero .huva-team::after {
  content: "";
  position: absolute;
  border: 1px solid #e5e0ef;
  border-radius: 50%;
  pointer-events: none;
}
.huva-agent-hero .huva-team::before {
  width: 100%; height: 14cqw; left: 0; bottom: 3.9cqw;
  transform: rotate(-9deg);
}
.huva-agent-hero .huva-team::after {
  width: 88%; height: 9cqw; left: 7%; bottom: 6cqw;
  transform: rotate(-9deg);
}

.huva-agent-hero .huva-agent {
  appearance: none;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 14.3cqw;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2cqw;
  background: transparent;
  color: #000;
  font: inherit;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: translate 250ms;
  z-index: 2;
}
.huva-agent-hero .huva-agent:focus-visible {
  outline: 3px solid #3000ff;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .huva-agent-hero .huva-agent:hover { translate: 0 -5px; }
}
.huva-agent-hero .huva-agent[data-agent="creator"] {
  left: 0; top: 13.5cqw; rotate: -10deg;
}
.huva-agent-hero .huva-agent[data-agent="researcher"] {
  left: 16cqw; top: 8cqw; z-index: 3;
}
.huva-agent-hero .huva-agent[data-agent="operator"] {
  right: 0; top: 11.4cqw; rotate: 9deg;
}
.huva-agent-hero .huva-bot-scale {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 12.4cqw;
  height: 17.4cqw;
}
.huva-agent-hero .huva-agent[data-agent="creator"] .huva-bot-scale {
  height: 15.4cqw;
}
.huva-agent-hero .huva-creator { transform: scale(.82); }
.huva-agent-hero .huva-bot {
  zoom: var(--huva-bot-scale);
  transform-origin: 50% 50%;
}
.huva-agent-hero .huva-agent-label {
  margin-top: 1.05cqw;
  padding: .72cqw .95cqw;
  border: 1px solid #e7e2f0;
  border-radius: 30px;
  background: #fff;
  color: #000;
  font-size: max(11px, 1.07cqw);
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 0 #f4f1f8;
  transition: background 200ms, color 200ms;
}
.huva-agent-hero .huva-agent-label::before { content: "+"; margin-right: .5cqw; }
.huva-agent-hero .huva-agent[aria-pressed="true"] .huva-agent-label {
  background: #3000ff; border-color: #3000ff; color: #fff;
}
.huva-agent-hero .huva-agent[aria-pressed="true"] .huva-agent-label::before { content: "✓"; }
.huva-agent-hero .huva-spark {
  position: absolute; right: 3cqw; top: 3cqw;
  font-size: 2cqw; color: #3000ff; rotate: 13deg; line-height: 1;
  pointer-events: none;
}
.huva-agent-hero .huva-spark.small {
  right: 14cqw; top: 25cqw; font-size: 1.2cqw; color: #8e81b9;
}

/* Mobile: the component follows the existing copy in normal document flow. */
@container huva-hero (max-width: 760px) {
  .huva-agent-hero .huva-stage {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 510px;
    height: 300px;
    margin: 35px auto 0;
  }
  .huva-agent-hero .huva-agent { width: 33.333%; }
  .huva-agent-hero .huva-agent[data-agent="researcher"] { left: 33.333%; top: 0; }
  .huva-agent-hero .huva-agent[data-agent="creator"] { left: 0; top: 67px; }
  .huva-agent-hero .huva-agent[data-agent="operator"] { right: 0; top: 67px; }
  .huva-agent-hero .huva-bot-scale { width: 124px; height: 174px; }
  .huva-agent-hero .huva-agent[data-agent="creator"] .huva-bot-scale { height: 174px; }
  .huva-agent-hero .huva-creator { transform: scale(.92); }
  .huva-agent-hero .huva-agent-label { font-size: 11px; padding: 8px 7px; margin-top: 10px; }
  .huva-agent-hero .huva-team::before { height: 150px; bottom: 30px; }
  .huva-agent-hero .huva-team::after { height: 100px; bottom: 54px; }
  .huva-agent-hero .huva-spark { top: 17px; right: 30px; font-size: 23px; }
  .huva-agent-hero .huva-spark.small { top: 230px; right: 37%; font-size: 15px; }
}

@container huva-hero (max-width: 430px) {
  .huva-agent-hero .huva-stage { --huva-bot-scale: .8; height: 241px; margin-top: 32px; }
  .huva-agent-hero .huva-agent[data-agent="creator"],
  .huva-agent-hero .huva-agent[data-agent="operator"] { top: 45px; }
  .huva-agent-hero .huva-bot-scale { width: 100%; height: 140px; }
  .huva-agent-hero .huva-agent[data-agent="creator"] .huva-bot-scale { height: 140px; }
  .huva-agent-hero .huva-agent-label { margin-top: 7px; }
  .huva-agent-hero .huva-team::before { height: 110px; bottom: 32px; }
  .huva-agent-hero .huva-team::after { height: 72px; bottom: 52px; }
  .huva-agent-hero .huva-spark.small { top: 193px; }
}

@container huva-hero (max-width: 350px) {
  .huva-agent-hero .huva-stage { --huva-bot-scale: .7; }
  .huva-agent-hero .huva-agent[data-agent="creator"],
  .huva-agent-hero .huva-agent[data-agent="operator"] { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .huva-agent-hero .huva-stage *,
  .huva-agent-hero .huva-stage *::before,
  .huva-agent-hero .huva-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .huva-agent-hero .huva-agent:hover { translate: none; }
}