/* Decorative cameos only. No changes to copy, spheres, navigation or layout height. */
.capabilities-intro { position: relative; display: flow-root; }
.robot-cameo { display: none; position: absolute; pointer-events: none; }
.robot-cameo-stage { position: relative; width: 100%; aspect-ratio: 10 / 9; }
.robot-cameo-art { position: relative; z-index: 1; pointer-events: auto; }
.robot-cameo .promo-robot-face { width: 100% !important; height: auto; }
.robot-cameo-aura, .robot-cameo-shadow { position: absolute; pointer-events: none; }
.robot-cameo-aura { inset: -16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(154, 164, 233, .15), transparent 68%); }
.robot-cameo-shadow { bottom: -18px; left: 22%; width: 56%; height: 14px; border-radius: 50%; background: rgba(35, 39, 59, .17); filter: blur(10px); }

/* The middle marker becomes the existing emotional robot, not another life orb. */
#past-present { scroll-margin-top: 105px; }
.paradigm-transfer .robot-cameo-bridge { display: block; position: relative; z-index: 3; width: 88px; margin: 22px 0; }
.robot-cameo-bridge .robot-bridge-trigger { display: block; width: 100%; padding: 0; border: 0; border-radius: 38%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.robot-cameo-bridge .robot-bridge-trigger:focus-visible { outline: 2px solid #8997d0; outline-offset: 8px; }
.robot-cameo-bridge .robot-cameo-art { filter: drop-shadow(0 8px 10px rgba(27, 33, 51, .17)); }
.robot-cameo-bridge .robot-cameo-aura { inset: -26%; background: radial-gradient(ellipse, rgba(147, 159, 220, .13), transparent 67%); }
.robot-cameo-bridge .robot-cameo-shadow { bottom: -9px; height: 8px; filter: blur(6px); opacity: .65; }

@media (max-width: 760px) {
  .paradigm-transfer .robot-cameo-bridge { margin: 14px 8px; }
}

@media (min-width: 1200px) {
  .robot-cameo { display: block; }
  .robot-cameo-capabilities { top: 38px; right: 56px; width: 190px; transform: rotate(8deg); }
  /* Use the component's own head surface as backing on the light section.
     Eyes, fringe, outline, turn geometry and palette remain the source identity. */
  .robot-cameo-capabilities .robot-cameo-art { filter: drop-shadow(0 18px 22px rgba(27, 33, 51, .16)); }
  .robot-cameo-showcase { width: 300px; top: 120px; right: -88px; transform: rotate(-18deg); z-index: 4; }
  .robot-cameo-showcase .robot-cameo-aura { inset: -30%; background: radial-gradient(ellipse, rgba(139, 150, 218, .18), transparent 60%); }
  .robot-cameo-showcase .robot-cameo-art { filter: drop-shadow(-18px 15px 28px rgba(0, 0, 0, .4)); }
  .robot-cameo-showcase .robot-cameo-shadow { display: none; }
  .robot-cameo-closing { width: 132px; left: -125px; top: 160px; transform: rotate(-10deg); }
  .robot-cameo-closing .robot-cameo-aura { inset: -40%; }
  .robot-cameo-closing .robot-cameo-shadow { background: rgba(0, 0, 0, .4); }
}

@media (prefers-reduced-motion: reduce) {
  .robot-cameo * { animation: none !important; transition: none !important; }
}