/* ==========================================================================
   EWD Site — "Meet Nexa" AI robot figure
   A real rigged 3D model (glTF/GLB, WebGL via Three.js — see robot.js)
   rendered into a canvas. Lives inside the hero's visual column (see
   index.html — [data-robot] sits on .hero__visual, [data-robot-stage] on
   .visual__stage), replacing what used to be the globe/hand composition
   there, with small orbiting status chips framing the robot instead. The
   head bone tracks the cursor by rotating in the actual 3D scene, not a
   CSS transform. Plus glow/rings/particles and a looping background video
   ("Globe Main Video", assets/video/ — see .robot__video-wrap) behind the
   figure. Self-contained; reuses the design tokens declared on :root in
   style.css.
   ========================================================================== */

/* ---------- Background video ---------- */
/* "Globe Main Video" — sits directly behind the figure. Sized to match
   .robot__figure/.robot__ring--inner exactly (both 92%) so its circular
   footprint traces the same boundary the robot stands inside, reading as
   "the robot standing in front of a globe" rather than a separate,
   misaligned decoration. It's the first child of .visual__backdrop and
   carries no z-index of its own, so the glow/rings/particles/platform
   below still paint on top of it as an atmosphere layer, with the robot
   figure itself (z-index: 2, a sibling of .visual__backdrop) in front of
   all of it. */
.robot__video-wrap {
  position: absolute;
  /* width: 92%; */
  width: 68%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 40px 10px rgba(6, 8, 20, 0.65);
  opacity: .3;
}

.robot__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.robot__glow {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 140, 255, 0.28), transparent 70%);
  filter: blur(30px);
  animation: robot-glow-pulse 4.5s var(--ease-in-out) infinite;
}

.robot__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(53, 230, 214, 0.22);
}

.robot__ring--outer {
  width: 106%;
  aspect-ratio: 1;
  animation: robot-spin 22s linear infinite;
}

.robot__ring--inner {
  width: 92%;
  aspect-ratio: 1;
  border-color: rgba(155, 107, 255, 0.22);
  animation: robot-spin-reverse 16s linear infinite;
}

.robot__particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px 3px rgba(53, 230, 214, 0.55);
  opacity: 0.75;
}

.robot__particle--1 { top: 14%; left: 18%; animation: robot-drift-a 7s var(--ease-in-out) infinite; }
.robot__particle--2 { top: 22%; right: 14%; background: var(--purple); box-shadow: 0 0 12px 3px rgba(155, 107, 255, 0.5); animation: robot-drift-b 8.5s var(--ease-in-out) infinite; }
.robot__particle--3 { bottom: 20%; left: 10%; animation: robot-drift-b 6.5s var(--ease-in-out) infinite; }
.robot__particle--4 { bottom: 12%; right: 20%; background: var(--blue); box-shadow: 0 0 12px 3px rgba(79, 140, 255, 0.5); animation: robot-drift-a 9s var(--ease-in-out) infinite; }

.robot__platform {
  position: absolute;
  bottom: 4%;
  width: 46%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79, 140, 255, 0.35), transparent 72%);
  filter: blur(3px);
  animation: robot-platform-pulse 4.5s var(--ease-in-out) infinite;
}

/* ---------- Figure: WebGL canvas rendering the rigged 3D model ---------- */

.robot__figure {
  position: relative;
  z-index: 2;
  width: 92%;
}

.robot__float {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  animation: robot-float 5s var(--ease-in-out) infinite;
  opacity: 0;
  transform: translateY(28px) scale(0.94);
}

[data-robot].is-animating .robot__float {
  animation: robot-float 5s var(--ease-in-out) infinite, robot-figure-intro 0.9s var(--ease-out) forwards;
}

.robot__canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}

/* Shown in place of the canvas if WebGL isn't available (see robot.js) — a
   flat glyph rather than nothing, so the stage never reads as broken. */

.robot__fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--cyan);
  opacity: 0.85;
}

[data-robot].no-webgl .robot__fallback {
  display: flex;
}

[data-robot].no-webgl .robot__canvas {
  display: none;
}

/* ---------- Orbiting status chips ---------- */
/* Small pill labels that travel in a slow circle just outside
   .robot__ring--outer, framing the figure — deliberately compact (icon +
   one line, no subtext) rather than the bigger card treatment used
   elsewhere on the site, and capped at 3 so they read as accents around
   the robot instead of competing with it. */

.orbit-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  inset: 0;
}

.orbit-chip {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  offset-path: circle(46% at 50% 50%);
  offset-rotate: 0deg;
  offset-anchor: center;
  animation-name: orbit-travel;
  animation-duration: var(--duration, 30s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: auto;
}

.orbit-chip__pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 17px;
    border-radius: 999px;
    background: rgba(15, 18, 28, 0.68);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), scale 0.25s var(--ease-out);
}

.orbit-chip__pill svg {
  color: #39b54b;
  flex-shrink: 0;
}

.orbit-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.orbit-chip__dot--live {
  background: #39b54b;
  box-shadow: 0 0 8px 2px rgba(53, 230, 122, 0.75);
  animation: pulse-dot 2s ease-in-out infinite;
}

.orbit-chip:hover {
  animation-play-state: paused;
}

.orbit-chip:hover .orbit-chip__pill {
  color: var(--text);
  border-color: #39b54b;
  background: #0E0628;
  scale: 1.08;
}

/* Without a running animation, each chip's --delay (used only inside
   animation-delay) has no effect, so all 3 would otherwise collapse onto
   the same start point. Spread them explicitly instead. */
[data-reduced-motion="true"] .orbit-chip {
  animation: none;
}

[data-reduced-motion="true"] .orbit-chip:nth-child(1) { offset-distance: 4%; }
[data-reduced-motion="true"] .orbit-chip:nth-child(2) { offset-distance: 37%; }
[data-reduced-motion="true"] .orbit-chip:nth-child(3) { offset-distance: 70%; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .robot__figure,
  .robot__video-wrap {
    /* width: 86%; */
    width: 90%;
  }

  .orbit-chip__pill {
    font-size: 0.6rem;
    padding: 0.24rem 0.5rem;
  }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes robot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes robot-spin {
  to { transform: rotate(360deg); }
}

@keyframes robot-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes robot-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes robot-platform-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

@keyframes orbit-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes robot-figure-intro {
  0% { opacity: 0; transform: translateY(28px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes robot-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -14px); }
}

@keyframes robot-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, 10px); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .robot__glow,
  .robot__ring--outer,
  .robot__ring--inner,
  .robot__particle,
  .robot__platform,
  .robot__float,
  .orbit-chip__dot--live {
    animation: none !important;
  }

  .robot__float {
    opacity: 1;
    transform: none;
  }
}