/* Coralogix side take: node (scoped to .hero[data-cxv="node"]) */
/* Same layout as the orb take: the node centred on the right, one hairline to the agent, wordmark + one morphing pill under it.
   Geometry in .rt2 design px: node centre (713, 272), node 112px, working arc r ~63, wire y 272 from x 370. */
@media screen { /* all widths; hero-compact.css re-lays it out as a row under the agent window below 1121px */
  /* the card, its wires and labels give way to one node; the card still opens from "See inside" */
  .hero[data-cxv="node"] .rt2 .px:not(.open) { visibility: hidden; opacity: 0; pointer-events: none; }
  .hero[data-cxv="node"] .rt2-link,
  .hero[data-cxv="node"] .rt2 .fl { display: none; }
  /* step ② sits just above the node, as in the orb take */
  .hero[data-cxv="node"] .hero-stage:not(:has(.px.open)) .wl-px { left: 713px; top: 186px !important; }

  .hero[data-cxv="node"] .cxn { --x: 713px; --y: 272px; --nd: 112px; --nx: calc(var(--x) - var(--nd) / 2); --below: calc(var(--y) + var(--nd) / 2); position: absolute; inset: 0; }
  .hero[data-cxv="node"] .rt2:has(.px.open) .cxv-mount > * { opacity: 0; visibility: hidden; }
  .hero[data-cxv="node"] .cxv-mount > * { transition: opacity .35s; }

  /* a faint glow of the data behind the node; it warms while Coralogix works */
  .hero[data-cxv="node"] .cxn-glow {
    position: absolute; left: calc(var(--x) - 300px); top: calc(var(--y) - 300px); width: 600px; height: 600px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(19,233,137,.07), rgba(19,233,137,.025) 55%, transparent);
    opacity: .6; transition: opacity 1.2s;
  }
  .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-glow { opacity: 1; }

  /* the connector: one hairline from the agent window's edge to the node */
  .hero[data-cxv="node"] .cxn-wire {
    position: absolute; left: 370px; top: var(--y); width: calc(var(--nx) - 7px - 10px - 370px); height: 1px; margin-top: -.5px;
    background: linear-gradient(90deg, rgb(var(--ink) / .2), rgb(var(--ink) / .12));
  }
  .hero[data-cxv="node"] .cxn-wire::after {
    content: ""; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(94,242,176,.7), transparent); background-size: 50% 100%; background-repeat: no-repeat;
  }
  .hero[data-cxv="node"] .cxn-wire.lit-out::after { animation: cxnSweepR .52s cubic-bezier(.55,0,.25,1) both; }
  .hero[data-cxv="node"] .cxn-wire.lit-back::after { animation: cxnSweepL .76s cubic-bezier(.55,0,.25,1) both; }
  @keyframes cxnSweepR { 0% { opacity: 1; background-position: -100% 0; } 100% { opacity: 0; background-position: 200% 0; } }
  @keyframes cxnSweepL { 0% { opacity: 1; background-position: 200% 0; } 100% { opacity: 0; background-position: -100% 0; } }
  .hero[data-cxv="node"] .cxn-sock { position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ink) / .3); }
  .hero[data-cxv="node"] .cxn-pkt { position: absolute; left: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; }
  .hero[data-cxv="node"] .cxn-pkt.out { background: var(--fg-0); box-shadow: 0 0 10px rgb(var(--ink) / .6); }
  .hero[data-cxv="node"] .cxn-pkt.back { background: var(--accent); box-shadow: 0 0 12px #13E989, 0 0 2px #13E989; }

  /* the node */
  .hero[data-cxv="node"] .cxn-node {
    position: absolute; left: var(--nx); top: calc(var(--y) - var(--nd) / 2); width: var(--nd); height: var(--nd); border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 30%, rgb(var(--ink) / .09), rgb(var(--ink) / .03)), rgb(14 15 16 / .7);
    box-shadow: inset 0 0 0 1px rgb(var(--ink) / .12), inset 0 1px 0 rgb(var(--ink) / .1), 0 18px 40px -18px rgb(0 0 0 / calc(.9 * var(--sh)));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: box-shadow .6s;
  }
  .hero[data-cxv="node"] .cxn-node img { width: 66px; height: 66px; filter: drop-shadow(0 0 14px rgba(19,233,137,.25)); }
  /* the wordmark under the node, so it reads as Coralogix at a glance */
  .hero[data-cxv="node"] .cxn-word {
    position: absolute; left: calc(var(--x) - 100px); width: 200px; top: calc(var(--below) + 15px); text-align: center;
    font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-0);
  }
  .hero[data-cxv="node"] .cxn-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); overflow: visible; }
  .hero[data-cxv="node"] .cxn-ring circle { fill: none; stroke: var(--lit); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 34 195; opacity: 0; transform-origin: 32px 32px; transition: opacity .5s, stroke-dasharray .6s; }
  .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"]) .cxn-ring circle { opacity: .9; animation: cxnSpin 1.4s linear infinite; }
  .hero[data-cxv="node"] .cxn[data-state="ready"] .cxn-ring circle { opacity: .9; stroke-dasharray: 195 0; animation: none; }
  .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-node { box-shadow: inset 0 0 0 1px rgba(94,242,176,.35), inset 0 1px 0 rgb(var(--ink) / .1), 0 0 40px -10px rgba(19,233,137,.45), 0 18px 40px -18px rgb(0 0 0 / calc(.9 * var(--sh))); }
  @keyframes cxnSpin { to { transform: rotate(360deg); } }

  /* the one pill: action → fact → action … → ready */
  .hero[data-cxv="node"] .cxn-pill {
    position: absolute; left: var(--x); top: calc(var(--below) + 48px); height: 40px; width: 230px; max-width: 470px; transform: translateX(-50%);
    border-radius: 999px; overflow: hidden;
    background: rgb(var(--ink) / .045); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: width .5s cubic-bezier(.2,.7,.2,1), background .5s, box-shadow .5s;
  }
  .hero[data-cxv="node"] .cxn-pill[data-kind="ready"] { background: rgba(19,233,137,.08); box-shadow: inset 0 0 0 1px rgba(94,242,176,.4), 0 0 30px -12px rgba(19,233,137,.7); }
  .hero[data-cxv="node"] .cxn-track { position: absolute; inset: 0 16px; }
  .hero[data-cxv="node"] .cxn-t {
    position: absolute; left: 0; top: 0; height: 40px; max-width: 436px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden;
    font-size: 13.5px; letter-spacing: -.01em; color: rgb(var(--ink) / .8);
    opacity: 0; transform: translateY(6px); filter: blur(2px);
    transition: opacity .32s, transform .45s cubic-bezier(.2,.7,.2,1), filter .32s;
  }
  .hero[data-cxv="node"] .cxn-t.in { opacity: 1; transform: none; filter: none; transition-delay: .1s; }
  .hero[data-cxv="node"] .cxn-t.out { opacity: 0; transform: translateY(-6px); filter: blur(2px); transition-delay: 0s; }
  .hero[data-cxv="node"] .cxn-brand { font-weight: 600; color: var(--fg-0); }
  .hero[data-cxv="node"] .cxn-sep { color: rgb(var(--ink) / .3); }
  .hero[data-cxv="node"] .cxn-dim { color: rgb(var(--ink) / .5); }
  .hero[data-cxv="node"] .cxn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cxn-cat, var(--accent)); box-shadow: 0 0 8px var(--cxn-cat, var(--accent)); flex: none; }
  .hero[data-cxv="node"] .cxn-sig { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink) / .45); margin-right: 2px; flex: none; }
  .hero[data-cxv="node"] .cxn-fact { overflow: hidden; text-overflow: ellipsis; }
  .hero[data-cxv="node"] .cxn-fact b { color: var(--fg-0); font-weight: 600; }
  .hero[data-cxv="node"] .cxn-ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; flex: none; }
  .hero[data-cxv="node"] .cxn-ready { font-weight: 500; color: var(--fg-0); }
  /* idle is live, not dead: a mint status dot with a slow radar ping, brighter copy, a calm counter */
  .hero[data-cxv="node"] .cxn-pill[data-kind="idle"] { background: rgba(19,233,137,.05); box-shadow: inset 0 0 0 1px rgba(94,242,176,.24), 0 0 26px -14px rgba(19,233,137,.6); }
  .hero[data-cxv="node"] .cxn-live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(19,233,137,.8); flex: none; margin-right: 1px; }
  .hero[data-cxv="node"] .cxn-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: cxnPing 2.2s cubic-bezier(.2,.7,.2,1) infinite; }
  @keyframes cxnPing { 0% { opacity: .75; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }
  .hero[data-cxv="node"] .cxn-watch { color: rgb(var(--ink) / .86); }
  .hero[data-cxv="node"] .cxn-watch b { font-weight: 500; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--lit); }
  .hero[data-cxv="node"] .cxn-tick { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0; color: rgb(var(--ink) / .45); font-variant-numeric: tabular-nums; }
  .hero[data-cxv="node"] .cxn-rate { display: inline-block; min-width: 4.2ch; text-align: right; color: rgb(var(--ink) / .62); }
  /* the node is "on" at rest: a gentle breathing glow */
  .hero[data-cxv="node"] .cxn[data-state="idle"] .cxn-node { animation: cxnBreathe 3.6s ease-in-out infinite; }
  @keyframes cxnBreathe {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(94,242,176,.2), inset 0 1px 0 rgb(var(--ink) / .1), 0 0 26px -12px rgba(19,233,137,.3), 0 18px 40px -18px rgb(0 0 0 / calc(.9 * var(--sh))); }
    50% { box-shadow: inset 0 0 0 1px rgba(94,242,176,.32), inset 0 1px 0 rgb(var(--ink) / .1), 0 0 44px -10px rgba(19,233,137,.5), 0 18px 40px -18px rgb(0 0 0 / calc(.9 * var(--sh))); }
  }
  .hero[data-cxv="node"] .cxn-pill[data-kind="done"] { background: rgba(19,233,137,.05); box-shadow: inset 0 0 0 1px rgba(94,242,176,.25); }

  /* a quiet caption + the way in */
  .hero[data-cxv="node"] .cxn-meta {
    position: absolute; left: var(--x); top: calc(var(--below) + 98px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: rgb(var(--ink) / .32);
  }
  .hero[data-cxv="node"] .cxn-meta button {
    pointer-events: auto; font: inherit; font-family: "Geist", -apple-system, sans-serif; font-size: 12px; letter-spacing: -.005em; color: rgb(var(--ink) / .55);
    background: none; border: 0; padding: 4px 0; cursor: pointer; transition: color .2s;
  }
  .hero[data-cxv="node"] .cxn-meta button span { display: inline-block; transition: transform .25s; }
  .hero[data-cxv="node"] .cxn-meta button:hover, .hero[data-cxv="node"] .cxn-meta button:focus-visible { color: var(--lit); }
  .hero[data-cxv="node"] .cxn-meta button:hover span { transform: translate(2px, -2px); }

  /* light theme */
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-node { background: radial-gradient(circle at 50% 30%, #fff, #f4f6f5); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1), 0 14px 30px -16px rgb(0 0 0 / .25); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-node { box-shadow: inset 0 0 0 1px rgba(11,158,94,.35), 0 0 36px -12px rgba(19,233,137,.5), 0 14px 30px -16px rgb(0 0 0 / .25); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-pill { background: rgb(255 255 255 / .75); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-pill[data-kind="ready"] { background: #e9fbf2; box-shadow: inset 0 0 0 1px rgba(11,158,94,.4); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-pill[data-kind="done"] { background: #f1fbf6; box-shadow: inset 0 0 0 1px rgba(11,158,94,.25); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-node img { filter: none; }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-pill[data-kind="idle"] { background: #f2fcf7; box-shadow: inset 0 0 0 1px rgba(11,158,94,.28); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-watch b { color: #0b9e5e; }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-live { box-shadow: 0 0 6px rgba(19,233,137,.7); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn[data-state="idle"] .cxn-node { animation-name: cxnBreatheL; }
  @keyframes cxnBreatheL {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(11,158,94,.2), 0 0 24px -12px rgba(19,233,137,.35), 0 14px 30px -16px rgb(0 0 0 / .25); }
    50% { box-shadow: inset 0 0 0 1px rgba(11,158,94,.32), 0 0 40px -10px rgba(19,233,137,.55), 0 14px 30px -16px rgb(0 0 0 / .25); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero[data-cxv="node"] .cxn-live::after, .hero[data-cxv="node"] .cxn[data-state="idle"] .cxn-node { animation: none !important; }
  }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-pkt.back { box-shadow: 0 0 8px rgba(19,233,137,.8); }
}

@media (min-width: 1121px) {
  /* the live link: the hairline warms to mint while Coralogix works */
  .hero[data-cxv="node"] .cxn-wire { transition: background .6s; }
  .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-wire { background: linear-gradient(90deg, rgba(94,242,176,.22), rgba(94,242,176,.45)); }
}
@media (min-width: 1121px) {
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-glow { opacity: .35; }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-glow { opacity: .55; }
}
@media (min-width: 1121px) {
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn-wire { background: rgb(var(--ink) / .22); }
  :root[data-theme="light"] .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-wire { background: linear-gradient(90deg, rgba(11,158,94,.35), rgba(11,158,94,.6)); }
}

/* Light skin: the node's faint captions are raised to --fg-3 (≥4.5:1) */
:root[data-theme="light"] .hero[data-cxv="node"] :is(.cxn-sep, .cxn-dim, .cxn-sig, .cxn-tick, .cxn-meta) { color: var(--fg-3); }