/* =========================================================================
   XONWARE — ANIMATIONS BACKGROUND LAYER (per-page)
   ----------------------------------------------------------------------
   Drop-in SUPPLEMENT to animations.css. Adds rich animated backgrounds
   to EVERY page, not just the homepage:
     · flowing dashed network curves (was multi-hero only — now site-wide)
     · per-page hero frame (auto-injected into first <section>)
     · section corner accents (subtle pulsing nodes at section borders)
     · boosted ambient layer visibility on inner pages
     · hover-lift on every common card class (.card / .feature-card / etc.)
   Coexists with existing animations.css — load AFTER it.
   Reuses existing brand tokens (--ink-700, --leaf-500, --cyan-400).
   ========================================================================= */

/* ---- 1. Boost ambient layer visibility on inner pages ------------------ */
/* Home keeps the original subtler opacity. Inner pages get a more
   prominent network constellation so they feel as alive as the homepage. */
html:not([data-page="home"]) .xa-ambient{opacity:.85}
html:not([data-page="home"]) .xa-orb{opacity:.22}
html:not([data-page="home"]) .xa-orb--3{opacity:.18}

/* ---- 2. Animated flowing curves inside the global ambient layer ------- */
/* These were the .xa-multihero__lines paths in v1 — now injected into
   the site-wide ambient SVG by animations-bg.js. Visible on every page. */
.xa-ambient .xa-amb-flow{fill:none;stroke-width:1.4}
.xa-ambient .xa-amb-flow--blue{stroke:rgba(26,35,126,.20);opacity:.6}
.xa-ambient .xa-amb-flow--cyan{stroke:rgba(34,211,238,.24);opacity:.7}
.xa-ambient .xa-amb-flow--green{stroke:rgba(139,197,63,.26);opacity:.7}
.xa-ambient .xa-amb-flow--dashed{stroke-dasharray:6 6;animation:xa-amb-flow-dash 11s linear infinite}
.xa-ambient .xa-amb-flow--dashed.slow{animation-duration:18s}
@keyframes xa-amb-flow-dash{to{stroke-dashoffset:-160}}

/* ---- 3. Per-page hero frame (auto-injected into first <section>) ----- */
.xa-pageframe{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.xa-pageframe__bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 25%,rgba(26,35,126,.10),transparent 65%),radial-gradient(ellipse 60% 50% at 85% 30%,rgba(139,197,63,.08),transparent 65%),radial-gradient(ellipse 60% 50% at 50% 100%,rgba(34,211,238,.10),transparent 65%);animation:xa-pf-drift 32s ease-in-out infinite alternate}
@keyframes xa-pf-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-2%,-1%) scale(1.04)}}
.xa-pageframe__lines{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.xa-pageframe__lines path{fill:none;stroke-width:1.4}
.xa-pageframe__lines .l1{stroke:rgba(26,35,126,.22)}
.xa-pageframe__lines .l2{stroke:rgba(139,197,63,.30);stroke-dasharray:6 6;animation:xa-pf-dash 9s linear infinite}
.xa-pageframe__lines .l3{stroke:rgba(34,211,238,.26)}
.xa-pageframe__lines .l4{stroke:rgba(34,211,238,.22);stroke-dasharray:3 6;animation:xa-pf-dash 14s linear infinite reverse}
@keyframes xa-pf-dash{to{stroke-dashoffset:-160}}
.xa-pageframe__node{transform-origin:center;animation:xa-pf-pulse 4s ease-in-out infinite}
.xa-pageframe__node{fill:var(--leaf-500);opacity:.5}
.xa-pageframe__node--cyan{fill:var(--cyan-400)}
.xa-pageframe__node--blue{fill:var(--ink-700);opacity:.4}
@keyframes xa-pf-pulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.75;transform:scale(1.15)}}
.xa-pageframe__node:nth-child(odd){animation-delay:-2s}
.xa-pageframe__node:nth-child(3n){animation-delay:-1s}
.xa-pageframe__node:nth-child(5n){animation-delay:-3s}
.xa-pageframe__node:nth-child(7n){animation-delay:-2.4s}

/* Ensure content inside the host section sits above the pageframe */
.xa-pf-host{position:relative}


