/* ============================================================
   myskillsKenya — BACKGROUND ECOSYSTEM (background.css)
   ------------------------------------------------------------
   Additive, full-viewport background layer system.

   Visual identity:  SKILLS -> GROWTH -> CONNECTION -> OPPORTUNITY

   Three fixed, pointer-events:none layers behind all content:
     1. body::before  — atmospheric depth (drifting radial auroras)
     2. body::after   — structured skill-network pattern (tiled SVG)
     3. .bg-nodes      — a few gently pulsing "living" nodes (JS-injected)

   Page variations:  bg-home / bg-dashboard / bg-admin / bg-generic
   Theme-aware:      light mode = subtle & clean
                      dark mode  = deeper, faintly illuminated

   All motion is slow, smooth, GPU-friendly and disabled under
   prefers-reduced-motion.  Nothing here intercepts clicks.
   ============================================================ */

/* ============================================================
   1. BACKGROUND TOKENS  (light + dark)
   These extend the existing --msk-* palette for background use.
   ============================================================ */

:root {
  /* atmospheric aurora colours */
  --msk-aurora-a: rgba(59, 130, 246, 0.13);
  --msk-aurora-b: rgba(16, 185, 129, 0.09);
  --msk-aurora-c: rgba(124, 58, 237, 0.08);

  /* network pattern opacity */
  --msk-network-opacity: 0.55;

  /* living-node colour */
  --msk-lnode: rgba(59, 130, 246, 0.30);

  /* vignette depth */
  --msk-vignette: rgba(15, 23, 42, 0.03);
}

html[data-theme="dark"] {
  --msk-aurora-a: rgba(98, 165, 255, 0.18);
  --msk-aurora-b: rgba(52, 211, 153, 0.12);
  --msk-aurora-c: rgba(124, 58, 237, 0.12);

  --msk-network-opacity: 0.7;

  --msk-lnode: rgba(98, 165, 255, 0.35);

  --msk-vignette: rgba(0, 0, 0, 0.15);
}

/* ============================================================
   2. BASE — ensure fixed background layers paint behind content
   ============================================================ */

html {
  position: relative;
}

/* ============================================================
   3. LAYER 1 — ATMOSPHERIC DEPTH  (body::before)
   Large radial gradients that slowly drift, creating depth.
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 22%, var(--msk-aurora-a) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 30%, var(--msk-aurora-b) 0%, transparent 58%),
    radial-gradient(ellipse 50% 60% at 60% 85%, var(--msk-aurora-c) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, transparent 40%, var(--msk-vignette) 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
  animation: bg-drift 45s ease-in-out infinite alternate;
}

/* ============================================================
   4. LAYER 2 — SKILL NETWORK PATTERN  (body::after)
   A structured, tileable SVG mesh: a 3x3 grid of nodes joined
   by connection lines, with diagonal "pathway" links and a
   central hub.  Deliberate and ordered — never random dots.
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--msk-network-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%233b82f6' stroke-width='0.7' stroke-opacity='0.14'%3E%3Cpath d='M30 75 H210'/%3E%3Cpath d='M30 150 H210'/%3E%3Cpath d='M30 225 H210'/%3E%3Cpath d='M75 30 V270'/%3E%3Cpath d='M150 30 V270'/%3E%3Cpath d='M225 30 V270'/%3E%3Cpath d='M75 75 L150 150 L75 225'/%3E%3Cpath d='M225 75 L150 150 L225 225'/%3E%3Cpath d='M30 75 L75 150 L30 225'/%3E%3Cpath d='M270 75 L225 150 L270 225'/%3E%3C/g%3E%3Cg fill='%233b82f6' fill-opacity='0.18'%3E%3Ccircle cx='75' cy='75' r='2.5'/%3E%3Ccircle cx='150' cy='75' r='3'/%3E%3Ccircle cx='225' cy='75' r='2.5'/%3E%3Ccircle cx='75' cy='150' r='3'/%3E%3Ccircle cx='150' cy='150' r='4.5'/%3E%3Ccircle cx='225' cy='150' r='3'/%3E%3Ccircle cx='75' cy='225' r='2.5'/%3E%3Ccircle cx='150' cy='225' r='3'/%3E%3Ccircle cx='225' cy='225' r='2.5'/%3E%3Ccircle cx='30' cy='75' r='2'/%3E%3Ccircle cx='30' cy='150' r='2'/%3E%3Ccircle cx='30' cy='225' r='2'/%3E%3Ccircle cx='270' cy='75' r='2'/%3E%3Ccircle cx='270' cy='150' r='2'/%3E%3Ccircle cx='270' cy='225' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
  animation: bg-pattern-drift 60s linear infinite;
}

/* ============================================================
   5. LAYER 3 — LIVING NODES  (.bg-nodes)
   A handful of softly pulsing dots injected by background.js.
   Each node is a fixed, pointer-events:none span.
   ============================================================ */

