/* ===== PORTED from neo/neo-v1.2.css — V7.0.105 visual cleanup ===== */
/* HomeLynx Neo v1.3 — core / ring visual system (field/beam removed V7.0.102)
   V7.0.103: gyroscopic precession + orbital marker + legible core roll.
   V7.0.105: CLEAN CORE. Founder real-device finding: the v1.2 core-deco
   panel lines read on-device as a dirty "axis" cross on the sphere, and the
   fine repeating stripe layer read as pixelation/seams when zoomed. Both are
   gone. The graphite sphere is now a pure smooth radial gradient with one
   refined sheen. Core roll stays legible by rolling the sheen itself — a
   smooth off-center highlight drifting across a clean sphere reads as
   motion with zero line-based decoration. No panel lines. No cross lines.
   No stripes. No seams. Clean, handsome, maturing, robot to the core.
   Scope: standalone component bucket. No external dependencies. */

:root {
  --neo-teal: #08a98f;
  --neo-teal-bright: #42d9c0;
  --neo-sensor: #00ff88;
  --neo-ink: #0b1f2a;
  --neo-graphite-1: #151d22;
  --neo-graphite-2: #2d373c;
  --neo-graphite-3: #5c666a;
  --neo-amber: #e2a44c;
  --neo-line: rgba(8,169,143,.34);
}

.hlx-neo {
  --neo-size: 76px;
  --neo-accent: var(--neo-teal);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--neo-size);
  height: var(--neo-size);
  contain: layout paint style;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--neo-ink);
}

.hlx-neo[data-size="sm"] { --neo-size: 48px; }
.hlx-neo[data-size="md"] { --neo-size: 76px; }
.hlx-neo[data-size="lg"] { --neo-size: 116px; }

.hlx-neo__stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: calc(var(--neo-size) * 5.5);
  transform-style: preserve-3d;
}

.hlx-neo__core-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

/* GYROSCOPE — two nested 3D wrappers around the ring.
   .hlx-neo__ring-orbit rotates the ring PLANE around the Y axis, so the
   plane itself swings around the sphere (the ellipse visibly changes
   orientation and passes in front of / behind the core).
   .hlx-neo__ring-tilt adds an X-axis wobble (nutation).
   The ring keeps its own local Z spin. The three combine into real
   precession — not a symmetric circle spinning inside its own plane. */
.hlx-neo__ring-orbit,
.hlx-neo__ring-tilt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.hlx-neo__ring-orbit { transform: rotateY(var(--neo-orbit-rot, 0deg)); }
.hlx-neo__ring-tilt { transform: rotateX(var(--neo-precess-rot, 0deg)); }

/* OUTER RING = state instrument */
.hlx-neo__ring {
  position: absolute;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  border: max(1px, calc(var(--neo-size) * .015)) solid rgba(17,45,52,.52);
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--neo-size) * .012)) rgba(255,255,255,.16),
    0 0 calc(var(--neo-size) * .10) rgba(24,184,170,.12);
  transform: rotateX(66deg) rotateZ(calc(var(--neo-ring-rot, 0deg) - 18deg));
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
}

.hlx-neo__ring::before {
  content: "";
  position: absolute;
  inset: max(1px, calc(var(--neo-size) * .035));
  border-radius: 50%;
  border: max(1px, calc(var(--neo-size) * .014)) solid color-mix(in srgb, var(--neo-accent) 62%, transparent);
  filter: drop-shadow(0 0 calc(var(--neo-size) * .06) color-mix(in srgb, var(--neo-accent) 34%, transparent));
  opacity: .62;
}

/* ORBITAL MARKER — one asymmetric teal instrument marker riding the ring.
   This is what lets the human eye immediately recognize rotation: a bright
   satellite visibly traveling around Neo while THINKING. It inherits the
   ring's full precession, so it sweeps in front of and behind the core.
   Hidden at rest so the idle orb keeps its approved calm. */
