/**
 * FIXEO Brain Engine V4 — fixeo-brain-engine-v1.css
 * Version: fbe-v4.1 — 2026-07-12
 * Namespace: .fbe-* / .fbe-know-* / #fle-section
 * Zero overrides to any external stylesheet rules.
 *
 * ═══════════════════════════════════════════════════
 * EMOTIONAL OBJECTIVE
 * A first-time visitor immediately feels:
 * "I am looking at the living intelligence behind FIXEO."
 * Not an infographic. Not an animation. A real decision engine.
 * ═══════════════════════════════════════════════════
 *
 * ARCHITECTURE: THREE VISUAL PLANES
 *
 * PLANE 1 — BACKGROUND (depth particles)
 *   6 soft particles: slow drift, opacity pulse, no pattern
 *   Creates suspension-in-space feeling
 *
 * PLANE 2 — ENGINE (core + rings + connectors + nodes)
 *   RAFI core: 200px sphere, 6-layer glass construction
 *   4 orbital rings: core-boundary / processor / orbital / knowledge-boundary
 *   8 connectors: living two-direction signal circulation
 *   8 nodes: independent thinking cycles, per-node personality
 *
 * PLANE 3 — KNOWLEDGE RING (outer orbit labels)
 *   8 angular slots at r=295px, each cycling 2 real capabilities
 *   Labels fade in, hold, fade out — ~3 visible simultaneously
 *   ALL labels verified against production code + confirmed data
 *
 * ANIMATION PHILOSOPHY: TWO PHASES
 *   PHASE 1 — WAKING (0→3s, one-shot): core wakes → rings appear →
 *             signals travel → nodes illuminate → knowledge appears
 *   PHASE 2 — LIVING (3s→∞, infinite): signals circulate, nodes think,
 *             knowledge rotates, core breathes, particles drift
 *             The engine NEVER fully sleeps.
 *
 * PERFORMANCE
 *   Pure CSS. Zero JS. Zero canvas. Zero external deps.
 *   Compositor-only: opacity + transform + background-position
 *   60fps on modern hardware.
 *   prefers-reduced-motion: all animation off, everything visible.
 *
 * REAL CAPABILITIES (8 nodes + 16 knowledge labels, all production-verified)
 *   N1 Détection du service   fixeo-ai-request-engine.js NLP_MAP
 *   N2 Analyse de l'urgence   detectUrgency()
 *   N3 Localisation           scoreCityMatch(), fixeo-dispatch-engine-v2.js
 *   N4 Estimation indicative  fixeo-estimation-engine-v1.js analyze()
 *   N5 Profils compatibles    rankArtisansV2 category+city filter
 *   N6 Score de pertinence    rankArtisansV2 multi-factor scoring
 *   N7 Signal de confiance    scoreTrust() 0-100
 *   N8 Préparation            service_requests INSERT + notifications
 *
 * REAL FACTS in knowledge ring:
 *   1 134 artisans — Supabase artisans table (confirmed)
 *   20 villes — sitemap-local-plombier.xml (confirmed)
 *   12 métiers — NLP_MAP category list (confirmed)
 *   All other labels map to function names in production JS
 */

/* ════════════════════════════════════════════════════════════
   § 0  ROOT VARIABLES
════════════════════════════════════════════════════════════ */
#fle-section {
  /* Core timing — used in calc() throughout */
  --fbe-intro-end: 3.2s;   /* when PHASE 1 finishes */
}

/* ════════════════════════════════════════════════════════════
   § 1  SECTION WRAPPER
════════════════════════════════════════════════════════════ */
#fle-section {
  padding: 100px 0 108px;
  background: #000;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  isolation: isolate;
}

/* Layer A: static ambient field — deep space */
#fle-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 70% at 50% 52%,
      rgba(45,75,210,.10) 0%, transparent 58%),
    radial-gradient(ellipse 40% 32% at 14% 18%,
      rgba(131,58,180,.09) 0%, transparent 52%),
    radial-gradient(ellipse 36% 30% at 86% 82%,
      rgba(210,48,108,.07) 0%, transparent 52%),
    radial-gradient(ellipse 100% 65% at 50% 100%,
      rgba(20,20,50,.25) 0%, transparent 70%);
  z-index: 0;
}

/* Layer B: slow-breathing ambient intelligence field */
#fle-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 28% at 50% 52%,
      rgba(64,93,230,.08) 0%, transparent 72%);
  animation: fbe-field-breathe 16s ease-in-out infinite;
  z-index: 0;
}
@keyframes fbe-field-breathe {
  0%, 100% { opacity: .4; transform: scale(1);    }
  40%       { opacity: 1;  transform: scale(1.18); }
  70%       { opacity: .6; transform: scale(0.95); }
}

