/* ==========================================================================
   Qubix Labs — Intelligence Fabric design tokens + additive accents
   --------------------------------------------------------------------------
   SCOPE (updated, Phase 4D.1): Homepage Hero + primary product cards
   (index.html, products.html), plus — as of Phase 4D.1 — a shared,
   site-wide footer accent + link-hover rule (both CSS-only, no markup
   duplicated per page). Header/nav/particle systems remain untouched here
   and stay in qeds.build.css / qeds-premium.css / qeds-nav.css, reused as
   -is (Part 30 — one implementation, not a second visual system).
   ========================================================================== */

:root {
  /* Conceptual --ai-* tokens (spec Part 29), mapped 1:1 to the existing
     Qubix Labs design tokens already defined in qeds.build.css. No new
     colors are introduced — this just gives the "Intelligence Fabric"
     system its own semantic names for future phases. */
  --ai-bg: var(--qeds-color-void);
  --ai-grid: var(--qeds-color-line);
  --ai-node: var(--qeds-color-cyan);
  --ai-line: var(--qeds-color-line);
  --ai-glow: var(--qeds-color-cyan);
  --ai-accent: var(--qeds-color-blue);
}

html.light {
  --ai-bg: var(--qeds-color-void);
  --ai-grid: var(--qeds-color-line);
  --ai-node: var(--qeds-color-blue);
  --ai-line: var(--qeds-color-line);
  --ai-glow: var(--qeds-color-cyan);
  --ai-accent: var(--qeds-color-blue);
}

/* --------------------------------------------------------------------------
   Card AI-accent watermark (used by the product-card SVG motifs added in
   this pilot). Purely presentational positioning/opacity rules shared by
   the inline SVGs — kept out of markup so future motifs stay consistent.
   Mirrors the convention already established by the existing RAG /
   Agentic AI cards on index.html (Part 15–17, 21, 34).
   -------------------------------------------------------------------------- */
.ai-card-accent {
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: 5rem;
  height: 5rem;
  opacity: .14;
  z-index: -1;
  pointer-events: none;
  transition: opacity .4s ease;
}
.card-network-host:hover .ai-card-accent,
.qx-proximity:hover .ai-card-accent {
  opacity: .22;
}

@media (prefers-reduced-motion: reduce) {
  .ai-card-accent * {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  /* Mobile: reduce visual complexity per spec Part 25/26 — same rule the
     existing hero watermarks already rely on via their parent's opacity,
     stated explicitly here for the new card accents. */
  .ai-card-accent {
    opacity: .1;
  }
}

/* --------------------------------------------------------------------------
   Phase 4D.1 — Footer Intelligence Fabric continuation (spec Part 25).
   CSS-only (no new markup) so it applies to every page's footer from this
   one file, the same way .qeds-footer/.qeds-footer-link already do —
   consistent with "one reusable implementation, no duplicate systems"
   (Part 30). .qeds-footer is already `position:relative` in the markup on
   every page, so this ::before layer needs no HTML changes anywhere.
   Kept to the lowest intensity tier in the spec's hierarchy (Part 11:
   footer is below FAQ/Terms-adjacent content, not a hero-level accent) —
   two faint radial washes plus a thin static neural path, well under the
   opacity of the Hero's own atmosphere layer. -------------------------- */
.qeds-footer:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(ellipse 40% 60% at 8% 0%, rgba(59,110,245,.10), transparent 65%),
    radial-gradient(ellipse 35% 55% at 96% 10%, rgba(34,229,216,.08), transparent 65%),
    linear-gradient(90deg, transparent 6%, rgba(125,249,255,.14) 6.3%, transparent 6.6%,
                     transparent 93%, rgba(125,249,255,.14) 93.3%, transparent 93.6%);
  background-size: 100% 100%, 100% 100%, 100% 1px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left top, right top, left 2.5rem;
}
html.light .qeds-footer:before {
  opacity: .35;
  background-image:
    radial-gradient(ellipse 40% 60% at 8% 0%, rgba(59,110,245,.08), transparent 65%),
    radial-gradient(ellipse 35% 55% at 96% 10%, rgba(34,229,216,.07), transparent 65%),
    linear-gradient(90deg, transparent 6%, rgba(59,110,245,.16) 6.3%, transparent 6.6%,
                     transparent 93%, rgba(59,110,245,.16) 93.3%, transparent 93.6%);
}
@media (max-width: 640px) {
  .qeds-footer:before { opacity: .3; }
}

/* Footer link hover (Part 26) — existing rule only swapped the text color;
   this adds a colour-matched underline reveal with no layout shift (the
   underline is a background-image, not border/box, so it never nudges
   surrounding text) and keeps both themes legible. */
.qeds-footer-link {
  background-image: linear-gradient(var(--qeds-color-cyan), var(--qeds-color-cyan));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: color .2s ease, background-size .25s ease;
  padding-bottom: 1px;
}
.qeds-footer-link:hover,
.qeds-footer-link:focus-visible {
  background-size: 100% 1px;
}
html.light .qeds-footer-link {
  background-image: linear-gradient(var(--qeds-color-blue), var(--qeds-color-blue));
}
@media (prefers-reduced-motion: reduce) {
  .qeds-footer-link {
    transition: color .2s ease;
  }
}