/* Artemis AI homepage: live layer. Same palette (#0e0e10 / #111, #2f6fed, #3dbe78, #f08a3c), same Inter type. */

/* ---------- CTA energy (below the hero only; hero and header untouched) ---------- */
#content > section:not(.hero) .pill { position: relative; overflow: hidden; isolation: isolate; transition: transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, background 200ms ease, border-color 200ms ease; }
#content > section:not(.hero) .pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 111, 237, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
}
#content > section:not(.hero) .pill:hover::before { opacity: 1; }
#content > section:not(.hero) .pill:hover { transform: translateY(-1px); }
#content > section:not(.hero) .pill:active { transform: translateY(0) scale(0.97); }
#content > section:not(.hero) .pill-invert:hover { box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.25), 0 10px 34px rgba(47, 111, 237, 0.45); }
#content > section:not(.hero) .pill-primary:hover { box-shadow: 0 8px 26px rgba(47, 111, 237, 0.35); }
.close-band .pill-invert { animation: live-cta 3.2s ease-in-out infinite; }
@keyframes live-cta { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 162, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(122, 162, 255, 0.14), 0 0 30px rgba(47, 111, 237, 0.35); } }
#content > section:not(.hero) .pill .ripple {
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: rgba(122, 162, 255, 0.55);
  pointer-events: none;
  animation: live-ripple 600ms ease-out forwards;
  z-index: -1;
}
@keyframes live-ripple { to { transform: scale(22); opacity: 0; } }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* tabs */
.tab { transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] { box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12); }
.cluster-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0);
  animation: live-frame 4s ease-in-out infinite;
}
@keyframes live-frame { 50% { box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.25), inset 0 0 60px rgba(47, 111, 237, 0.08); } }

/* ---------- stages (the dark feature cards) ---------- */
.stage {
  position: relative;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), rgba(47, 111, 237, 0.16), transparent 55%);
  opacity: 0.6;
  transition: opacity 300ms ease;
}
.stage:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(17, 17, 17, 0.25), 0 0 0 1px rgba(47, 111, 237, 0.22); }
.stage:hover::before { opacity: 1; }
.stage > * { position: relative; }