/* ════════════════════════════════════════════════════════════
   § 2  HEADER
════════════════════════════════════════════════════════════ */
.fbe-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 5;
}
.fbe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 15px;
  margin-bottom: 18px;
}
.fbe-title {
  font-size: clamp(1.55rem, 4.2vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.12;
}
.fbe-title em {
  font-style: normal;
  background: linear-gradient(125deg, #5b7ef5 0%, #9b5de5 48%, #e1306c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fbe-subtitle {
  font-size: .88rem;
  color: rgba(255,255,255,.34);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   § 3  ARENA CONTAINER — 620×620px desktop
════════════════════════════════════════════════════════════ */
.fbe-arena {
  position: relative;
  width: 620px;
  height: 620px;
  margin: 0 auto 52px;
  flex-shrink: 0;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   § 4  DEPTH PARTICLES — PLANE 1
   6 soft glowing orbs at random positions, slow drift.
   Creates the "suspended in space" depth layer.
   Pure opacity + transform — compositor only.
════════════════════════════════════════════════════════════ */
.fbe-depth-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.fbe-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: fbe-particle-drift var(--fp-dur, 18s) ease-in-out
    var(--fp-delay, 0s) infinite;
}
/* Particle: glow orb using box-shadow */
.fbe-particle--1 {
  width: 3px; height: 3px;
  left: 18%; top: 22%;
  background: rgba(100,120,255,.7);
  box-shadow: 0 0 6px 3px rgba(80,100,255,.25);
  --fp-dur: 19s; --fp-delay: -3s;
}
.fbe-particle--2 {
  width: 2px; height: 2px;
  left: 78%; top: 34%;
  background: rgba(200,80,180,.6);
  box-shadow: 0 0 5px 3px rgba(180,60,160,.20);
  --fp-dur: 23s; --fp-delay: -9s;
}
.fbe-particle--3 {
  width: 2px; height: 2px;
  left: 12%; top: 68%;
  background: rgba(80,200,160,.55);
  box-shadow: 0 0 5px 3px rgba(60,180,140,.18);
  --fp-dur: 17s; --fp-delay: -6s;
}
.fbe-particle--4 {
  width: 3px; height: 3px;
  left: 84%; top: 72%;
  background: rgba(100,120,255,.6);
  box-shadow: 0 0 6px 3px rgba(80,100,255,.22);
  --fp-dur: 21s; --fp-delay: -14s;
}
.fbe-particle--5 {
  width: 2px; height: 2px;
  left: 52%; top: 88%;
  background: rgba(255,160,60,.5);
  box-shadow: 0 0 4px 2px rgba(220,140,40,.18);
  --fp-dur: 15s; --fp-delay: -7s;
}
.fbe-particle--6 {
  width: 2px; height: 2px;
  left: 28%; top: 10%;
  background: rgba(140,80,240,.55);
  box-shadow: 0 0 5px 3px rgba(120,60,220,.20);
  --fp-dur: 25s; --fp-delay: -18s;
}
@keyframes fbe-particle-drift {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  12%  { opacity: 1; }
  45%  { opacity: .8; transform: translate(var(--fp-dx, 8px), var(--fp-dy, -6px)) scale(1.3); }
  55%  { opacity: .5; }
  78%  { opacity: .9; transform: translate(var(--fp-dx2, -5px), var(--fp-dy2, 9px)) scale(.8); }
  88%  { opacity: 0; }
  100% { opacity: 0; transform: translate(0,0) scale(1); }
}
/* Drift vectors per particle */
.fbe-particle--1 { --fp-dx: 12px; --fp-dy: -8px;  --fp-dx2: -6px;  --fp-dy2:  14px; }
.fbe-particle--2 { --fp-dx: -10px; --fp-dy: 6px;  --fp-dx2: 8px;   --fp-dy2: -10px; }
.fbe-particle--3 { --fp-dx: 8px;  --fp-dy: -12px; --fp-dx2: -12px; --fp-dy2:  6px;  }
.fbe-particle--4 { --fp-dx: -14px; --fp-dy: -6px; --fp-dx2: 10px;  --fp-dy2: -8px;  }
.fbe-particle--5 { --fp-dx: 6px;  --fp-dy: -10px; --fp-dx2: -8px;  --fp-dy2:  12px; }
.fbe-particle--6 { --fp-dx: -8px; --fp-dy: 10px;  --fp-dx2: 14px;  --fp-dy2: -6px;  }

/* ════════════════════════════════════════════════════════════
   § 5  ORBITAL RINGS — 4 total
   Ring 1 (core-bound): 220px — tight processor boundary
   Ring 2 (inner):      298px — mid orbit, sweep point
   Ring 3 (mid):        390px — node orbit reference
   Ring 4 (outer):      570px — knowledge ring boundary
════════════════════════════════════════════════════════════ */
.fbe-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Ring 1 — core boundary: tight, slightly visible, has a slow traveling bright point */
.fbe-ring--core-bound {
  width: 220px; height: 220px;
  border: 1px solid rgba(255,255,255,.08);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(160,180,255,.15) 6deg,
    rgba(160,180,255,.06) 14deg,
    transparent 22deg,
    transparent 360deg
  );
  animation:
    fbe-ring-in .7s ease .25s 1 forwards,
    fbe-ring-cw 18s linear .25s infinite;
}

/* Ring 2 — processor orbit: slightly larger, CW slower, has a rose arc */
.fbe-ring--inner {
  width: 298px; height: 298px;
  border: 1px solid rgba(255,255,255,.055);
  background: conic-gradient(
    from 160deg at 50% 50%,
    transparent 0deg,
    rgba(120,100,255,.10) 10deg,
    rgba(220,70,160,.06) 20deg,
    transparent 30deg,
    transparent 360deg
  );
  animation:
    fbe-ring-in .7s ease .42s 1 forwards,
    fbe-ring-ccw 32s linear .42s infinite;
}

/* Ring 3 — node orbit: same radius as nodes (ellipse ref), faint */
.fbe-ring--mid {
  width: 390px; height: 390px;
  border: 1px solid rgba(255,255,255,.03);
  background: conic-gradient(
    from 280deg at 50% 50%,
    transparent 0deg,
    rgba(80,100,220,.06) 8deg,
    transparent 18deg,
    transparent 180deg,
    rgba(180,50,100,.04) 188deg,
    transparent 196deg,
    transparent 360deg
  );
  animation:
    fbe-ring-in .7s ease .60s 1 forwards,
    fbe-ring-cw  55s linear .60s infinite;
}

/* Ring 4 — knowledge boundary: very large, very faint, slow */
.fbe-ring--outer {
  width: 570px; height: 570px;
  border: 1px solid rgba(255,255,255,.018);
  animation:
    fbe-ring-in .7s ease .80s 1 forwards,
    fbe-ring-ccw 120s linear .80s infinite;
}

@keyframes fbe-ring-in  { to { opacity: 1; } }
@keyframes fbe-ring-cw  { to { transform: translate(-50%,-50%) rotate( 360deg); } }
@keyframes fbe-ring-ccw { to { transform: translate(-50%,-50%) rotate(-360deg); } }

/* ════════════════════════════════════════════════════════════
   § 6  CENTER CORE — RAFI, INTELLIGENCE HEART
   200px sphere — 30% larger than V3's 180px
   6 visual depth layers:
     1. Element background — 4-stop angled glass radial
     2. Inset: top highlight + inner shadow floor
     3. Outset: 5-ring glow cascade (16/40/80/140/220px)
     4. Ambient depth shadow (80px dark indigo)
     5. ::before — detached outer halo with aura-breathe
     6. .fbe-core-halo — inner lens flare div (separate div
        for independent animation without cascade conflict)
     7. ::after — breathing light (opacity only, 4s loop)
════════════════════════════════════════════════════════════ */
.fbe-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;

  /* 4-stop glass sphere: angled light at 33%/26% */
  background:
    radial-gradient(circle at 33% 26%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.07) 15%,
      rgba(55,90,240,.26)   34%,
      rgba(65,30,200,.18)   58%,
      rgba(8,6,28,.62)      100%);

  border: 1px solid rgba(255,255,255,.06);
  outline: 1px solid rgba(255,255,255,.04);
  outline-offset: 3px;

  box-shadow:
    /* Highlight rim: simulated light from top-left */
    inset 0 3px 0   rgba(255,255,255,.22),
    inset 1px 1px 3px rgba(255,255,255,.12),
    /* Shadow floor */
    inset 0 -5px 16px rgba(0,0,15,.60),
    inset 0 -2px  6px rgba(0,0,0,.35),
    /* Glow cascade */
    0 0  16px rgba(64,93,230,.60),
    0 0  40px rgba(64,93,230,.35),
    0 0  80px rgba(55,80,220,.20),
    0 0 140px rgba(50,70,200,.12),
    0 0 220px rgba(40,60,180,.06),
    /* Depth grounding */
    0 24px 72px rgba(0,0,30,.75);

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  isolation: isolate;

  /* Entrance */
  opacity: 0;
  animation: fbe-core-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 forwards;
}

