/* ===========================================================================
   VKV Group — Animated Digital Network Background (Module 26)
   Premium blue + gold particle/network layer for heroes, plus lighter
   ambient-glow treatments for the rest of the page and a slow animated
   border/light-sweep for banner surfaces.

   PRINCIPLES
   - Purely decorative: every element here is pointer-events:none and sits
     BELOW page content (content is lifted to z-index 1, never the reverse).
   - Additive only: no existing selector is restyled. The layer is injected by
     vkv-network.js, so no view/markup file needs to change.
   - Readability first: a directional veil sits between the canvas and the text
     column, and the canvas itself fades particles behind large type (JS).
   - prefers-reduced-motion: reduce → no animation at all (JS paints one static
     frame; the CSS animations below are switched off).
   =========================================================================== */

:root {
  /* Network palette — blue dominant, gold used as a rare accent. */
  --vkv-net-ink:       #050B18;
  --vkv-net-ink-2:     #071426;
  --vkv-net-blue:      #1677FF;
  --vkv-net-blue-2:    #00A8FF;
  --vkv-net-gold:      #FFD54A;
  --vkv-net-gold-2:    #F5B942;
  --vkv-net-highlight: #EAF3FF;

  /* Intensity knobs — tune the whole system from here. */
  --vkv-net-line-opacity:  0.16;
  --vkv-net-glow-blue:     0.20;
  --vkv-net-glow-gold:     0.10;
  --vkv-net-veil:          0.58;
}

/* ---- The background layer itself ---------------------------------------- */
/* z-index:-1 + an isolated host keeps the layer under ALL existing content
   without having to restyle a single child element. */
.vkv-has-network,
.vkv-has-ambient { isolation: isolate; }

.vkv-network-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.vkv-network-background canvas.vkv-network-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vkv-network-background.is-ready canvas.vkv-network-canvas { opacity: 1; }

/* Ambient radial glows — blue lead, gold accent, placed off-centre so the
   composition never looks symmetrical or "gradient wallpaper". */
.vkv-network-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(6px);
}
/* Module 27e — the lead bloom is now warm. The class names stay (the JS builds
   them) but is-blue carries the dominant amber wash, is-blue-2 a deep ember,
   and is-gold the bright highlight. Renaming would mean touching the JS for no
   visual gain. */
.vkv-network-glow.is-blue {
  inset: -26% auto auto -12%;
  width: 74vw; height: 74vw;
  max-width: 980px; max-height: 980px;
  background: radial-gradient(closest-side,
    rgba(255, 176, 60, calc(var(--vkv-net-glow-blue) * 1.9)),
    rgba(246, 158, 42, 0.09) 52%, transparent 74%);
}
.vkv-network-glow.is-blue-2 {
  inset: auto -16% -32% auto;
  width: 58vw; height: 58vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side,
    rgba(214, 122, 34, 0.16), rgba(42, 108, 200, 0.05) 58%, transparent 74%);
}
.vkv-network-glow.is-gold {
  inset: auto 6% -20% auto;
  width: 40vw; height: 40vw;
  max-width: 540px; max-height: 540px;
  background: radial-gradient(closest-side,
    rgba(255, 209, 112, calc(var(--vkv-net-glow-gold) * 2.4)),
    rgba(255, 176, 60, 0.07) 48%, transparent 72%);
}

/* Slow ambient drift (transform/opacity only). */
@media (prefers-reduced-motion: no-preference) {
  .vkv-network-glow.is-blue   { animation: vkv-drift-a 34s var(--ease, ease-in-out) infinite alternate; }
  .vkv-network-glow.is-blue-2 { animation: vkv-drift-b 46s var(--ease, ease-in-out) infinite alternate; }
  .vkv-network-glow.is-gold   { animation: vkv-drift-c 52s var(--ease, ease-in-out) infinite alternate; }
}
@keyframes vkv-drift-a { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(3%, 4%, 0) scale(1.07); } }
@keyframes vkv-drift-b { from { transform: translate3d(0,0,0) scale(1.04); } to { transform: translate3d(-4%, -3%, 0) scale(1); } }
@keyframes vkv-drift-c { from { transform: translate3d(0,0,0) scale(1); opacity: 0.85; } to { transform: translate3d(-3%, -2%, 0) scale(1.1); opacity: 1; } }

/* Readability veil — darkens the side the copy sits on so text keeps a solid
   contrast ratio over the animation. Direction flips for RTL-ish/centred
   layouts via .is-centred. */
