/* ng-eye.css — SENTINEL PRIME's eye (2026-09-06)
 *
 * A machine lens, not a cartoon eye: angular housing, an eight-blade aperture
 * that irises down when it thinks, and mechanical shutters that snap for a
 * blink. Lives large inside the mobile voice overlay (#nvm-stage) — the thing
 * you look at while you talk to it.
 *
 * Colour comes from the AURA palette via --x-* so it re-skins with every theme
 * (the ng-settings inline --x-cyan bug is why these are read as vars, never
 * hardcoded). --eye-hue is swapped by health state.
 */
#ngeye{
  --eye-hue:var(--x-cyan,#37e8ff);
  --eye-deep:var(--x-violet,#8f6dff);
  --eye-shell:#0a1424;
  position:relative; width:min(64vw,258px); aspect-ratio:1; margin:0 auto;
  display:grid; place-items:center; pointer-events:none;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--eye-hue) 30%,transparent));
  transition:filter .5s ease;
}
#ngeye svg{width:100%; height:100%; overflow:visible}

/* health recolours the whole lens */
#ngeye[data-health=warn]{--eye-hue:var(--x-amber,#ffb454)}
#ngeye[data-health=crit]{--eye-hue:var(--x-red,#ff5470)}
#ngeye[data-health=crit]{animation:eye-alarm 1.1s ease-in-out infinite}
@keyframes eye-alarm{0%,100%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--eye-hue) 30%,transparent))}
                     50%   {filter:drop-shadow(0 0 34px color-mix(in srgb,var(--eye-hue) 65%,transparent))}}

/* ---- parts ---- */
#ngeye .eh-ring{fill:none; stroke:color-mix(in srgb,var(--eye-hue) 45%,transparent); stroke-width:2.5}
#ngeye .eh-ring2{fill:none; stroke:color-mix(in srgb,var(--eye-deep) 40%,transparent); stroke-width:1.2}
#ngeye .eh-tick{stroke:color-mix(in srgb,var(--eye-hue) 55%,transparent); stroke-width:2.4; stroke-linecap:round}
#ngeye .eh-plate{fill:var(--eye-shell)}
#ngeye .eh-glass{fill:url(#eg-glass)}
#ngeye .eh-blade{fill:color-mix(in srgb,var(--eye-shell) 88%,var(--eye-hue));
                 stroke:color-mix(in srgb,var(--eye-hue) 40%,transparent); stroke-width:.6}
#ngeye .eh-slat{stroke:color-mix(in srgb,var(--eye-hue) 16%,transparent); stroke-width:.8}
#ngeye .eh-iris{fill:url(#eg-iris)}
#ngeye .eh-pupil{fill:#02060d}
#ngeye .eh-core{fill:var(--eye-hue)}
#ngeye .eh-spark{fill:#fff; opacity:.85}
#ngeye .eh-scan{fill:color-mix(in srgb,var(--eye-hue) 16%,transparent)}
#ngeye .eh-lid{fill:var(--eye-shell); stroke:color-mix(in srgb,var(--eye-hue) 35%,transparent); stroke-width:1.5}

/* the housing counter-rotates slowly; blades spin only while thinking */
#ngeye .eh-outer{animation:eye-spin 48s linear infinite}
#ngeye[data-s=thinking] .eh-blades{animation:eye-spin 2.6s linear infinite}
#ngeye[data-s=listening] .eh-outer{animation-duration:18s}
@keyframes eye-spin{to{transform:rotate(360deg)}}

/* the lens breathes; listening tightens it, speaking pulses the core */
#ngeye .eh-iris-g{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#ngeye[data-s=listening] .eh-iris-g{transform:scale(1.1)}
#ngeye[data-s=thinking]  .eh-iris-g{transform:scale(.82)}
#ngeye[data-s=speaking] .eh-core{animation:eye-talk .38s ease-in-out infinite}
@keyframes eye-talk{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

#ngeye[data-s=down] , #ngeye[data-s=boot]{opacity:.45; filter:grayscale(.6)}

/* status word under the lens */
#ngeye-label{
  margin-top:10px; text-align:center; font:10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em; color:color-mix(in srgb,var(--x-cyan,#37e8ff) 75%,transparent);
  text-transform:uppercase; min-height:14px;
}
#ngeye-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 0 2px}

/* the overlay already has a decorative blob; the eye replaces it */
#nvm-root #nvm-bit{display:none !important}

@media (prefers-reduced-motion: reduce){
  #ngeye .eh-outer,#ngeye .eh-blades,#ngeye .eh-core,#ngeye[data-health=crit]{animation:none !important}
}