/* Outer halo — wide, very soft, aura-breathe */
.fbe-core::before {
  content: '';
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(55,88,240,.13) 0%,
      rgba(70,50,210,.06) 38%,
      transparent 66%);
  pointer-events: none;
  z-index: -1;
  animation:
    fbe-aura-breathe  8s ease-in-out infinite,
    fbe-aura-surge   11s ease-in-out -1s infinite;  /* offset from halo concentrate */
}
@keyframes fbe-aura-breathe {
  0%, 100% { transform: scale(1);    opacity: .65; }
  45%       { transform: scale(1.10); opacity: 1;   }
}

/* Surge: synchronized with halo concentrate for compound "decision moment" */
@keyframes fbe-aura-surge {
  0%,  35% { transform: scale(1);    opacity: .65; }
  47%       { transform: scale(1.18); opacity: 1;   }  /* peak: aura blooms */
  58%       { transform: scale(1.14); opacity: .90; }  /* hold */
  72%, 100% { transform: scale(1);    opacity: .65; }
}

/* Breathing light shimmer — top highlight shifts subtly */
.fbe-core::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 26%,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.04) 30%,
      transparent 62%);
  animation: fbe-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fbe-breathe {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1;  }
}

/* Inner lens flare — a div inside core for an extra specular highlight */
.fbe-core-halo {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 14%;
  left: 18%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 40%,
      transparent 70%);
  pointer-events: none;
  /* Two animations: position drift (9s) + concentration pulse (11s offset from breathe) */
  animation:
    fbe-halo-shift 9s ease-in-out infinite,
    fbe-concentrate 11s ease-in-out -2s infinite;
}
@keyframes fbe-halo-shift {
  0%, 100% { transform: translate(0,0) scale(1);    opacity: .7; }
  33%       { transform: translate(4px,-3px) scale(1.2); opacity: 1;   }
  66%       { transform: translate(-3px,2px) scale(.85); opacity: .5;  }
}

/* Concentration pulse — simulates a "decision moment" every ~11s
   The halo brightens strongly and expands, then subsides gracefully.
   Combined with existing node pulses, visitor perceives "the engine just decided." */
@keyframes fbe-concentrate {
  0%,  38% { opacity: var(--fbe-halo-base, .7); transform: translate(0,0) scale(1);    }
  48%       { opacity: 1;   transform: translate(2px,-2px) scale(1.5); }  /* peak concentration */
  56%       { opacity: .9;  transform: translate(1px,-1px) scale(1.4); }  /* holding */
  68%       { opacity: .6;  transform: translate(0,0)      scale(1.1); }  /* relaxing */
  78%, 100% { opacity: var(--fbe-halo-base, .7); transform: translate(0,0) scale(1);    }
}

/* Core entrance keyframe */
@keyframes fbe-core-in {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  50%  { opacity: 1; }
  82%  { transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* RAFI HeadCollar — 130px display inside 200px sphere (65% fill) */
.fbe-core-glyph {
  width: 130px;
  height: 130px;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  margin-top: 12px; /* natural seated position */
  filter: brightness(1.07) contrast(0.96) saturate(0.92);
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════
   § 7  CONNECTORS
   Each connector line: from core EDGE (100px radius) to node.
   Two layered signals:
   ::before — intro (one-shot, outward)
   ::after  — living loop (bi-directional: out + in + pause)
════════════════════════════════════════════════════════════ */
.fbe-conn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 50%;
  height: 2px;
  margin-left: 100px;  /* core radius = 200/2 = 100px */
  width: var(--fbe-r, 100px);
  transform: rotate(var(--fbe-angle, 0deg)) translateY(-1px);
  pointer-events: none;
  z-index: 3;
  border-radius: 1px;
  /* Resting path: ORIGINATES from core (left=strong) → fades to node (right=dim)
     This makes every pathway visually read as emanating from RAFI */
  background: linear-gradient(
    90deg,
    rgba(120,150,255,.38) 0%,
    rgba(100,130,255,.26) 28%,
    rgba(130,100,255,.16) 62%,
    rgba(255,255,255,.04) 100%
  );
  opacity: 0;
  animation: fbe-conn-appear .25s ease var(--fbe-delay, 0s) 1 forwards;
}
@keyframes fbe-conn-appear { to { opacity: 1; } }

/* ── Intro signal pulse (::before) — one-shot, fires at intro ── */
.fbe-conn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  /* Signal: originates at RAFI (left), head bright at leading edge (right)
     Tail fades into the path. RAFI is the unmistakable source. */
  background: linear-gradient(
    90deg,
    rgba(90,115,255,.30)  0%,
    rgba(100,130,255,.72) 18%,
    rgba(150,90,255,.95)  48%,
    rgba(220,60,150,.98)  68%,
    rgba(240,80,160,.85)  82%,
    transparent           100%
  );
  background-size: 260% 100%;
  background-position: 260% 0;
  opacity: 0;
  animation: fbe-signal-intro .75s cubic-bezier(0.33, 1, 0.68, 1)
    var(--fbe-delay, 0s) 1 forwards;
}
@keyframes fbe-signal-intro {
  0%   { background-position: 260% 0; opacity: 0; }
  5%   { opacity: 1; }
  74%  { background-position: -10% 0; opacity: 1; }
  100% { background-position: -24% 0; opacity: 0; }
}

/* ── Living signal loop (::after) — infinite, starts after intro ── */
.fbe-conn::after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  /* Living signal: dim RAFI origin (left), bright head at destination (right)
     The eye follows the head rightward — reads as RAFI → node */
  background: linear-gradient(
    90deg,
    rgba(80,110,255,.28)  0%,
    rgba(100,130,255,.58) 22%,
    rgba(150,80,250,.90)  52%,
    rgba(210,55,140,.95)  70%,
    rgba(235,70,155,.78)  84%,
    transparent           100%
  );
  background-size: 280% 100%;
  background-position: 280% 0;
  opacity: 0;
  /* Loop starts after intro ends: fbe-delay + 0.8s + loop-phase */
  animation: fbe-signal-loop var(--fbe-loop-dur, 15s) ease-in-out
    calc(var(--fbe-delay, 0s) + 0.85s + var(--fbe-loop-delay, 0s))
    infinite;
}

