/* Optional, non-interactive decoration with a radar pointer on supported devices. */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-stream {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
  border-radius: inherit;
  mask-image: linear-gradient(90deg, transparent 54%, #000 72%);
}

/* A legible, static schematic remains available without JavaScript or motion. */
.hero__system {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  border-color: rgb(255 117 173 / 0.23);
  background: linear-gradient(145deg, #1b151e, #101016 62%);
}

.system-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.system-heading .system-label { margin-bottom: 0; }
.system-indicator { width: 6px; height: 6px; border: 1px solid var(--accent-strong); border-radius: 50%; }
.system-caption { margin: 6px 0 18px; font-size: 0.85rem; color: var(--muted); }

.signal-board {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgb(255 117 173 / 0.12);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at center, rgb(255 79 154 / 0.06), transparent 70%),
    linear-gradient(rgb(255 117 173 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 117 173 / 0.04) 1px, transparent 1px),
    #0c0c12;
  background-size: auto, 18px 18px, 18px 18px, auto;
}

.signal-traces { stroke: rgb(255 117 173 / 0.6); stroke-width: 1.5; }
.signal-traces__secondary { stroke: rgb(255 117 173 / 0.18); stroke-width: 1; }
.signal-arrows { stroke: var(--accent-strong); stroke-linecap: round; stroke-linejoin: round; }
.signal-node > rect { fill: #17141d; stroke: #634153; stroke-width: 1; }
.signal-icon { fill: none; stroke: #ff98c2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signal-node text { fill: var(--muted); font: 600 10px var(--mono); text-anchor: middle; letter-spacing: 0.02em; }
.signal-center { fill: var(--subtle); font: 9px var(--mono); letter-spacing: 0.18em; text-anchor: middle; }
.signal-packet { visibility: hidden; fill: #ffe1ef; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 5px #ff4f9a); }

.hero__system ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.hero__system li { min-height: 43px; gap: 10px; font-size: 0.88rem; }
.hero__system li span { font-size: 0.66rem; }

/* No ARIA live region: this is an illustration, not actual robot telemetry. */
.hero[data-animations="running"] .signal-packet { visibility: visible; }
.hero[data-animations="running"] .system-indicator { background: var(--accent-strong); box-shadow: 0 0 12px rgb(255 79 154 / 0.65); }
.hero[data-animations="running"][data-signal-stage="sense"] .signal-node--sense > rect,
.hero[data-animations="running"][data-signal-stage="decide"] .signal-node--decide > rect,
.hero[data-animations="running"][data-signal-stage="act"] .signal-node--act > rect,
.hero[data-animations="running"][data-signal-stage="verify"] .signal-node--verify > rect { fill: #412035; stroke: var(--accent-strong); stroke-width: 2; }
.hero[data-animations="running"][data-signal-stage="sense"] .system-step--sense,
.hero[data-animations="running"][data-signal-stage="decide"] .system-step--decide,
.hero[data-animations="running"][data-signal-stage="act"] .system-step--act,
.hero[data-animations="running"][data-signal-stage="verify"] .system-step--verify { color: var(--accent-strong); border-color: var(--accent); }

@media (max-width: 899px) {
  .hero__system { justify-self: start; }
  .hero-stream { mask-image: none; opacity: 0.65; }
}

.radar-cursor {
  position: fixed;
  z-index: 9999;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  contain: layout style;
}

.radar-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgb(255 45 120 / 0.3));
}

.radar-cursor .r-ring { fill: none; stroke: rgb(255 45 120 / 0.5); stroke-width: 1.4; }
.radar-cursor .r-ring2 { fill: none; stroke: rgb(255 45 120 / 0.24); stroke-width: 1; }
.radar-cursor .r-tick { fill: none; stroke: rgb(255 45 120 / 0.65); stroke-width: 1.3; stroke-linecap: round; }
.radar-cursor .r-line { fill: none; stroke: #ff2d78; stroke-width: 1.6; stroke-linecap: round; }
.radar-cursor .r-seg { fill: #ff2d78; fill-opacity: 0.16; }
.radar-cursor .r-blip { fill: #ff2d78; }
.radar-cursor .r-dot { fill: #f0f0f0; }

.motion-toggle {
  display: none;
  min-height: 44px;
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 0.75rem var(--mono);
  cursor: pointer;
}

.motion-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.hero-stream,
.radar-cursor {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stream:not([hidden]),
  .motion-toggle:not([hidden]) {
    display: block;
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-radar-active="true"],
  html[data-radar-active="true"] * {
    cursor: none !important;
  }

  .radar-cursor:not([hidden]) {
    display: block;
  }

  .radar-cursor:not([hidden]) .r-sweep {
    transform-origin: 16px 16px;
    animation: radar-sweep 2.6s linear infinite;
  }

  .radar-cursor:not([hidden]) .r-blip {
    animation: radar-blip 2.6s linear infinite;
  }

  .radar-cursor:not([hidden]) .r-blip--second {
    animation-delay: 1.3s;
  }
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

@keyframes radar-blip {
  0%, 8%, 34%, 100% { opacity: 0.12; }
  14% { opacity: 1; }
}