.led { position: relative; box-shadow: 0 0 10px currentColor; color: #2f6fed; }
.led-green { color: #3dbe78; }
.led-orange { color: #f08a3c; }
.led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: live-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.stage-tag { transition: border-color 200ms ease, background 200ms ease; }
.stage:hover .stage-tag { border-color: rgba(122, 162, 255, 0.6); background: rgba(47, 111, 237, 0.12); }

/* Voice waveform: bars keep their inline height, the animation scales them */
.wave span {
  transform-origin: bottom;
  animation: live-wave 1.25s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(47, 111, 237, 0.25);
}
.wave span:nth-child(1) { animation-delay: -0.10s; animation-duration: 1.10s; }
.wave span:nth-child(2) { animation-delay: -0.55s; animation-duration: 1.35s; }
.wave span:nth-child(3) { animation-delay: -0.30s; animation-duration: 0.95s; }
.wave span:nth-child(4) { animation-delay: -0.85s; animation-duration: 1.25s; }
.wave span:nth-child(5) { animation-delay: -0.20s; animation-duration: 1.05s; }
.wave span:nth-child(6) { animation-delay: -0.65s; animation-duration: 1.40s; }
.wave span:nth-child(7) { animation-delay: -0.40s; animation-duration: 1.15s; }
.wave span:nth-child(8) { animation-delay: -0.95s; animation-duration: 0.90s; }
.wave span:nth-child(9) { animation-delay: -0.15s; animation-duration: 1.30s; }
.wave span:nth-child(10) { animation-delay: -0.70s; animation-duration: 1.00s; }
.wave span:nth-child(11) { animation-delay: -0.45s; animation-duration: 1.20s; }
.wave span:nth-child(12) { animation-delay: -0.25s; animation-duration: 1.45s; }
@keyframes live-wave { 0%, 100% { transform: scaleY(0.55); opacity: 0.75; } 50% { transform: scaleY(1); opacity: 1; } }
.providers li { transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.providers li.is-live, .providers li:hover { border-color: rgba(61, 190, 120, 0.7); background: rgba(61, 190, 120, 0.1); }

/* Artemis engine card */
.minis span { transition: border-color 200ms ease, background 200ms ease; }
.minis span.is-live { border-color: rgba(122, 162, 255, 0.75); background: rgba(47, 111, 237, 0.16); }
.sheet { transition: border-color 260ms ease, background 260ms ease; }
.sheet.is-live { border-color: rgba(47, 111, 237, 0.45); background: rgba(47, 111, 237, 0.08); }

/* The Bow console: a scan line across the run rows */
.console { position: relative; }
.console::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(240, 138, 60, 0.08), transparent);
  pointer-events: none;
  animation: live-console 5s ease-in-out infinite;
}
@keyframes live-console { 0% { transform: translateY(40px); } 50% { transform: translateY(170px); } 100% { transform: translateY(40px); } }
.console .ok { position: relative; padding-left: 12px; }
.console .ok::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #3dbe78; animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }

/* Apollo mesh: route cycling + packets */
.mesh .nodes circle, .mesh .flows line { transition: stroke 260ms ease, stroke-opacity 260ms ease, stroke-width 260ms ease; }
.mesh .flows line.is-live { stroke: #2f6fed; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(47, 111, 237, 0.9)); }
.mesh .nodes circle.is-live { stroke: #3dbe78; stroke-opacity: 1; filter: drop-shadow(0 0 8px rgba(61, 190, 120, 0.8)); }
.mesh .packet { pointer-events: none; }
.mesh .node-hit { fill: transparent; cursor: pointer; }
.mesh-route { margin-top: 2px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); min-height: 1.4em; }
.mesh-route strong { color: #3dbe78; font-weight: 500; }

/* ---------- what is running ---------- */
.running { padding: 24px 0 72px; }
.running-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.run-card {
  background: #111;
  color: #fff;
  border-radius: 24px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.run-card h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.run-card p { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.run-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: #a9c3ff;
  background: rgba(47, 111, 237, 0.12);
  border: 1px solid rgba(47, 111, 237, 0.25);
  border-radius: 8px;
  padding: 1px 6px;
}
.run-card a { color: #fff; }
.run-meta { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.run-meta span { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
.run-meta span[data-state="on"] { border-color: rgba(61, 190, 120, 0.6); color: #8fd0a8; }
.run-meta span[data-state="off"] { border-color: rgba(240, 138, 60, 0.6); color: #f6b382; }
.route-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; }
.route-chain span { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; }
.route-chain i { font-style: normal; color: rgba(255, 255, 255, 0.4); }

/* ---------- scroll reveal (only when JS adds .reveal) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* resource and card hover lift */
.cards li, .resource-list a { transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.cards li:hover, .resource-list a:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(47, 111, 237, 0.12); }
.points li::before { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.4); animation: live-dot 2.8s ease-in-out infinite; }
.points li:nth-child(2)::before { animation-delay: .4s; }
.points li:nth-child(3)::before { animation-delay: .8s; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12); } }

@media (max-width: 880px) {
  .running-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .close-band .pill-invert, .led::after, .wave span, .console::after, .console .ok::before, .cluster-frame::after,
  .points li::before { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #content > section:not(.hero) .pill, .stage, .cards li, .resource-list a { transition: none; }
}

/* ---------- Artemis Core card (replaces Voice) ---------- */
.product-copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  color: var(--blue);
  background: rgba(47, 111, 237, 0.08);
  border-radius: 6px;
  padding: 1px 5px;
}
.route { width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.route-flow { animation: live-route-flow 1.6s linear infinite; }
@keyframes live-route-flow { to { stroke-dashoffset: -32; } }
.route-node circle { fill: #111; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.4; transition: stroke 260ms ease, fill 260ms ease, filter 260ms ease; }
.route-node.is-live circle { stroke: #2f6fed; stroke-width: 2; fill: #14203a; filter: drop-shadow(0 0 8px rgba(47, 111, 237, 0.9)); }
.route-node.is-answer circle { stroke: #3dbe78; fill: #10251a; filter: drop-shadow(0 0 10px rgba(61, 190, 120, 0.9)); }
.route-node.is-skip circle { stroke: rgba(255, 255, 255, 0.3); }
.route-packet { filter: drop-shadow(0 0 8px rgba(122, 162, 255, 1)); }
.stream {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  min-height: 118px;
}
.stream pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  white-space: pre-wrap;
  word-break: break-word;
}
.stream .s-ok { color: #8fd0a8; }
.stream .s-warn { color: #f6b382; }
.stream .s-dim { color: rgba(255, 255, 255, 0.45); }
.stream .caret { display: inline-block; width: 7px; height: 1em; vertical-align: -2px; background: #7aa2ff; margin-left: 2px; animation: live-blink 1s steps(2, start) infinite; }
.core-chips li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
#core-tag[data-state="serving"] { border-color: rgba(61, 190, 120, 0.7); color: #8fd0a8; }
#core-tag[data-state="online"] { border-color: rgba(240, 138, 60, 0.7); color: #f6b382; }
#core-led[data-state="serving"] { background: #3dbe78; color: #3dbe78; }
#core-led[data-state="online"] { background: #f08a3c; color: #f08a3c; }
@media (prefers-reduced-motion: reduce) {
  .route-flow, .stream .caret { animation: none !important; }
}

/* ---------- running cards: mini live visuals ---------- */
.anchor-alias { display: block; scroll-margin-top: calc(var(--header) + 16px); }
.running-grid { grid-template-columns: repeat(3, 1fr); }
.run-card { position: relative; overflow: hidden; transition: transform 260ms ease, box-shadow 260ms ease; }
.run-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(17, 17, 17, 0.22), 0 0 0 1px rgba(47, 111, 237, 0.25); }
.mini-chat, .mini-account, .mini-gw {
  min-height: 96px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.mc-row { display: grid; gap: 6px; }
.mc-user { justify-items: end; margin-bottom: 8px; }
.mc-row span { display: block; height: 8px; border-radius: 999px; width: var(--w); transform-origin: left; }
.mc-user span { background: rgba(255, 255, 255, 0.28); }
.mc-bot span { background: linear-gradient(90deg, #2f6fed, #7aa2ff); transform: scaleX(0); animation: live-stream 3.6s ease-in-out infinite; }
.mc-bot span:nth-child(2) { animation-delay: .35s; }
.mc-bot span:nth-child(3) { animation-delay: .7s; }
@keyframes live-stream { 0% { transform: scaleX(0); opacity: 1; } 35%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.mini-account svg { width: 100%; height: 100%; }
.ma-ring { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 2; }
.ma-orbit { fill: none; stroke: #3dbe78; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 34 104; transform-origin: 60px 32px; animation: live-spin 2.8s linear infinite; filter: drop-shadow(0 0 4px rgba(61, 190, 120, .8)); }
.ma-lock { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.mini-gw canvas { width: 100%; height: 44px; display: block; }
.mini-account { height: 96px; }
.gw-read { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }

/* resources: live rows */
.resource-list a { position: relative; overflow: hidden; padding-left: 38px; }
.resource-list a::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.4);
  animation: live-dot 2.8s ease-in-out infinite;
}
.resource-list li:nth-child(2) a::before { background: #3dbe78; animation-delay: .5s; }
.resource-list li:nth-child(3) a::before { background: #f08a3c; animation-delay: 1s; }
.resource-list li:nth-child(4) a::before { animation-delay: 1.5s; }
.resource-list a::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.resource-list a:hover::after, .resource-list a:focus-visible::after { opacity: 1; transform: none; }
.resource-list a { background-image: radial-gradient(260px circle at var(--mx, -100px) var(--my, -100px), rgba(47, 111, 237, 0.12), transparent 60%); }

/* contact: focus energy */
.field input { transition: border-color 200ms ease, box-shadow 240ms ease; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.14), 0 8px 24px rgba(47, 111, 237, 0.12); outline: none; }
.mesh .nodes circle { pointer-events: all; cursor: pointer; }
.console-row { transition: background 260ms ease; }
.console-row.is-live { background: rgba(47, 111, 237, 0.1); }
.console-row span:last-child { transition: color 260ms ease; }

@media (max-width: 1020px) and (min-width: 881px) { .running-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .running-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .mc-bot span { animation: none !important; transform: none; }
  .ma-orbit, .resource-list a::before { animation: none !important; }
  .run-card { transition: none; }
}

/* The Bow: run activity ticks */
.run-ticks { display: flex; gap: 4px; align-items: flex-end; height: 40px; margin-top: 14px; padding: 0 2px; }
.run-ticks i { flex: 1; height: 20%; border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: height 400ms ease, background 400ms ease; }
.run-ticks i.t0 { height: 25%; background: rgba(255, 255, 255, 0.25); }
.run-ticks i.t1 { height: 70%; background: #3dbe78; }
.run-ticks i.t2 { height: 50%; background: #2f6fed; }
.run-ticks i.t3 { height: 100%; background: linear-gradient(#f08a3c, #2f6fed); }
.run-ticks i:last-child { box-shadow: 0 0 10px rgba(122, 162, 255, 0.6); }