@keyframes fbe-signal-loop {
  /* RAFI → Node. Single direction. Clean causality. No return flicker. */
  0%   { background-position: 280% 0; opacity: 0; }
  2%   { opacity: 0; }
  4%   { opacity: 1; }
  26%  { background-position: -14% 0; opacity: 1; }
  34%  { background-position: -26% 0; opacity: 0; }
  /* ── Rest: pathway stays quiet, RAFI prepares next dispatch ── */
  100% { background-position: 280% 0; opacity: 0; }
}

/* Per-connector timing (prime-ish periods, golden-ratio phase spacing) */
.fbe-conn--1 { --fbe-loop-dur: 13s; --fbe-loop-delay:  -0.0s; }
.fbe-conn--2 { --fbe-loop-dur: 17s; --fbe-loop-delay:  -8.7s; }
.fbe-conn--3 { --fbe-loop-dur: 19s; --fbe-loop-delay:  -2.5s; }
.fbe-conn--4 { --fbe-loop-dur: 11s; --fbe-loop-delay:  -8.2s; }
.fbe-conn--5 { --fbe-loop-dur: 23s; --fbe-loop-delay: -13.0s; }
.fbe-conn--6 { --fbe-loop-dur: 16s; --fbe-loop-delay:  -6.7s; }
.fbe-conn--7 { --fbe-loop-dur: 12s; --fbe-loop-delay: -10.5s; }
.fbe-conn--8 { --fbe-loop-dur: 21s; --fbe-loop-delay:  -5.2s; }

/* Connector geometry (angles + radii) */
/* Arena 620px, ellipse rx=230, ry=204 */
/* Core radius 100px, node icon radius 31px */
/* r = dist_to_node_center - 100 - 31 */
.fbe-conn--1 { --fbe-angle:   0deg; --fbe-r: 99px;  } /* 230-100-31=99  */
.fbe-conn--2 { --fbe-angle:  45deg; --fbe-r: 87px;  }
.fbe-conn--3 { --fbe-angle:  90deg; --fbe-r: 73px;  } /* 204-100-31=73  */
.fbe-conn--4 { --fbe-angle: 135deg; --fbe-r: 87px;  }
.fbe-conn--5 { --fbe-angle: 180deg; --fbe-r: 99px;  }
.fbe-conn--6 { --fbe-angle: 225deg; --fbe-r: 87px;  }
.fbe-conn--7 { --fbe-angle: 270deg; --fbe-r: 73px;  }
.fbe-conn--8 { --fbe-angle: 315deg; --fbe-r: 87px;  }

/* ════════════════════════════════════════════════════════════
   § 8  INTELLIGENCE NODES
   V4: nodes gain an outer shell (.fbe-node-shell) for a ring
   that independently pulses — node has two light layers:
   1. Shell ring: outer colored border, slow own pulse
   2. Icon disc: glass, thinking glow overlay
   Node icon size: 66px
════════════════════════════════════════════════════════════ */
.fbe-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 88px;
  z-index: 5;
  opacity: 0;
  animation: fbe-node-in .6s cubic-bezier(0.16, 1, 0.3, 1)
    var(--fbe-delay, 0s) 1 forwards;
}
@keyframes fbe-node-in {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.68); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* Node positions — ellipse rx=230, ry=204 on 620×620 arena */
.fbe-node--1 { left: calc(50% + 230px); top: 50%; }
.fbe-node--2 { left: calc(50% + 162px); top: calc(50% + 144px); }
.fbe-node--3 { left: 50%;               top: calc(50% + 204px); }
.fbe-node--4 { left: calc(50% - 162px); top: calc(50% + 144px); }
.fbe-node--5 { left: calc(50% - 230px); top: 50%; }
.fbe-node--6 { left: calc(50% - 162px); top: calc(50% - 144px); }
.fbe-node--7 { left: 50%;               top: calc(50% - 204px); }
.fbe-node--8 { left: calc(50% + 162px); top: calc(50% - 144px); }

/* Intro stagger delays */
.fbe-node--1, .fbe-conn--1 { --fbe-delay: 1.05s; }
.fbe-node--2, .fbe-conn--2 { --fbe-delay: 1.20s; }
.fbe-node--3, .fbe-conn--3 { --fbe-delay: 1.35s; }
.fbe-node--4, .fbe-conn--4 { --fbe-delay: 1.50s; }
.fbe-node--5, .fbe-conn--5 { --fbe-delay: 1.65s; }
.fbe-node--6, .fbe-conn--6 { --fbe-delay: 1.80s; }
.fbe-node--7, .fbe-conn--7 { --fbe-delay: 1.95s; }
.fbe-node--8, .fbe-conn--8 { --fbe-delay: 2.10s; }

/* Per-node accent colors */
/* Per-node accent colors + thinking intensity (--fbe-think-peak)
   Each node has a distinct personality expressed through its brightness ceiling:
   N1 Détection: high-alert, first responder — peaks fully (1.0)
   N2 Urgence:   most reactive — peaks at 1.0, very quick cycle
   N3 Localisation: calm, geographic matching — low key (.60)
   N4 Estimation: deliberate and slow — medium peak (.72), long cycle
   N5 Profils:   frequent short bursts — peak .88, fast cycle
   N6 Score:     analytical, moderate — peak .78
   N7 Confiance: slow evaluator, rarely active but strong when it fires — peak .92
   N8 Préparation: execution, finalizer — strong peak .95, long cycle */
.fbe-node--1 { --fbe-node-color: rgba(72,100,255,.60);  --fbe-node-glow: rgba(72,100,255,.24); --fbe-think-peak: 1.00; }
.fbe-node--2 { --fbe-node-color: rgba(225,48,108,.60);  --fbe-node-glow: rgba(225,48,108,.22); --fbe-think-peak: 1.00; }
.fbe-node--3 { --fbe-node-color: rgba(131,58,180,.60);  --fbe-node-glow: rgba(131,58,180,.22); --fbe-think-peak: 0.60; }
.fbe-node--4 { --fbe-node-color: rgba(32,201,151,.60);  --fbe-node-glow: rgba(32,201,151,.20); --fbe-think-peak: 0.72; }
.fbe-node--5 { --fbe-node-color: rgba(80,110,255,.60);  --fbe-node-glow: rgba(80,110,255,.24); --fbe-think-peak: 0.88; }
.fbe-node--6 { --fbe-node-color: rgba(255,165,40,.60);  --fbe-node-glow: rgba(255,165,40,.20); --fbe-think-peak: 0.78; }
.fbe-node--7 { --fbe-node-color: rgba(131,58,180,.60);  --fbe-node-glow: rgba(131,58,180,.22); --fbe-think-peak: 0.92; }
.fbe-node--8 { --fbe-node-color: rgba(32,201,151,.60);  --fbe-node-glow: rgba(32,201,151,.20); --fbe-think-peak: 0.95; }

