/* HomeLynx Neo v1.0 — core / ring / field visual system
   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);
  --neo-field-soft: rgba(8,169,143,.10);
}

.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__ring-wrap,
.hlx-neo__core-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

/* 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(-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;
}

.hlx-neo__ring::after {
  content: "";
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 44%;
  top: -5%;
  background: var(--neo-teal-bright);
  box-shadow: 0 0 calc(var(--neo-size) * .12) rgba(102,243,223,.85);
  opacity: .0;
  transform: translateZ(calc(var(--neo-size) * .03));
}

/* CORE = where Neo lives */
.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%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.030) 0 1px, rgba(255,255,255,0) 1px 3px),
    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;
}

/* subtle panel engineering without insect-like greebles */
.hlx-neo__core::before {
  content: "";
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  opacity: .50;
  background:
    linear-gradient(64deg, transparent 0 43%, rgba(214,230,232,.22) 43.2% 44%, transparent 44.2% 100%),
    linear-gradient(154deg, transparent 0 57%, rgba(214,230,232,.15) 57.2% 58%, transparent 58.2% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 63%, rgba(255,255,255,.08) 64% 65%, transparent 66%);
  mix-blend-mode: screen;
}

.hlx-neo__core::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,.055) 46%, transparent 68%);
  opacity: .55;
  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(1) { left: 29%; top: 31%; }
.hlx-neo__sensor:nth-child(2) { left: 57%; top: 19%; width: 4.3%; }
.hlx-neo__sensor:nth-child(3) { left: 69%; top: 58%; width: 6.2%; }
.hlx-neo__sensor:nth-child(4) { left: 35%; top: 67%; width: 3.9%; }
.hlx-neo__sensor:nth-child(5) { 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 ---------- */
 .hlx-neo[data-state="idle"] .hlx-neo__ring {
  animation: neo-idle-orbit 20s ease-in-out infinite;
  opacity: .80;
  filter: drop-shadow(0 0 calc(var(--neo-size) * .038) rgba(8,169,143,.20));
}
.hlx-neo[data-state="idle"] .hlx-neo__core { animation: neo-idle-core 8s ease-in-out infinite; filter: brightness(1.035); }
.hlx-neo[data-state="idle"] .hlx-neo__sensor::after { opacity: .22; }
.hlx-neo[data-state="idle"] .hlx-neo__sensor:nth-child(1)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite .2s; }
.hlx-neo[data-state="idle"] .hlx-neo__sensor:nth-child(2)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 1.1s; }
.hlx-neo[data-state="idle"] .hlx-neo__sensor:nth-child(3)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 2.15s; }
.hlx-neo[data-state="idle"] .hlx-neo__sensor:nth-child(4)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 3.05s; }
.hlx-neo[data-state="idle"] .hlx-neo__sensor:nth-child(5)::after { animation: neo-idle-sensor 6.2s ease-in-out infinite 4.05s; }

.hlx-neo[data-state="working"] .hlx-neo__ring {
  animation: neo-work-orbit 2.6s linear infinite;
  filter: drop-shadow(0 0 calc(var(--neo-size) * .05) rgba(8,169,143,.22));
}
.hlx-neo[data-state="working"] .hlx-neo__core { animation: neo-core-thrum 2.2s ease-in-out infinite; }
.hlx-neo[data-state="working"] .hlx-neo__sensor::after { opacity: .52; }
.hlx-neo[data-state="working"] .hlx-neo__sensor:nth-child(1)::after { animation: neo-sensor-seq 1.18s ease-in-out infinite .00s; }
.hlx-neo[data-state="working"] .hlx-neo__sensor:nth-child(2)::after { animation: neo-sensor-seq 1.18s ease-in-out infinite .16s; }
.hlx-neo[data-state="working"] .hlx-neo__sensor:nth-child(3)::after { animation: neo-sensor-seq 1.18s ease-in-out infinite .32s; }
.hlx-neo[data-state="working"] .hlx-neo__sensor:nth-child(4)::after { animation: neo-sensor-seq 1.18s ease-in-out infinite .48s; }
.hlx-neo[data-state="working"] .hlx-neo__sensor:nth-child(5)::after { animation: neo-sensor-seq 1.18s ease-in-out infinite .64s; }

