/* ════════════════════════════════════════════════════════════════
   KF Brain — Visual Enhancement Layer (2026)   ·  DECORATIVE ONLY
   ──────────────────────────────────────────────────────────────
   Loads AFTER brain.css. Adds an aurora background + an animated
   "thinking" neural-brain mark + capability-tag shimmer that signal
   the AI nature of the tool.

   HARD RULE: this file and its JS are purely additive/decorative.
   They NEVER touch the quiz lifecycle elements (#startBtn, #heroBlock,
   #chatArea, #progBlock, #stratOutput) — those stay 100% owned by
   brain-ui.js. Everything here is behind .brain-fx-* classes the JS
   injects, and respects prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

/* ───────── Aurora (sits above .ambient orbs, below content) ───────── */
.brain-aurora {
  position: fixed;
  inset: -15% -10%;
  z-index: 0;            /* same stacking as .ambient; .wrap content is above */
  pointer-events: none;
  overflow: hidden;
  filter: blur(60px) saturate(1.25);
}
.brain-aurora__blob { position: absolute; border-radius: 50%; opacity: .26; will-change: transform; }
.brain-aurora__blob.b1 { width: 44vw; height: 44vw; left: -8vw;  top: -6vw;
  background: radial-gradient(circle at 30% 30%, #e040a0 0%, rgba(224,64,160,0) 70%);
  animation: brDrift1 24s ease-in-out infinite; }
.brain-aurora__blob.b2 { width: 50vw; height: 50vw; right: -12vw; top: -8vw;
  background: radial-gradient(circle at 60% 40%, #8a5cf6 0%, rgba(138,92,246,0) 70%);
  animation: brDrift2 30s ease-in-out infinite; }
.brain-aurora__blob.b3 { width: 38vw; height: 38vw; left: 30vw; top: 8vw;
  background: radial-gradient(circle at 50% 50%, #38bdf8 0%, rgba(56,189,248,0) 70%);
  animation: brDrift3 27s ease-in-out infinite; }
body.dark .brain-aurora { filter: blur(68px) saturate(1.4); }
body.dark .brain-aurora__blob { opacity: .4; }

@keyframes brDrift1 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(4vw,3vw,0) scale(1.12);} }
@keyframes brDrift2 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(-5vw,4vw,0) scale(1.08);} }
@keyframes brDrift3 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(3vw,-3vw,0) scale(1.15);} }

/* ───────── Animated neural-brain mark (replaces the 🧠 emoji) ───────── */
.brain-fx-mark {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  position: relative;
  display: block;
}
.brain-fx-mark svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* soft glow halo behind the mark */
.brain-fx-mark::before {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,92,246,.35) 0%, rgba(138,92,246,0) 70%);
  animation: brHalo 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes brHalo { 0%,100%{ transform: scale(.9); opacity: .55; } 50%{ transform: scale(1.12); opacity: .9; } }

/* the connecting lines "draw" in a loop (thinking) */
.brain-fx-mark .bx-link {
  stroke: url(#bxGrad);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: bxDraw 2.6s ease-in-out infinite;
}
.brain-fx-mark .bx-link:nth-of-type(2) { animation-delay: .25s; }
.brain-fx-mark .bx-link:nth-of-type(3) { animation-delay: .5s; }
.brain-fx-mark .bx-link:nth-of-type(4) { animation-delay: .75s; }
.brain-fx-mark .bx-link:nth-of-type(5) { animation-delay: 1s; }
.brain-fx-mark .bx-link:nth-of-type(6) { animation-delay: 1.25s; }
@keyframes bxDraw {
  0%   { stroke-dashoffset: 60; opacity: .25; }
  45%  { stroke-dashoffset: 0;  opacity: 1; }
  75%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: .25; }
}

/* the nodes pulse like neurons firing */
.brain-fx-mark .bx-node {
  fill: url(#bxGrad);
  transform-box: fill-box;
  transform-origin: center;
  animation: bxFire 2.2s ease-in-out infinite;
}
.brain-fx-mark .bx-node:nth-of-type(2) { animation-delay: .3s; }
.brain-fx-mark .bx-node:nth-of-type(3) { animation-delay: .6s; }
.brain-fx-mark .bx-node:nth-of-type(4) { animation-delay: .9s; }
.brain-fx-mark .bx-node:nth-of-type(5) { animation-delay: 1.2s; }
.brain-fx-mark .bx-node:nth-of-type(6) { animation-delay: 1.5s; }
.brain-fx-mark .bx-node:nth-of-type(7) { animation-delay: 1.8s; }
@keyframes bxFire { 0%,100%{ transform: scale(.7); opacity: .55; } 50%{ transform: scale(1.25); opacity: 1; } }

/* ───────── Capability tags: rolling "scan" highlight ───────── */
.brain-fx-tags .htag {
  position: relative;
  overflow: hidden;
}
.brain-fx-tags .htag::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(138,92,246,.18) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: bxScan 5.5s ease-in-out infinite;
}
.brain-fx-tags .htag:nth-child(1)::after { animation-delay: 0s; }
.brain-fx-tags .htag:nth-child(2)::after { animation-delay: .4s; }
.brain-fx-tags .htag:nth-child(3)::after { animation-delay: .8s; }
.brain-fx-tags .htag:nth-child(4)::after { animation-delay: 1.2s; }
@keyframes bxScan {
  0%, 70%, 100% { transform: translateX(-120%); }
  80% { transform: translateX(120%); }
}

/* tiny "analyzing…" typing dots under the badge (JS adds the element) */
.brain-fx-think {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 0 18px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  color: var(--al, #8a5cf6); text-transform: uppercase; opacity: .85;
}
.brain-fx-think i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: inline-block;
  animation: bxDot 1.4s ease-in-out infinite;
}
.brain-fx-think i:nth-child(2) { animation-delay: .2s; }
.brain-fx-think i:nth-child(3) { animation-delay: .4s; }
@keyframes bxDot { 0%,100%{ transform: translateY(0); opacity: .4; } 50%{ transform: translateY(-4px); opacity: 1; } }

/* ───────── Reduced motion: freeze decoration ───────── */
@media (prefers-reduced-motion: reduce) {
  .brain-aurora__blob,
  .brain-fx-mark::before,
  .brain-fx-mark .bx-link,
  .brain-fx-mark .bx-node,
  .brain-fx-tags .htag::after,
  .brain-fx-think i { animation: none !important; }
  .brain-fx-mark .bx-link { stroke-dashoffset: 0; opacity: 1; }
  .brain-fx-mark .bx-node { opacity: 1; transform: none; }
}