/* Per-node thinking cycle */
.fbe-node--1 { --fbe-think-dur:  9s; --fbe-think-delay:  -0.0s; }
.fbe-node--2 { --fbe-think-dur: 13s; --fbe-think-delay:  -6.4s; }
.fbe-node--3 { --fbe-think-dur: 11s; --fbe-think-delay:  -8.7s; }
.fbe-node--4 { --fbe-think-dur: 17s; --fbe-think-delay:  -3.2s; }
.fbe-node--5 { --fbe-think-dur:  8s; --fbe-think-delay:  -5.5s; }
.fbe-node--6 { --fbe-think-dur: 14s; --fbe-think-delay:  -8.8s; }
.fbe-node--7 { --fbe-think-dur: 10s; --fbe-think-delay:  -0.2s; }
.fbe-node--8 { --fbe-think-dur: 16s; --fbe-think-delay: -11.6s; }

/* ── NODE SHELL — outer ring with its own slow pulse ── */
.fbe-node-shell {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shell outer ring — colored, slow pulse */
.fbe-node-shell::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--fbe-node-color, rgba(80,100,255,.40));
  opacity: 0;
  /* Appears after intro signal; then slowly pulses (own rhythm = think-dur) */
  animation:
    fbe-shell-on .5s ease calc(var(--fbe-delay, 0s) + .7s) 1 forwards,
    fbe-shell-pulse var(--fbe-think-dur, 12s) ease-in-out
      calc(var(--fbe-delay, 0s) + 1.4s + var(--fbe-think-delay, 0s)) infinite;
}
@keyframes fbe-shell-on { to { opacity: 1; } }
@keyframes fbe-shell-pulse {
  /* Shell ring pulses to node's personality (think-peak drives scale of ring energy) */
  0%, 100% { opacity: .22; transform: scale(1);    }
  25%       { opacity: calc(var(--fbe-think-peak, 1) * .60); transform: scale(1.04); }
  40%       { opacity: calc(var(--fbe-think-peak, 1) * .82); transform: scale(1.07); }
  58%       { opacity: calc(var(--fbe-think-peak, 1) * .55); transform: scale(1.03); }
  75%       { opacity: .22; transform: scale(1);    }
}

/* Shell outer glow — fires during active window */
.fbe-node-shell::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--fbe-node-color, rgba(80,100,255,.5));
  opacity: 0;
  animation:
    fbe-shell-glow var(--fbe-think-dur, 12s) ease-in-out
      calc(var(--fbe-delay, 0s) + 1.4s + var(--fbe-think-delay, 0s)) infinite;
}
@keyframes fbe-shell-glow {
  0%, 24%, 62%, 100% { opacity: 0; box-shadow: 0 0 0 0 var(--fbe-node-color); }
  35%                { opacity: 1; box-shadow: 0 0 18px 4px var(--fbe-node-color); }
  50%                { opacity: .8; box-shadow: 0 0 12px 2px var(--fbe-node-color); }
}

/* ── NODE ICON — inner glass disc ── */
.fbe-node-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 31%,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.02) 45%,
      rgba(0,0,12,.28)      100%);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow:
    0 3px 16px rgba(0,0,0,.45),
    inset 0 1.5px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
  transition: border-color .5s ease, box-shadow .5s ease;
}

/* Intro activation burst (::before) */
.fbe-node-icon::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--fbe-node-color, rgba(80,100,255,.35));
  opacity: 0;
  animation: fbe-icon-border-on .5s ease calc(var(--fbe-delay, 0s) + .72s) 1 forwards;
}
@keyframes fbe-icon-border-on { to { opacity: 1; } }

/* Thinking glow overlay (::after) — inner brightening */
.fbe-node-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%,
      var(--fbe-node-glow, rgba(80,110,255,.20)) 0%,
      transparent 68%);
  opacity: 0;
  animation: fbe-node-think var(--fbe-think-dur, 12s) ease-in-out
    calc(var(--fbe-delay, 0s) + 1.5s + var(--fbe-think-delay, 0s))
    infinite;
}
@keyframes fbe-node-think {
  /* Uses --fbe-think-peak for max brightness — each node has its own ceiling */
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  30%  { opacity: calc(var(--fbe-think-peak, 1) * .70); }
  44%  { opacity: var(--fbe-think-peak, 1); }          /* node at full intensity */
  56%  { opacity: calc(var(--fbe-think-peak, 1) * .72); }
  66%  { opacity: calc(var(--fbe-think-peak, 1) * .18); }
  73%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Hover: acknowledge */
.fbe-node:hover .fbe-node-icon {
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 8px 28px rgba(0,0,0,.55),
    inset 0 1.5px 0 rgba(255,255,255,.15),
    0 0 20px var(--fbe-node-color, rgba(80,100,255,.3));
  transform: translateY(-2px);
}

/* One-time intro burst (on .fbe-node wrapper) */
.fbe-node::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: fbe-burst .8s ease calc(var(--fbe-delay, 0s) + .68s) 1 forwards;
}
@keyframes fbe-burst {
  0%   { opacity: 0; box-shadow: 0 0 0 0 var(--fbe-node-color); }
  18%  { opacity: 1; box-shadow: 0 0 0 10px rgba(0,0,0,0), 0 0 28px var(--fbe-node-color); }
  55%  { opacity: .35; box-shadow: 0 0 0 18px rgba(0,0,0,0), 0 0 16px var(--fbe-node-color); }
  100% { opacity: 0; box-shadow: 0 0 0 24px transparent; }
}

/* Node label */
.fbe-node-label {
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.34);
  text-align: center;
  line-height: 1.35;
  text-transform: uppercase;
  max-width: 84px;
  transition: color .25s ease;
}
.fbe-node:hover .fbe-node-label { color: rgba(255,255,255,.72); }

/* ════════════════════════════════════════════════════════════
   § 9  KNOWLEDGE RING — Floating capability labels
   8 angular slots at r=295px from center.
   Each slot: absolute positioned, contains 2 <span> labels.
   Label A and B alternate via independent fbe-know-a / fbe-know-b
   animation cycles. Result: ~3 labels visible simultaneously.
════════════════════════════════════════════════════════════ */
.fbe-know {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* Each slot: centered on its angular position */
.fbe-know-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 120px;
  text-align: center;
  pointer-events: none;
}