.vkv-network-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(5, 11, 24, var(--vkv-net-veil)) 0%,
      rgba(5, 11, 24, 0.34) 42%,
      rgba(5, 11, 24, 0.10) 76%,
      rgba(5, 11, 24, 0) 100%),
    linear-gradient(to top, rgba(5, 11, 24, 0.40) 0%, rgba(5, 11, 24, 0) 45%);
}
.vkv-network-veil.is-centred {
  background:
    radial-gradient(65% 65% at 50% 45%,
      rgba(5, 11, 24, var(--vkv-net-veil)) 0%,
      rgba(5, 11, 24, 0.45) 55%,
      rgba(5, 11, 24, 0) 85%),
    linear-gradient(to top, rgba(5, 11, 24, 0.5) 0%, rgba(5, 11, 24, 0) 50%);
}

/* Module 35: the bottom hairline was removed — sections resolve into each other
   by their own background, with no visible rule. */
.vkv-network-background::after { content: none; }

/* ---- Lighter treatment: ambient glow only (no particles) ---------------- */
.vkv-ambient-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}
.vkv-ambient-layer .vkv-ambient-blue,
.vkv-ambient-layer .vkv-ambient-gold {
  position: absolute;
  border-radius: 50%;
}
.vkv-ambient-layer .vkv-ambient-blue {
  inset: -40% auto auto -10%;
  width: 50vw; height: 50vw; max-width: 660px; max-height: 660px;
  background: radial-gradient(closest-side, rgba(255, 176, 60, 0.085),
    rgba(42, 108, 200, 0.045) 55%, transparent 72%);
}
.vkv-ambient-layer .vkv-ambient-gold {
  inset: auto -8% -45% auto;
  width: 34vw; height: 34vw; max-width: 450px; max-height: 450px;
  background: radial-gradient(closest-side, rgba(255, 196, 82, 0.10), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .vkv-ambient-layer .vkv-ambient-blue { animation: vkv-drift-a 58s ease-in-out infinite alternate; }
  .vkv-ambient-layer .vkv-ambient-gold { animation: vkv-drift-c 66s ease-in-out infinite alternate; }
}

/* ---- Premium banner treatment: animated border + light sweep ------------ */
/* Opt-in via data-vkv-premium (JS also applies it to the CTA band). */
.vkv-premium {
  position: relative;
  isolation: isolate;
}
.vkv-premium::before,
.vkv-premium::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
/* 1px gradient ring, drawn with a mask so the fill stays untouched. */
.vkv-premium::before {
  inset: 0;
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(22, 119, 255, 0.55) 0%,
    rgba(0, 168, 255, 0.28) 26%,
    rgba(255, 213, 74, 0.55) 52%,
    rgba(22, 119, 255, 0.30) 78%,
    rgba(22, 119, 255, 0.55) 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
}
/* Soft outer glow + slow blue→gold light sweep across the surface. */
.vkv-premium::after {
  inset: -1px;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(22, 119, 255, 0.10) 46%,
    rgba(255, 213, 74, 0.12) 52%,
    rgba(22, 119, 255, 0.08) 58%,
    transparent 70%);
  background-size: 260% 100%;
  background-position: 120% 50%;
  z-index: 1;
  opacity: 0.9;
}
.vkv-premium {
  box-shadow: 0 24px 70px rgba(6, 20, 48, 0.45), 0 0 0 1px rgba(22, 119, 255, 0.06);
}

@media (prefers-reduced-motion: no-preference) {
  .vkv-premium::before { animation: vkv-border-shift 22s linear infinite; }
  .vkv-premium::after  { animation: vkv-sweep 14s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
}
@keyframes vkv-border-shift { from { background-position: 0% 50%; }   to { background-position: 300% 50%; } }
@keyframes vkv-sweep        { 0% { background-position: 130% 50%; } 60%, 100% { background-position: -30% 50%; } }

/* ---- Responsive tuning -------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --vkv-net-veil: 0.60; --vkv-net-glow-blue: 0.17; }
}
@media (max-width: 720px) {
  :root { --vkv-net-line-opacity: 0.13; --vkv-net-veil: 0.70; --vkv-net-glow-gold: 0.08; }
  .vkv-network-glow.is-blue   { width: 110vw; height: 110vw; inset: -40% auto auto -30%; }
  .vkv-network-glow.is-blue-2 { width: 90vw;  height: 90vw; }
  .vkv-network-glow.is-gold   { width: 60vw;  height: 60vw; inset: auto -10% -18% auto; }
  .vkv-network-veil {
    background:
      linear-gradient(180deg, rgba(5, 11, 24, 0.72) 0%, rgba(5, 11, 24, 0.86) 45%, rgba(5, 11, 24, 0.78) 100%);
  }
}

/* ---- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vkv-network-background canvas.vkv-network-canvas { transition: none; }
  .vkv-network-glow,
  .vkv-ambient-layer .vkv-ambient-blue,
  .vkv-ambient-layer .vkv-ambient-gold,
  .vkv-premium::before,
  .vkv-premium::after { animation: none !important; }
}

/* Print: decoration never wastes ink. */
@media print {
  .vkv-network-background,
  .vkv-ambient-layer { display: none !important; }
  .vkv-premium::before, .vkv-premium::after { display: none !important; }
}