.hlx-neo__marker {
  position: absolute;
  left: 50%;
  top: -5.5%;
  width: 10.5%;
  aspect-ratio: 2.6;
  transform: translate(-50%, -50%) rotate(6deg);
  border-radius: 999px;
  background: linear-gradient(100deg, var(--neo-teal) 0%, var(--neo-teal-bright) 55%, #c9fff4 100%);
  box-shadow:
    0 0 calc(var(--neo-size) * .09) rgba(66,217,192,.95),
    0 0 calc(var(--neo-size) * .20) rgba(66,217,192,.42);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

/* CORE = where Neo lives. The graphite sphere is clean and handsome:
   pure smooth radial-gradient shading with one soft refined sheen — no
   stripes, no panel lines, no cross lines, no seams. The v1.2 decoration
   lines read on a real iPhone as a dirty "axis" cross and the fine
   repeating stripe layer read as pixelation; both were removed in V7.0.105.
   Surface motion lives on .hlx-neo__core-deco: a smooth, deliberately
   off-center sheen that rolls with the core driver channel, so the roll
   reads as a drifting highlight across a clean sphere — never as lines. */
.hlx-neo__core {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(calc(var(--neo-size) * .04));
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.30) 0 4%, transparent 19%),
    radial-gradient(circle at 68% 74%, rgba(8,169,143,.14), transparent 30%),
    radial-gradient(circle at 43% 38%, #737c7f 0, #4d575b 25%, #313b3f 55%, #1a2327 100%);
  box-shadow:
    inset calc(var(--neo-size) * -.03) calc(var(--neo-size) * -.05) calc(var(--neo-size) * .11) rgba(0,0,0,.48),
    inset calc(var(--neo-size) * .03) calc(var(--neo-size) * .025) calc(var(--neo-size) * .08) rgba(255,255,255,.17),
    0 calc(var(--neo-size) * .06) calc(var(--neo-size) * .11) rgba(5,18,23,.18);
  will-change: transform, filter;
}

/* Sheen-roll layer. V7.0.105: NO line-based decoration of any kind — the
   v1.2 axis cross lines and panel ring are deleted. Two soft radial sheen
   patches, deliberately off-center so the layer's rotation reads as a
   highlight drifting across the clean sphere. All gradient edges are wide
   and feathered; there is not a single hard line in this rule. It rotates
   on --neo-coreroll-rot (same slow driver channel as before), so the
   motion architecture is unchanged — only the surface is clean. */
.hlx-neo__core-deco {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  transform: rotate(var(--neo-coreroll-rot, 0deg));
  background:
    radial-gradient(ellipse 34% 54% at 29% 43%, rgba(255,255,255,.17), transparent 71%),
    radial-gradient(ellipse 30% 42% at 72% 66%, rgba(150,244,229,.09), transparent 70%);
  mix-blend-mode: screen;
  opacity: .6;
  will-change: transform;
  pointer-events: none;
}


.hlx-neo__sensor {
  position: absolute;
  width: 5.5%;
  aspect-ratio: 1;
  min-width: 2px;
  border-radius: 50%;
  background: #071114;
  box-shadow: inset 0 0 0 1px rgba(220,240,240,.16);
  opacity: .92;
  z-index: 4;
}

.hlx-neo__sensor::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: inherit;
  background: var(--neo-sensor);
  box-shadow: 0 0 6px color-mix(in srgb, var(--neo-sensor) 86%, transparent);
  opacity: .30;
  transition: opacity .24s ease, transform .24s ease;
}

/* deliberately asymmetric: not a face */
.hlx-neo__sensor:nth-child(2) { left: 29%; top: 31%; }
.hlx-neo__sensor:nth-child(3) { left: 57%; top: 19%; width: 4.3%; }
.hlx-neo__sensor:nth-child(4) { left: 69%; top: 58%; width: 6.2%; }
.hlx-neo__sensor:nth-child(5) { left: 35%; top: 67%; width: 3.9%; }
.hlx-neo__sensor:nth-child(6) { left: 18%; top: 45%; width: 3.5%; }

.hlx-neo__found-mark {
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  left: 36%;
  top: 36%;
  opacity: 0;
  transform: scale(.75) translateZ(calc(var(--neo-size) * .08));
  transition: opacity .18s ease, transform .18s ease;
  z-index: 8;
  pointer-events: none;
}

.hlx-neo__found-mark svg { width: 100%; height: 100%; overflow: visible; }
.hlx-neo__found-mark path {
  fill: none;
  stroke: var(--neo-teal-bright);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(102,243,223,.5));
}

.hlx-neo__label {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: min(260px, 80vw);
  padding: 6px 9px;
  border-radius: 999px;
  color: #456269;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(50,95,99,.12);
  box-shadow: 0 6px 18px rgba(18,44,47,.07);
  font: 600 12px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  letter-spacing: -.01em;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 20;
}

.hlx-neo[data-show-label="true"] .hlx-neo__label {
  opacity: 1;
  transform: translate(-50%, 2px);
}