/* Slot positions — r=295px from arena center (310px) */
/* top: calc(50% + y), left: calc(50% + x) */
.fbe-know-slot--1 { left: 50%;                top: calc(50% - 295px); } /* top    */
.fbe-know-slot--2 { left: calc(50% + 209px);  top: calc(50% - 209px); } /* TR     */
.fbe-know-slot--3 { left: calc(50% + 295px);  top: 50%;               } /* right  */
.fbe-know-slot--4 { left: calc(50% + 209px);  top: calc(50% + 209px); } /* BR     */
.fbe-know-slot--5 { left: 50%;                top: calc(50% + 295px); } /* bottom */
.fbe-know-slot--6 { left: calc(50% - 209px);  top: calc(50% + 209px); } /* BL     */
.fbe-know-slot--7 { left: calc(50% - 295px);  top: 50%;               } /* left   */
.fbe-know-slot--8 { left: calc(50% - 209px);  top: calc(50% - 209px); } /* TL     */

/* Label common style */
.fbe-know-label {
  display: block;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0;
  color: rgba(255,255,255,.55);
  text-shadow:
    0 0 8px rgba(80,110,255,.40),
    0 0 20px rgba(80,110,255,.18);
}

/* Label A — first label in each slot */
/* Appears early, long hold, fades before label B */
.fbe-know-a {
  animation: fbe-know-cycle var(--fbe-ka-dur, 13s) ease-in-out
    var(--fbe-ka-delay, 0s) infinite;
}
/* Label B — second label, offset by half the cycle */
.fbe-know-b {
  animation: fbe-know-cycle var(--fbe-kb-dur, 13s) ease-in-out
    var(--fbe-kb-delay, 0s) infinite;
}

