/* ==========================================================
   HRMTN — Notenic Hero animation, embed-safe internal styles
   ----------------------------------------------------------
   All selectors scoped under #hrmtn so the hero internals can
   live inside any host page without colliding with site CSS.
   Wrapper rules (position, width, aspect-ratio, background,
   overflow) belong in the host page's own stylesheet — this
   file only paints the SVG internals.
   ----------------------------------------------------------
   To change the canvas background color, set it on the
   #hrmtn rule in your host CSS:
       #hrmtn { background: #232323; }
   The hero auto-detects that color at runtime and matches its
   state-node interiors to it.
   ========================================================== */

#hrmtn {
  --hrmtn-bg:     none;
  --hrmtn-ink:    rgba(170, 195, 235, 0.07);
  --hrmtn-ink-2:  rbga(232, 225, 210, 0.20) /*#9c9ca3*/;
  --hrmtn-ink-3:  rbga(232, 225, 210, 0.30) /*#54545b*/;
  --hrmtn-ink-4:  rbga(232, 225, 210, 0.40) /*#2a2a30*/;
  --hrmtn-warn:   #5e5a47;

  color: var(--hrmtn-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
}
#hrmtn *,
#hrmtn *::before,
#hrmtn *::after { box-sizing: border-box; }

/* ---- Defensive reset over host's tag-level styles -------------
   Any descendant SVG element without one of our classes defaults
   to invisible paint + our font. Class rules below opt back in. */
#hrmtn svg,
#hrmtn svg * {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
#hrmtn svg path,
#hrmtn svg line,
#hrmtn svg rect,
#hrmtn svg circle,
#hrmtn svg ellipse,
#hrmtn svg polygon,
#hrmtn svg polyline,
#hrmtn svg use {
  fill: none !important;
  stroke: none !important;
  vector-effect: non-scaling-stroke;
}
#hrmtn svg text { fill: currentColor !important; stroke: none !important; }

/* ---- Layer overlays (warm/cool lighting + grain) -------------- */
#hrmtn .nep-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 12% 8%, rgba(232, 225, 210, 0.07), transparent 55%),
    radial-gradient(55% 70% at 92% 95%, rgba(129, 126, 124, 0.35), transparent 60%),
    radial-gradient(120% 130% at 50% 50%, transparent 30%, rgba(0,0,0,0.0045) 100%);
  pointer-events: none;
}
#hrmtn .nep-grain {
  position: absolute; inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
#hrmtn svg.nep-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Typography classes (SVG text) ---- */
#hrmtn .nep-lbl       { font-size: 11px  !important; letter-spacing: 0.24em !important; fill: var(--hrmtn-warn) !important; text-transform: uppercase !important; }
#hrmtn .nep-lbl-sm    { font-size: 9.5px !important; letter-spacing: 0.28em !important; fill: var(--hrmtn-warn) !important; text-transform: uppercase !important; }
#hrmtn .nep-lbl-faint { fill: var(--hrmtn-warn) !important; }
#hrmtn .nep-meta-l    { text-anchor: start  !important; }
#hrmtn .nep-meta-r    { text-anchor: end    !important; }
#hrmtn .nep-meta-c    { text-anchor: middle !important; }

/* ---- Static geometry ---- */
#hrmtn .nep-frame            { fill: none !important; stroke: rgba(129, 126, 124,0.18) !important; stroke-width: 0.75 !important; }
#hrmtn .nep-path-edge-fade   { fill: none !important; stroke: url(#nep-path-grad) !important; stroke-width: 1.25 !important; }
#hrmtn .nep-gate-line        { fill: none !important; stroke: rgba(255, 100, 0,0.18) !important; stroke-width: 0.75 !important; }
#hrmtn .nep-gate-line-dim    { fill: none !important; stroke: rgba(129, 126, 124,0.07) !important; stroke-width: 0.75 !important; }
#hrmtn .nep-governance-line  { fill: none !important; stroke: rgba(129, 126, 124,0.10) !important; stroke-width: 0.75 !important; stroke-dasharray: 2 5 !important; }
#hrmtn .nep-corner           { fill: none !important; stroke: rgba(129, 126, 124,0.10) !important; stroke-width: 0.75 !important; }
#hrmtn .nep-corner path      { fill: none !important; stroke: rgba(129, 126, 124,0.10) !important; stroke-width: 0.75 !important; }

/* ---- Runtime container frames (GRE + Agent Runtime corner brackets) ---- */
#hrmtn .nep-runtime-frame       { fill: none !important; stroke: rgba(129, 126, 124,0.92) !important; stroke-width: 1 !important; }
#hrmtn .nep-runtime-frame path  { fill: none !important; stroke: rgba(129, 126, 124,0.32) !important; stroke-width: 1 !important; stroke-linecap: square !important; }

/* ---- Governance authority dots ---- */
#hrmtn .nep-auth-dot-core { fill: rgba(255, 100, 0, 0.90) !important; stroke: none !important; }
#hrmtn .nep-auth-dot-ring { fill: none !important; stroke: rgba(255, 100, 0,0.68) !important; stroke-width: 0.75 !important; }

/* ---- State nodes on path ---- */
#hrmtn .nep-state-node       { fill: var(--hrmtn-bg) !important; stroke: rgba(129, 126, 124,0.05) !important; stroke-width: 1.2 !important; }
#hrmtn .nep-state-node-inner { fill: rgba(129, 126, 124,0.5) !important; stroke: none !important; }
#hrmtn .nep-state-node-ring  { fill: none !important; stroke: rgba(129, 126, 124,0.12) !important; stroke-width: 0.75 !important; }

/* ---- Tool dispatch ---- */
#hrmtn .nep-tool-tile       { fill: rgba(0,0,0,0.45) !important; stroke: rgba(129, 126, 124,0.10) !important; stroke-width: 0.75 !important; }
#hrmtn .nep-tool-tile-glyph { fill: rgba(129, 126, 124,0.45) !important; }
#hrmtn .nep-branch          { fill: none !important; stroke: rgba(129, 126, 124,0.16) !important; stroke-width: 0.75 !important; }

/* ---- Pulse particles (strokes never on these) ---- */
#hrmtn .nep-pulse-grp ellipse,
#hrmtn .nep-pulse-grp circle { stroke: none !important; }

/* ---- Echo lines on either side of the execution path ---- */
#hrmtn svg #nep-execution-line > line { fill: none !important; }
#hrmtn svg #nep-execution-line > line[stroke^="rgba"] { stroke: rgba(255, 100, 0,0.05) !important; stroke-width: 0.5 !important; }

/* ---- Animations ---- */
@keyframes nep-pulseTravel {
  0%   { transform: translateX(var(--x0)); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(var(--x1)); opacity: 0; }
}
@keyframes nep-authThrob {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.55); opacity: 1; }
}
@keyframes nep-authRingPulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes nep-barrierFlash {
  0%, 100% { opacity: 0; transform: scaleY(0.4); }
  10%      { opacity: 1; transform: scaleY(1); }
  35%      { opacity: 0; transform: scaleY(1); }
}
@keyframes nep-waveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(60px); }
}
@keyframes nep-wavePulse {
  0%, 100% { transform: scaleY(0.85); opacity: 0.65; }
  50%      { transform: scaleY(1.35); opacity: 1; }
}
@keyframes nep-toolPing {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes nep-branchSweep {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}