.bg-nodes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--msk-lnode);
  box-shadow: 0 0 8px 1px var(--msk-lnode);
  opacity: 0.5;
  animation: bg-node-pulse 6s ease-in-out infinite;
}

/* ============================================================
   6. PAGE VARIATIONS
   Each page class nudges the aurora position / intensity and
   the network opacity to suit the context.
   ============================================================ */

/* --- Homepage: strongest, most alive --- */
.bg-home::before {
  background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
}
.bg-home::after {
  --msk-network-opacity: 0.7;
}

/* --- Dashboard (seeker + employer): balanced, professional --- */
.bg-dashboard::before {
  background-position: 10% 15%, 90% 25%, 50% 90%, 50% 50%;
}
.bg-dashboard::after {
  --msk-network-opacity: 0.5;
}

/* --- Admin: structured, authoritative --- */
.bg-admin::before {
  background-position: 50% 10%, 20% 80%, 80% 70%, 50% 50%;
}
.bg-admin::after {
  --msk-network-opacity: 0.45;
}

/* --- Generic pages: most subtle --- */
.bg-generic::before {
  background-position: 25% 20%, 75% 35%, 50% 80%, 50% 50%;
}
.bg-generic::after {
  --msk-network-opacity: 0.4;
}

/* ============================================================
   7. DARK MODE — illuminated network + deeper aurora
   ============================================================ */

html[data-theme="dark"] body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%2362a5ff' stroke-width='0.6' stroke-opacity='0.10'%3E%3Cpath d='M30 75 H210'/%3E%3Cpath d='M30 150 H210'/%3E%3Cpath d='M30 225 H210'/%3E%3Cpath d='M75 30 V270'/%3E%3Cpath d='M150 30 V270'/%3E%3Cpath d='M225 30 V270'/%3E%3Cpath d='M75 75 L150 150 L75 225'/%3E%3Cpath d='M225 75 L150 150 L225 225'/%3E%3Cpath d='M30 75 L75 150 L30 225'/%3E%3Cpath d='M270 75 L225 150 L270 225'/%3E%3C/g%3E%3Cg fill='%2362a5ff' fill-opacity='0.12'%3E%3Ccircle cx='75' cy='75' r='2.5'/%3E%3Ccircle cx='150' cy='75' r='3'/%3E%3Ccircle cx='225' cy='75' r='2.5'/%3E%3Ccircle cx='75' cy='150' r='3'/%3E%3Ccircle cx='150' cy='150' r='4.5'/%3E%3Ccircle cx='225' cy='150' r='3'/%3E%3Ccircle cx='75' cy='225' r='2.5'/%3E%3Ccircle cx='150' cy='225' r='3'/%3E%3Ccircle cx='225' cy='225' r='2.5'/%3E%3Ccircle cx='30' cy='75' r='2'/%3E%3Ccircle cx='30' cy='150' r='2'/%3E%3Ccircle cx='30' cy='225' r='2'/%3E%3Ccircle cx='270' cy='75' r='2'/%3E%3Ccircle cx='270' cy='150' r='2'/%3E%3Ccircle cx='270' cy='225' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   8. ANIMATION KEYFRAMES
   All motion is slow, smooth and low-CPU.
   ============================================================ */

@keyframes bg-drift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 8% 6%, 94% 4%, 55% 94%; }
  100% { background-position: 4% 10%, 97% 8%, 48% 90%; }
}

@keyframes bg-pattern-drift {
  0% { background-position: 0px 0px; }
  100% { background-position: 300px 300px; }
}

@keyframes bg-node-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.4); }
}

/* ============================================================
   9. RESPONSIVE — simplify on small screens
   ============================================================ */

@media (max-width: 740px) {
  .bg-nodes {
    display: none;
  }

  body::after {
    --msk-network-opacity: 0.3;
    background-size: 200px 200px;
  }

  .bg-home::after {
    --msk-network-opacity: 0.4;
  }
}

/* ============================================================
   10. ACCESSIBILITY — respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .bg-node {
    animation: none;
  }

  .bg-node {
    opacity: 0.3;
  }
}

/* ============================================================
   11. HOME — "SKILLS & OPPORTUNITIES ECOSYSTEM" BACKGROUND
   Replaces the generic aurora-drift + mesh + particle system on
   the landing page with a calm, professional environment:
   a daylight-studio tonal field whose soft lights follow the
   page's story stages (learn -> skills -> opportunities ->
   career), a horizon glow above the footer, and a fine
   structured dot grid for atmosphere. Dark mode re-composes the
   same scene over the deep navy base (never a flat black).
   ============================================================ */