@keyframes fbe-know-cycle {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px);  }
  8%   { opacity: 0; transform: translateX(-50%) translateY(4px);  }
  16%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
  /* Hold — visible for ~40% of cycle */
  52%  { opacity: .9; transform: translateX(-50%) translateY(0);   }
  62%  { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* Per-slot timing: period and phase offset for A and B */
/* B is offset by half of A's period so they don't overlap */
.fbe-know-slot--1 .fbe-know-a { --fbe-ka-dur: 13s; --fbe-ka-delay: 3.2s; }
.fbe-know-slot--1 .fbe-know-b { --fbe-kb-dur: 13s; --fbe-kb-delay: calc(3.2s + 6.5s); }

.fbe-know-slot--2 .fbe-know-a { --fbe-ka-dur: 17s; --fbe-ka-delay: 1.0s; }
.fbe-know-slot--2 .fbe-know-b { --fbe-kb-dur: 17s; --fbe-kb-delay: calc(1.0s + 8.5s); }

.fbe-know-slot--3 .fbe-know-a { --fbe-ka-dur: 11s; --fbe-ka-delay: 4.5s; }
.fbe-know-slot--3 .fbe-know-b { --fbe-kb-dur: 11s; --fbe-kb-delay: calc(4.5s + 5.5s); }

.fbe-know-slot--4 .fbe-know-a { --fbe-ka-dur: 15s; --fbe-ka-delay: 2.0s; }
.fbe-know-slot--4 .fbe-know-b { --fbe-kb-dur: 15s; --fbe-kb-delay: calc(2.0s + 7.5s); }

.fbe-know-slot--5 .fbe-know-a { --fbe-ka-dur: 19s; --fbe-ka-delay: 0.5s; }
.fbe-know-slot--5 .fbe-know-b { --fbe-kb-dur: 19s; --fbe-kb-delay: calc(0.5s + 9.5s); }

.fbe-know-slot--6 .fbe-know-a { --fbe-ka-dur: 12s; --fbe-ka-delay: 5.5s; }
.fbe-know-slot--6 .fbe-know-b { --fbe-kb-dur: 12s; --fbe-kb-delay: calc(5.5s + 6.0s); }

.fbe-know-slot--7 .fbe-know-a { --fbe-ka-dur: 16s; --fbe-ka-delay: 1.8s; }
.fbe-know-slot--7 .fbe-know-b { --fbe-kb-dur: 16s; --fbe-kb-delay: calc(1.8s + 8.0s); }

.fbe-know-slot--8 .fbe-know-a { --fbe-ka-dur: 14s; --fbe-ka-delay: 3.8s; }
.fbe-know-slot--8 .fbe-know-b { --fbe-kb-dur: 14s; --fbe-kb-delay: calc(3.8s + 7.0s); }

/* ════════════════════════════════════════════════════════════
   § 10  LABEL PANEL
════════════════════════════════════════════════════════════ */
.fbe-label-panel {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.fbe-label-text {
  font-size: .75rem;
  color: rgba(255,255,255,.20);
  line-height: 1.65;
  font-style: italic;
}
.fbe-label-text strong {
  font-style: normal;
  font-weight: 700;
  color: rgba(255,255,255,.36);
}

/* ════════════════════════════════════════════════════════════
   § 11  SCROLL REVEAL
════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  .fbe-arena-wrap {
    animation: _fbe-noop linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }
  @keyframes _fbe-noop { from { opacity: 0.9999; } to { opacity: 1; } }
}
/* Fallback: no scroll API — skip one-shot delays, keep living loops */
@supports not (animation-timeline: view()) {
  .fbe-core,
  .fbe-node,
  .fbe-conn,
  .fbe-ring,
  .fbe-particle { opacity: 1 !important; animation-name: none !important; }
  /* Preserve living loops */
  .fbe-core::after       { animation: fbe-breathe 4.5s ease-in-out infinite; }
  .fbe-core::before      { animation: fbe-aura-breathe 8s ease-in-out infinite; }
  .fbe-core-halo         { animation: fbe-halo-shift 9s ease-in-out infinite; }
  #fle-section::after, #fixeo-chapter-2 .fc2-orbital::after { animation: fbe-field-breathe 16s ease-in-out infinite; }
  .fbe-ring--core-bound  { animation: fbe-ring-cw  18s linear infinite; }
  .fbe-ring--inner       { animation: fbe-ring-ccw 32s linear infinite; }
  .fbe-ring--mid         { animation: fbe-ring-cw  55s linear infinite; }
  .fbe-ring--outer       { animation: fbe-ring-ccw 120s linear infinite; }
  .fbe-conn::after       { animation: fbe-signal-loop var(--fbe-loop-dur,15s) ease-in-out var(--fbe-loop-delay,0s) infinite; }
  .fbe-node-shell::before { animation: fbe-shell-pulse var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite; }
  .fbe-node-shell::after  { animation: fbe-shell-glow var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite; }
  .fbe-node-icon::after   { animation: fbe-node-think var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite; }
  .fbe-know-a { animation: fbe-know-cycle var(--fbe-ka-dur,13s) ease-in-out var(--fbe-ka-delay,0s) infinite; }
  .fbe-know-b { animation: fbe-know-cycle var(--fbe-kb-dur,13s) ease-in-out var(--fbe-kb-delay,0s) infinite; }
  .fbe-particle { animation: fbe-particle-drift var(--fp-dur,18s) ease-in-out var(--fp-delay,0s) infinite; }
  .fbe-node-shell::before { opacity: 1; }
  .fbe-node-icon::before  { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   § 12  MOBILE — ≤679px
════════════════════════════════════════════════════════════ */
.fbe-mobile-engine { display: none; }

@media (max-width: 679px) {
  #fle-section  { padding: 64px 0 72px; }
  .fbe-header   { margin-bottom: 36px; }
  .fbe-arena    { display: none !important; }

  .fbe-mobile-engine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 0 4px;
  }

  /* Mobile RAFI core — 130px (bigger than V3's 120px) */
  .fbe-mobile-core {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 33% 26%,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,.07) 15%,
        rgba(55,90,240,.26)   34%,
        rgba(65,30,200,.18)   58%,
        rgba(8,6,28,.62)      100%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.20),
      inset 0 -5px 14px rgba(0,0,15,.58),
      0 0  16px rgba(64,93,230,.55),
      0 0  40px rgba(64,93,230,.30),
      0 0  80px rgba(55,80,220,.16),
      0 14px 48px rgba(0,0,30,.70);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    opacity: 0;
    animation: fbe-core-in-mob 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 forwards;
  }
  @keyframes fbe-core-in-mob {
    0%   { opacity: 0; transform: scale(.4); }
    50%  { opacity: 1; }
    82%  { transform: scale(1.05); }
    100% { opacity: 1; transform: none; }
  }
  .fbe-mobile-core::before {
    content: '';
    position: absolute;
    inset: -32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(55,88,240,.10) 0%, transparent 62%);
    animation: fbe-aura-breathe 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }
  .fbe-mobile-core::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 26%, rgba(255,255,255,.12) 0%, transparent 60%);
    animation: fbe-breathe 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  .fbe-mobile-core-glyph {
    width: 84px;
    height: 84px;
    object-fit: contain;
    object-position: center bottom;
    margin-top: 8px;
    filter: brightness(1.07) contrast(0.96) saturate(0.92);
  }

  /* Mobile knowledge strip */
  .fbe-mobile-know {
    position: relative;
    height: 18px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    text-align: center;
  }
  .fbe-mobile-know-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    white-space: nowrap;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.40);
    text-shadow: 0 0 8px rgba(80,110,255,.30);
    opacity: 0;
  }
  .fbe-mkl--1 { animation: fbe-mkl-cycle 12s ease-in-out 1.5s infinite; }
  .fbe-mkl--2 { animation: fbe-mkl-cycle 12s ease-in-out 5.5s infinite; }
  .fbe-mkl--3 { animation: fbe-mkl-cycle 12s ease-in-out 9.5s infinite; }
  @keyframes fbe-mkl-cycle {
    0%   { opacity: 0; }
    8%   { opacity: .9; }
    30%  { opacity: .9; }
    38%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Node grid */
  .fbe-nodes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 100%;
    max-width: 430px;
  }
  .fbe-mobile-engine .fbe-node {
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    opacity: 0;
    animation-name: fbe-node-in-mob;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background:
      radial-gradient(circle at 18% 50%, rgba(255,255,255,.042) 0%, transparent 58%),
      rgba(255,255,255,.026);
    border: 1px solid rgba(255,255,255,.078);
    border-radius: 14px;
    overflow: hidden;
  }
  @keyframes fbe-node-in-mob {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
  }
  /* Mobile thinking: card brightens */
  .fbe-mobile-engine .fbe-node::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(90deg,
      var(--fbe-node-glow, rgba(80,100,255,.10)) 0%, transparent 55%);
    opacity: 0;
    animation: fbe-node-think var(--fbe-think-dur, 12s) ease-in-out
      calc(1.0s + var(--fbe-think-delay, 0s)) infinite;
    pointer-events: none;
  }
  .fbe-mobile-engine .fbe-node-shell { width: auto; height: auto; }
  .fbe-mobile-engine .fbe-node-shell::before,
  .fbe-mobile-engine .fbe-node-shell::after { display: none; }
  .fbe-mobile-engine .fbe-node-icon {
    width: 44px; height: 44px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .fbe-mobile-engine .fbe-node-icon::before,
  .fbe-mobile-engine .fbe-node-icon::after { display: none; }
  .fbe-mobile-engine .fbe-node::before { display: none; }
  .fbe-mobile-engine .fbe-node-label {
    font-size: .70rem;
    text-align: left;
    text-transform: none;
    letter-spacing: .014em;
    color: rgba(255,255,255,.52);
    max-width: none;
  }
}

/* ════════════════════════════════════════════════════════════
   § 13  TABLET — 680px–899px
   Arena 480×480px (scale = 480/620 = 0.774)
════════════════════════════════════════════════════════════ */
@media (min-width: 680px) and (max-width: 899px) {
  .fbe-arena { width: 480px; height: 480px; }

  /* Core */
  .fbe-core { width: 160px; height: 160px; }
  .fbe-core-glyph { width: 104px; height: 104px; }
  .fbe-core-halo { width: 32px; height: 32px; }

  /* Rings */
  .fbe-ring--core-bound { width: 172px; height: 172px; }
  .fbe-ring--inner      { width: 232px; height: 232px; }
  .fbe-ring--mid        { width: 302px; height: 302px; }
  .fbe-ring--outer      { width: 442px; height: 442px; }

  /* Nodes — ellipse rx=178, ry=158 */
  .fbe-conn { margin-left: 80px; }
  .fbe-node--1 { left: calc(50% + 178px); top: 50%; }
  .fbe-node--2 { left: calc(50% + 126px); top: calc(50% + 112px); }
  .fbe-node--3 { left: 50%;               top: calc(50% + 158px); }
  .fbe-node--4 { left: calc(50% - 126px); top: calc(50% + 112px); }
  .fbe-node--5 { left: calc(50% - 178px); top: 50%; }
  .fbe-node--6 { left: calc(50% - 126px); top: calc(50% - 112px); }
  .fbe-node--7 { left: 50%;               top: calc(50% - 158px); }
  .fbe-node--8 { left: calc(50% + 126px); top: calc(50% - 112px); }

  .fbe-conn--1 { --fbe-r: 67px; }
  .fbe-conn--2 { --fbe-r: 56px; }
  .fbe-conn--3 { --fbe-r: 47px; }
  .fbe-conn--4 { --fbe-r: 56px; }
  .fbe-conn--5 { --fbe-r: 67px; }
  .fbe-conn--6 { --fbe-r: 56px; }
  .fbe-conn--7 { --fbe-r: 47px; }
  .fbe-conn--8 { --fbe-r: 56px; }

  .fbe-node-shell { width: 54px; height: 54px; }
  .fbe-node-icon  { width: 52px; height: 52px; font-size: 1.2rem; }
  .fbe-node-label { font-size: .53rem; }

  /* Knowledge ring: smaller radius on tablet */
  .fbe-know-slot--1 { top: calc(50% - 228px); }
  .fbe-know-slot--2 { left: calc(50% + 161px); top: calc(50% - 161px); }
  .fbe-know-slot--3 { left: calc(50% + 228px); }
  .fbe-know-slot--4 { left: calc(50% + 161px); top: calc(50% + 161px); }
  .fbe-know-slot--5 { top: calc(50% + 228px); }
  .fbe-know-slot--6 { left: calc(50% - 161px); top: calc(50% + 161px); }
  .fbe-know-slot--7 { left: calc(50% - 228px); }
  .fbe-know-slot--8 { left: calc(50% - 161px); top: calc(50% - 161px); }
  .fbe-know-label   { font-size: .48rem; }
}