.hlx-neo[data-state="searching"] .hlx-neo__ring {
  animation: neo-search-sweep 1.65s cubic-bezier(.45,.05,.55,.95) infinite;
}
.hlx-neo[data-state="searching"] .hlx-neo__ring::after { opacity: .95; }
.hlx-neo[data-state="searching"] .hlx-neo__sensor::after { opacity: .42; }
.hlx-neo[data-state="searching"] .hlx-neo__sensor:nth-child(1)::after,
.hlx-neo[data-state="searching"] .hlx-neo__sensor:nth-child(2)::after,
.hlx-neo[data-state="searching"] .hlx-neo__sensor:nth-child(3)::after,
.hlx-neo[data-state="searching"] .hlx-neo__sensor:nth-child(4)::after,
.hlx-neo[data-state="searching"] .hlx-neo__sensor:nth-child(5)::after { animation: neo-sensor-seq 1.05s ease-in-out infinite; }

.hlx-neo[data-state="comparing"] .hlx-neo__ring {
  animation: neo-compare-axis 2.25s ease-in-out infinite;
}
.hlx-neo[data-state="comparing"] .hlx-neo__sensor:nth-child(1)::after,
.hlx-neo[data-state="comparing"] .hlx-neo__sensor:nth-child(3)::after { opacity: .82; }

.hlx-neo[data-state="found"] .hlx-neo__ring {
  animation: neo-found-lock .62s cubic-bezier(.18,.84,.22,1) both;
}
.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));
}

.hlx-neo[data-state="attention"] { --neo-accent: var(--neo-amber); --neo-sensor: var(--neo-amber); }
.hlx-neo[data-state="attention"] .hlx-neo__ring {
  animation: neo-attention-once 1.15s ease-out 1 both;
}
.hlx-neo[data-state="attention"] .hlx-neo__sensor:nth-child(3)::after { opacity: .82; }

.hlx-neo[data-state="resolved"] .hlx-neo__ring {
  animation: neo-resolve 1.05s ease-out 1 both;
}
.hlx-neo[data-state="resolved"] .hlx-neo__sensor:nth-child(2)::after { opacity: .58; }

/* task dialects layered onto Working */
.hlx-neo[data-mode="gathering"] .hlx-neo__core-wrap { animation: neo-gather-in 2.4s ease-in-out infinite; }
.hlx-neo[data-mode="checking"] .hlx-neo__ring { animation-duration: 2.15s; }

@keyframes neo-idle-orbit {
  0%,100% { transform: rotateX(67deg) rotateY(-6deg) rotateZ(-18deg) scale(1); opacity: .76; }
  35% { transform: rotateX(66deg) rotateY(-2deg) rotateZ(-8deg) scale(1.006); opacity: .82; }
  68% { transform: rotateX(68deg) rotateY(-9deg) rotateZ(-24deg) scale(.998); opacity: .79; }
}

@keyframes neo-idle-core {
  0%,100% { transform: translateZ(calc(var(--neo-size) * .04)) scale(1); filter: brightness(.98); }
  48% { transform: translateZ(calc(var(--neo-size) * .045)) scale(1.012); filter: brightness(1.06); }
}

@keyframes neo-idle-sensor {
  0%,100% { opacity: .16; transform: scale(.78); }
  34% { opacity: .58; transform: scale(1.03); }
  55% { opacity: .28; transform: scale(.90); }
}

@keyframes neo-idle-breathe {
  0%,100% { transform: rotateX(66deg) rotateZ(-18deg) scale(1); opacity: .64; }
  50% { transform: rotateX(66deg) rotateZ(-14deg) scale(1.018); opacity: .82; }
}

@keyframes neo-work-orbit {
  from { transform: rotateX(63deg) rotateY(-7deg) rotateZ(-18deg); }
  to { transform: rotateX(63deg) rotateY(-7deg) rotateZ(342deg); }
}