/* ---- 4. Section corner accents (subtle pulsing nodes on every section) -- */
/* Adds a faint network node motif into the top-left and bottom-right of
   every major <section>. Auto-injected by animations-bg.js. */
.xa-section-decor{position:absolute;width:120px;height:120px;pointer-events:none;opacity:.6}
.xa-section-decor--tl{top:0;left:0}
.xa-section-decor--br{bottom:0;right:0;transform:rotate(180deg)}
.xa-section-decor svg{width:100%;height:100%}
.xa-section-decor circle{transform-origin:center;animation:xa-deco-pulse 4s ease-in-out infinite}
.xa-section-decor circle:nth-child(odd){animation-delay:-1.5s}
.xa-section-decor circle:nth-child(3n){animation-delay:-2.8s}
.xa-section-decor line{stroke:rgba(26,35,126,.10);stroke-width:.8;fill:none}
@keyframes xa-deco-pulse{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:.7;transform:scale(1.15)}}

/* ---- 5. Auto hover-lift on existing card classes ---------------------- */
/* The site already uses .card, .feature-card, .industry-card etc. across
   the inner pages. Give them the same hover treatment the new XIMS cards
   have. Restrict to non-home so we don't duplicate home's own card style. */
html:not([data-page="home"]) .card,
html:not([data-page="home"]) .feature-card,
html:not([data-page="home"]) .industry-card,
html:not([data-page="home"]) .module-card,
html:not([data-page="home"]) .tile,
html:not([data-page="home"]) .resource-card{
  transition:transform .35s var(--xa-ease,cubic-bezier(.32,.72,0,1)),
             box-shadow .35s var(--xa-ease,cubic-bezier(.32,.72,0,1)),
             border-color .25s var(--xa-ease,cubic-bezier(.32,.72,0,1));
}
html:not([data-page="home"]) .card:hover,
html:not([data-page="home"]) .feature-card:hover,
html:not([data-page="home"]) .industry-card:hover,
html:not([data-page="home"]) .module-card:hover,
html:not([data-page="home"]) .tile:hover,
html:not([data-page="home"]) .resource-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 48px -22px rgba(10,20,40,.18);
  border-color:rgba(139,197,63,.45);
}

/* ---- 6. Floating telemetry dots (very subtle drifting points) -------- */
/* A few small dots that gently float across the viewport — a subtle but
   continuous sense of movement on every page. */
.xa-telemetry{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.xa-telemetry__d{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--leaf-500);opacity:.4;box-shadow:0 0 10px var(--leaf-500);animation:xa-telem-drift 24s linear infinite}
.xa-telemetry__d--cyan{background:var(--cyan-400);box-shadow:0 0 10px var(--cyan-400)}
.xa-telemetry__d--blue{background:var(--ink-700);box-shadow:none;opacity:.35}
@keyframes xa-telem-drift{
  0%   {transform:translate(0,0);opacity:0}
  10%  {opacity:.5}
  90%  {opacity:.5}
  100% {transform:translate(var(--xa-dx,80vw), var(--xa-dy,-20vh));opacity:0}
}

/* ---- 7. Subtle scan-line over every page (very low opacity) --------- */
/* A barely-visible diagonal gradient sweep — adds depth & motion without
   distraction. Most users won't consciously notice but the page feels alive. */
.xa-scanline{position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(115deg,transparent 30%,rgba(139,197,63,.04) 50%,transparent 70%);background-size:300% 300%;animation:xa-scan 18s ease-in-out infinite alternate}
@keyframes xa-scan{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* ---- 8. Reduced-motion guards (additive) ----------------------------- */
@media(prefers-reduced-motion:reduce){
  .xa-amb-flow--dashed,
  .xa-pageframe__bg,
  .xa-pageframe__lines .l2,
  .xa-pageframe__lines .l4,
  .xa-pageframe__node,
  .xa-section-decor circle,
  .xa-telemetry__d,
  .xa-scanline{animation:none!important}
  html:not([data-page="home"]) .card:hover,
  html:not([data-page="home"]) .feature-card:hover,
  html:not([data-page="home"]) .industry-card:hover,
  html:not([data-page="home"]) .module-card:hover,
  html:not([data-page="home"]) .tile:hover,
  html:not([data-page="home"]) .resource-card:hover{transform:none}
}