/* ════════════════════════════════════════════════════════════
   § 14  REDUCED MOTION
   All animation off. All elements immediately visible.
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #fle-section::after,
  .fbe-core, .fbe-core::before, .fbe-core::after, .fbe-core-halo,
  .fbe-ring, .fbe-conn, .fbe-conn::before, .fbe-conn::after,
  .fbe-node, .fbe-node::before,
  .fbe-node-shell, .fbe-node-shell::before, .fbe-node-shell::after,
  .fbe-node-icon::before, .fbe-node-icon::after,
  .fbe-particle,
  .fbe-know-a, .fbe-know-b,
  .fbe-mobile-core, .fbe-mobile-core::before, .fbe-mobile-core::after,
  .fbe-mobile-know-label, .fbe-mobile-engine .fbe-node,
  .fbe-mobile-engine .fbe-node::after {
    animation: none !important;
    transition: none !important;
  }
  /* Force visible */
  .fbe-core  { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
  .fbe-ring  { opacity: 1 !important; }
  .fbe-ring--core-bound,
  .fbe-ring--inner,
  .fbe-ring--mid,
  .fbe-ring--outer { transform: translate(-50%,-50%) !important; }
  .fbe-conn  { opacity: 1 !important; }
  .fbe-conn::before,
  .fbe-conn::after  { opacity: 0 !important; }
  .fbe-node  { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
  .fbe-node-shell::before { opacity: .6 !important; transform: scale(1) !important; }
  .fbe-node-shell::after  { opacity: 0 !important; }
  .fbe-node-icon::before  { opacity: 1 !important; }
  .fbe-node-icon::after   { opacity: 0 !important; }
  .fbe-node::before       { opacity: 0 !important; }
  .fbe-particle  { opacity: 0 !important; }
  /* Knowledge: show 1 label per slot statically */
  .fbe-know-a { opacity: .55 !important; transform: translateX(-50%) translateY(0) !important; }
  .fbe-know-b { opacity: 0 !important; }
  /* Mobile */
  .fbe-mobile-core { opacity: 1 !important; transform: none !important; }
  .fbe-mobile-know-label:first-child { opacity: .7 !important; }
  @media (max-width: 679px) {
    .fbe-mobile-engine .fbe-node {
      opacity: 1 !important; transform: none !important;
    }
  }
}

/* ════════════════════════════════════════════════════════════
   § 15  CHAPTER 2 — fc2-* context overrides
   Elements inside #fixeo-chapter-2 are NOT revealed by scroll-reveal
   (which is scoped to #fle-section). Force them visible immediately.
════════════════════════════════════════════════════════════ */
#fixeo-chapter-2 .fbe-core,
#fixeo-chapter-2 .fbe-node,
#fixeo-chapter-2 .fbe-conn,
#fixeo-chapter-2 .fbe-ring,
#fixeo-chapter-2 .fbe-particle {
  opacity: 1 !important;
  animation-name: none !important;
}
/* Restore living loops for chapter 2 context */
#fixeo-chapter-2 .fbe-core::after      { animation: fbe-breathe 4.5s ease-in-out infinite !important; }
#fixeo-chapter-2 .fbe-core::before     { animation: fbe-aura-breathe 8s ease-in-out infinite !important; }
#fixeo-chapter-2 .fbe-core-halo        { animation: fbe-halo-shift 9s ease-in-out infinite !important; }
#fixeo-chapter-2 .fbe-ring--core-bound { animation: fbe-ring-cw  18s linear infinite !important; }
#fixeo-chapter-2 .fbe-ring--inner      { animation: fbe-ring-ccw 32s linear infinite !important; }
#fixeo-chapter-2 .fbe-ring--mid        { animation: fbe-ring-cw  55s linear infinite !important; }
#fixeo-chapter-2 .fbe-ring--outer      { animation: fbe-ring-ccw 120s linear infinite !important; }
#fixeo-chapter-2 .fbe-conn::after      { animation: fbe-signal-loop var(--fbe-loop-dur,15s) ease-in-out var(--fbe-loop-delay,0s) infinite !important; }
#fixeo-chapter-2 .fbe-node-shell::before { animation: fbe-shell-pulse var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite !important; opacity: 1 !important; }
#fixeo-chapter-2 .fbe-node-shell::after  { animation: fbe-shell-glow var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite !important; }
#fixeo-chapter-2 .fbe-node-icon::after   { animation: fbe-node-think var(--fbe-think-dur,12s) ease-in-out var(--fbe-think-delay,0s) infinite !important; }
#fixeo-chapter-2 .fbe-node-icon::before  { opacity: 1 !important; }
#fixeo-chapter-2 .fbe-know-a { animation: fbe-know-cycle var(--fbe-ka-dur,13s) ease-in-out var(--fbe-ka-delay,0s) infinite !important; }
#fixeo-chapter-2 .fbe-know-b { animation: fbe-know-cycle var(--fbe-kb-dur,13s) ease-in-out var(--fbe-kb-delay,0s) infinite !important; }
#fixeo-chapter-2 .fbe-particle { animation: fbe-particle-drift var(--fp-dur,18s) ease-in-out var(--fp-delay,0s) infinite !important; }