/* ---------- STATES (V7.0.103) ----------
   The gyroscope (ring + marker) is the primary activity instrument.
   Rotation is driven by the element's rAF loop (eased angular velocity:
   immediate spin-up, smooth spin-down) via --neo-ring-rot / --neo-orbit-rot
   / --neo-precess-rot / --neo-coreroll-rot, so NO rule below may animate
   transform on .hlx-neo__ring, .hlx-neo__ring-orbit, .hlx-neo__ring-tilt,
   .hlx-neo__marker, or .hlx-neo__core-deco — that would fight the driver
   and snap on stop. */

/* IDLE: nearly still. Ambient life = slow sensor shimmer only. */
.hlx-neo[data-activity="idle"] .hlx-neo__ring {
  opacity: .80;
  filter: drop-shadow(0 0 calc(var(--neo-size) * .038) rgba(8,169,143,.20));
}
.hlx-neo[data-activity="idle"] .hlx-neo__core { filter: brightness(1.035); }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor::after { opacity: .22; }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor:nth-child(2)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite .2s; }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor:nth-child(3)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 1.1s; }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor:nth-child(4)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 2.15s; }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor:nth-child(5)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 3.05s; }
.hlx-neo[data-activity="idle"] .hlx-neo__sensor:nth-child(6)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 4.05s; }

/* THINKING: full gyroscopic precession; the marker is the obvious rotation
   reference; the core decoration counter-rotates slowly. Sensors drop to a
   subdued uniform glow — V7.0.103: no more sequential chase, so the sensors
   stop dominating the perception of activity. Motion hierarchy:
   ring > marker > core > sensors. */
.hlx-neo[data-activity="thinking"] .hlx-neo__ring {
  filter: drop-shadow(0 0 calc(var(--neo-size) * .05) rgba(8,169,143,.28));
}
.hlx-neo[data-activity="thinking"] .hlx-neo__marker { opacity: 1; }
.hlx-neo[data-activity="thinking"] .hlx-neo__sensor::after { opacity: .42; }

/* ANSWERING: the gyroscope eases down (driver decelerates); the marker
   dims; the secretary-style typing continues independently of the motion. */
.hlx-neo[data-activity="answering"] .hlx-neo__marker { opacity: .55; }
.hlx-neo[data-activity="answering"] .hlx-neo__sensor::after { opacity: .72; }

/* Found: home-mark cue (approved identity), no transform animation. */
.hlx-neo[data-state="found"] .hlx-neo__sensor::after { opacity: .92; }
.hlx-neo[data-state="found"] .hlx-neo__found-mark {
  opacity: .92;
  transform: scale(1) translateZ(calc(var(--neo-size) * .08));
}

/* Attention: amber accent with a static glow — no motion. */
.hlx-neo[data-state="attention"] { --neo-accent: var(--neo-amber); --neo-sensor: var(--neo-amber); }
.hlx-neo[data-state="attention"] .hlx-neo__ring {
  filter: drop-shadow(0 0 calc(var(--neo-size) * .12) rgba(226,164,76,.55));
}
.hlx-neo[data-state="attention"] .hlx-neo__sensor:nth-child(4)::after { opacity: .82; }

.hlx-neo[data-state="resolved"] .hlx-neo__sensor:nth-child(3)::after { opacity: .58; }

/* Ambient keyframes (opacity/scale on sensor dots only — never the
   ring/core transforms, which belong to the spin driver). */
@keyframes neo-idle-sensor {
  0%,100% { opacity: .16; transform: scale(.78); }
  34% { opacity: .58; transform: scale(1.03); }
  55% { opacity: .28; transform: scale(.90); }
}

/* ---------- REDUCED MOTION ----------
   No continuous rotation (the driver never starts). Thinking is still
   acknowledged immediately: the marker appears at rest, the ring brightens,
   and sensors lift — state change and glow instead of spin. */
@media (prefers-reduced-motion: reduce) {
  .hlx-neo *,
  .hlx-neo *::before,
  .hlx-neo *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .12s !important;
  }
  .hlx-neo[data-activity="thinking"] .hlx-neo__ring {
    filter: drop-shadow(0 0 calc(var(--neo-size) * .09) rgba(8,169,143,.55));
    border-color: rgba(66,217,192,.75);
  }
  .hlx-neo[data-activity="thinking"] .hlx-neo__marker { opacity: 1; }
  .hlx-neo[data-activity="thinking"] .hlx-neo__sensor::after { opacity: .7; }
  .hlx-neo[data-activity="answering"] .hlx-neo__marker { opacity: .5; }
}