body.bg-home::before {
  animation: none;
  background:
    /* daylight behind the hero */
    radial-gradient(ellipse 64% 34% at 50% -6%, rgba(59, 130, 246, 0.11) 0%, transparent 64%),
    /* learning-stage field (left) */
    radial-gradient(ellipse 44% 24% at 8% 26%, rgba(16, 185, 129, 0.08) 0%, transparent 62%),
    /* opportunities-stage field (right) */
    radial-gradient(ellipse 48% 26% at 94% 56%, rgba(59, 130, 246, 0.09) 0%, transparent 64%),
    /* career-stage field (left, lower) */
    radial-gradient(ellipse 42% 22% at 6% 78%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),
    /* horizon glow separating content from footer */
    radial-gradient(ellipse 85% 20% at 50% 90%, rgba(255, 255, 255, 0.4) 0%, transparent 72%),
    /* base page tint */
    linear-gradient(180deg, #f8fbff 0%, #eef4fc 46%, #f7fafd 78%, #eff4fb 100%);
}

/* fine structured dot grid + fixed "ecosystem" silhouettes replace the
   network mesh on home: recognizable forms (book, laptop, certificate,
   briefcase, graduation cap, growth chart) sit softly in the page
   margins — a skills-to-career environment, never competing with content */
body.bg-home::after {
  animation: none;
  opacity: 0.85;
  background-image:
    radial-gradient(circle, rgba(59, 130, 246, 0.15) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath fill='rgba(59,130,246,0.18)' d='M4 6Q17 0 30 6v30Q17 30 4 36Z'/%3E%3Cpath fill='rgba(59,130,246,0.18)' d='M34 6Q47 0 60 6v30Q47 30 34 36Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='10' y='4' width='44' height='26' rx='3' fill='rgba(59,130,246,0.16)'/%3E%3Cpath d='M4 38h56l-5-8H9Z' fill='rgba(59,130,246,0.16)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='4' y='4' width='48' height='34' rx='4' fill='rgba(59,130,246,0.15)'/%3E%3Ccircle cx='50' cy='32' r='8' fill='rgba(16,185,129,0.20)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M24 8h16v6' fill='none' stroke='rgba(59,130,246,0.20)' stroke-width='4'/%3E%3Crect x='6' y='12' width='52' height='28' rx='5' fill='rgba(59,130,246,0.15)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M32 4 60 16 32 28 4 16Z' fill='rgba(59,130,246,0.17)'/%3E%3Cpath d='M16 22v10q16 9 32 0V22' fill='rgba(16,185,129,0.16)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='6' y='24' width='11' height='18' rx='2' fill='rgba(16,185,129,0.18)'/%3E%3Crect x='24' y='14' width='11' height='28' rx='2' fill='rgba(59,130,246,0.17)'/%3E%3Crect x='42' y='2' width='11' height='40' rx='2' fill='rgba(59,130,246,0.17)'/%3E%3C/svg%3E");
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    54px 54px,
    235px auto,
    255px auto,
    230px auto,
    240px auto,
    230px auto,
    215px auto;
  background-position:
    27px 27px,
    left 2% top 23%,
    right 2% top 15%,
    left 3% top 57%,
    right 2% top 54%,
    left 3% bottom 12%,
    right 2% bottom 14%;
}

/* no floating particles on the landing page */
body.bg-home .bg-nodes {
  display: none !important;
}

/* --- dark mode: the same composition over the deep navy studio --- */

html[data-theme="dark"] body.bg-home::before {
  background:
    radial-gradient(ellipse 64% 34% at 50% -6%, rgba(98, 165, 255, 0.15) 0%, transparent 64%),
    radial-gradient(ellipse 44% 24% at 8% 26%, rgba(52, 211, 153, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 48% 26% at 94% 56%, rgba(98, 165, 255, 0.11) 0%, transparent 64%),
    radial-gradient(ellipse 42% 22% at 6% 78%, rgba(52, 211, 153, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 85% 20% at 50% 90%, rgba(98, 165, 255, 0.07) 0%, transparent 72%),
    linear-gradient(180deg, #0e1729 0%, #0a101d 52%, #0d1424 100%);
}

html[data-theme="dark"] body.bg-home::after {
  background-image:
    radial-gradient(circle, rgba(148, 163, 184, 0.13) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath fill='rgba(98,165,255,0.15)' d='M4 6Q17 0 30 6v30Q17 30 4 36Z'/%3E%3Cpath fill='rgba(98,165,255,0.15)' d='M34 6Q47 0 60 6v30Q47 30 34 36Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='10' y='4' width='44' height='26' rx='3' fill='rgba(98,165,255,0.14)'/%3E%3Cpath d='M4 38h56l-5-8H9Z' fill='rgba(98,165,255,0.14)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='4' y='4' width='48' height='34' rx='4' fill='rgba(98,165,255,0.13)'/%3E%3Ccircle cx='50' cy='32' r='8' fill='rgba(52,211,153,0.17)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M24 8h16v6' fill='none' stroke='rgba(98,165,255,0.17)' stroke-width='4'/%3E%3Crect x='6' y='12' width='52' height='28' rx='5' fill='rgba(98,165,255,0.13)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M32 4 60 16 32 28 4 16Z' fill='rgba(98,165,255,0.15)'/%3E%3Cpath d='M16 22v10q16 9 32 0V22' fill='rgba(52,211,153,0.13)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Crect x='6' y='24' width='11' height='18' rx='2' fill='rgba(52,211,153,0.15)'/%3E%3Crect x='24' y='14' width='11' height='28' rx='2' fill='rgba(98,165,255,0.14)'/%3E%3Crect x='42' y='2' width='11' height='40' rx='2' fill='rgba(98,165,255,0.14)'/%3E%3C/svg%3E");
  opacity: 0.8;
}

@media (max-width: 740px) {
  body.bg-home::after {
    background-size: 44px 44px;
    opacity: 0.5;
  }
}
/* PART 1+2+5: premium hero layer + role-aware auth backgrounds (additive, CSS-only). */
.msk-hero-shell{position:relative;isolation:isolate;overflow:clip;}
.msk-hero-shell::before{content:"";position:absolute;inset:-10% -5% auto;height:480px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 42% 55% at 22% 40%,rgba(59,130,246,.13),transparent 65%),radial-gradient(ellipse 34% 48% at 78% 30%,rgba(16,185,129,.10),transparent 65%),radial-gradient(ellipse 30% 40% at 62% 70%,rgba(124,58,237,.08),transparent 65%);animation:msk-hero-drift 26s ease-in-out infinite alternate;}
html[data-theme="dark"] .msk-hero-shell::before{background:radial-gradient(ellipse 44% 55% at 22% 40%,rgba(98,165,255,.16),transparent 65%),radial-gradient(ellipse 36% 48% at 78% 30%,rgba(52,211,153,.11),transparent 65%),radial-gradient(ellipse 32% 42% at 62% 70%,rgba(124,58,237,.12),transparent 65%);}
@keyframes msk-hero-drift{from{transform:translate3d(-1.5%,0,0) scale(1);}to{transform:translate3d(1.5%,-1.5%,0) scale(1.03);}}
.msk-hero-shell .hero-copy h1{text-wrap:balance;color:var(--text);text-shadow:0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(15,23,42,.12);}
html[data-theme="dark"] .msk-hero-shell .hero-copy h1{text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 28px rgba(98,165,255,.18);}
.msk-hero-shell .hero-copy h1 .hero-hl{color:var(--primary-dark);}
html[data-theme="dark"] .msk-hero-shell .hero-copy h1 .hero-hl{color:#9cc2ff;}
body[data-auth-role="learner"] .auth-page{background:radial-gradient(ellipse 50% 40% at 18% 18%,rgba(59,130,246,.10),transparent 65%),radial-gradient(ellipse 40% 35% at 85% 82%,rgba(16,185,129,.09),transparent 65%) fixed;}
body[data-auth-role="employer"] .auth-page{background:radial-gradient(ellipse 50% 40% at 82% 16%,rgba(59,130,246,.11),transparent 65%),radial-gradient(ellipse 42% 36% at 14% 84%,rgba(245,158,11,.08),transparent 65%) fixed;}
body[data-auth-role="admin"] .auth-page{background:radial-gradient(ellipse 55% 42% at 50% 8%,rgba(124,58,237,.12),transparent 65%),radial-gradient(ellipse 40% 34% at 50% 92%,rgba(59,130,246,.08),transparent 65%) fixed;}
html[data-theme="dark"] body[data-auth-role] .auth-page{background-blend-mode:screen;}
@media (prefers-reduced-motion:reduce){.msk-hero-shell::before{animation:none;}}
/* Landing industry strip: fills lower hero whitespace intentionally. */
.msk-industry-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;}
.msk-industry-chip{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);background:rgba(255,255,255,.55);padding:8px 12px;border-radius:999px;backdrop-filter:blur(8px);}
html[data-theme="dark"] .msk-industry-chip{background:rgba(255,255,255,.04);color:var(--muted);}
/* Role-aware login links: auth architecture untouched, visual only. */
.auth-role-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
.auth-role-links a{font-size:.78rem;font-weight:800;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);}
.auth-role-links a[aria-current="true"]{background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 22px -6px var(--accent-glow);}
.auth-role-note{font-size:.8rem;opacity:.82;margin:8px 0 0;color:#fff;}