@keyframes neo-core-thrum {
  0%,100% { transform: translateZ(calc(var(--neo-size) * .04)) scale(1); filter: brightness(.98); }
  50% { transform: translateZ(calc(var(--neo-size) * .04)) scale(1.018); filter: brightness(1.08); }
}

@keyframes neo-sensor-seq {
  0%,100% { opacity: .22; transform: scale(.80); }
  45% { opacity: .92; transform: scale(1.08); }
}

@keyframes neo-search-sweep {
  0% { transform: rotateX(76deg) rotateY(-18deg) rotateZ(-35deg); }
  50% { transform: rotateX(54deg) rotateY(22deg) rotateZ(145deg); }
  100% { transform: rotateX(76deg) rotateY(-18deg) rotateZ(325deg); }
}

@keyframes neo-compare-axis {
  0%,100% { transform: rotateX(67deg) rotateY(-16deg) rotateZ(-15deg); }
  50% { transform: rotateX(50deg) rotateY(18deg) rotateZ(16deg); }
}

@keyframes neo-found-lock {
  0% { transform: rotateX(58deg) rotateY(10deg) rotateZ(82deg) scale(1.02); filter: brightness(1.05); }
  56% { transform: rotateX(76deg) rotateY(0deg) rotateZ(0deg) scale(.94); filter: brightness(1.35); }
  100% { transform: rotateX(72deg) rotateY(0deg) rotateZ(0deg) scale(.975); filter: brightness(1.13); }
}

@keyframes neo-attention-once {
  0% { transform: rotateX(66deg) rotateZ(-18deg) scale(1); filter: drop-shadow(0 0 0 rgba(226,164,76,0)); }
  42% { transform: rotateX(66deg) rotateZ(-18deg) scale(1.045); filter: drop-shadow(0 0 calc(var(--neo-size) * .12) rgba(226,164,76,.62)); }
  100% { transform: rotateX(66deg) rotateZ(-18deg) scale(1); filter: drop-shadow(0 0 0 rgba(226,164,76,0)); }
}

@keyframes neo-resolve {
  0% { transform: rotateX(72deg) rotateY(0deg) rotateZ(0deg) scale(.975); filter: brightness(1.18); }
  45% { transform: rotateX(66deg) rotateY(-4deg) rotateZ(-10deg) scale(1.01); filter: brightness(1.25); }
  100% { transform: rotateX(66deg) rotateY(0deg) rotateZ(-18deg) scale(1); filter: brightness(1); }
}

@keyframes neo-gather-in {
  0%,100% { transform: scale(1); }
  50% { transform: scale(.965); }
}

/* Core → Field target treatment. Global class is intentionally subtle. */
.neo-field-target {
  position: relative;
  transition: box-shadow .36s ease, transform .36s ease, background-color .36s ease, border-color .36s ease;
}

.neo-field-target.neo-field-active {
  box-shadow: 0 0 0 1px rgba(8,169,143,.22), 0 10px 28px rgba(8,169,143,.08) !important;
  border-color: rgba(8,169,143,.26) !important;
}

.neo-field-target.neo-field-focus {
  box-shadow: 0 0 0 1px rgba(8,169,143,.40), 0 12px 34px rgba(8,169,143,.13) !important;
  transform: translateY(-1px);
}

.neo-field-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147482000;
  overflow: visible;
}

.neo-field-overlay path {
  fill: none;
  stroke: var(--neo-teal);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  opacity: .34;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  animation: neo-field-flow 2.3s linear infinite;
}

.neo-field-overlay path.neo-field-primary {
  opacity: .62;
  stroke-width: 1.5;
}

@keyframes neo-field-flow {
  to { stroke-dashoffset: -44; }
}

@media (prefers-reduced-motion: reduce) {
  .hlx-neo *,
  .neo-field-overlay path {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .12s !important;
  }

  .hlx-neo[data-state="working"] .hlx-neo__ring,
  .hlx-neo[data-state="searching"] .hlx-neo__ring,
  .hlx-neo[data-state="comparing"] .hlx-neo__ring {
    transform: rotateX(66deg) rotateZ(-12deg);
    filter: brightness(1.08);
  }
}