/* ============================================================
   REASONING BACKGROUND ANIMATIONS
   ============================================================ */

.reasoning-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 30%,var(--bg-3) 60%,var(--bg-4) 100%);
}

.bg-mesh{
  position:absolute; inset:0; z-index:0;
  opacity:var(--mesh-op);
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 70% 55% at 85% 15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 75% 65% at 50% 85%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, color-mix(in srgb, var(--highlight) 14%, transparent), transparent 60%);
  animation:meshDrift var(--mesh-speed) ease-in-out infinite alternate;
  transition:var(--transition-theme);
}
@keyframes meshDrift{
  0%{   background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; filter:hue-rotate(0deg); }
  100%{ background-position: 2% 3%, -3% 2%, 3% -2%, -2% -3%; filter:hue-rotate(4deg); }
}

.bg-orbs{ position:absolute; inset:0; z-index:1; }
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(var(--blur));
  opacity:var(--orb-op);
  will-change:transform;
  transition:var(--transition-theme);
}
.orb-1{ width:520px; height:520px; top:-160px; left:-120px; background:radial-gradient(circle at 30% 30%, var(--primary), transparent 70%); animation:orbFloat1 var(--orb-speed) ease-in-out infinite; }
.orb-2{ width:460px; height:460px; top:20%; right:-160px; background:radial-gradient(circle at 60% 40%, var(--accent), transparent 70%); animation:orbFloat2 calc(var(--orb-speed) * 1.25) ease-in-out infinite; }
.orb-3{ width:600px; height:600px; bottom:-220px; left:20%; background:radial-gradient(circle at 40% 60%, var(--secondary), transparent 70%); animation:orbFloat3 calc(var(--orb-speed) * 1.4) ease-in-out infinite; }
.orb-4{ width:360px; height:360px; bottom:10%; right:8%; background:radial-gradient(circle at 50% 50%, var(--highlight), transparent 70%); animation:orbFloat1 calc(var(--orb-speed) * 1.15) ease-in-out infinite reverse; }

@keyframes orbFloat1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-24px) scale(1.06);} }
@keyframes orbFloat2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-26px,20px) scale(0.96);} }
@keyframes orbFloat3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(20px,-30px) scale(1.04);} }

.bg-grid{
  position:absolute; inset:0; z-index:2;
  opacity:var(--grid-op);
  background-image:
    linear-gradient(var(--primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--primary) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%, #000 40%, transparent 90%);
  transition:var(--transition-theme);
}

.bg-elements{ position:absolute; inset:0; z-index:3; overflow:hidden; }
.el{
  position:absolute;
  color:var(--primary);
  opacity:.05;
  user-select:none;
  animation:elFloat 18s ease-in-out infinite;
  transition:color .5s ease;
}
.el.accent{ color:var(--accent); }
.el.secondary{ color:var(--secondary); }
.el.highlight{ color:var(--highlight); }
.el.warning{ color:var(--warning); }
.el.symbol{ font-size:38px; font-weight:600; }
.el.symbol.lg{ font-size:56px; }
.el.symbol.sm{ font-size:24px; }

@keyframes elFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-22px) rotate(3deg); } }
@keyframes elFloatSlow{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(16px) rotate(-4deg); } }
@keyframes rotateSlow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.el svg{ display:block; opacity:.06; }
.el.line-el svg{ opacity:.05; }
.p-1  { top:8%;  left:6%;  animation-duration:20s; }
.p-2  { top:14%; left:22%; animation-duration:24s; animation-delay:1s; }
.p-3  { top:6%;  left:46%; animation-duration:19s; animation-delay:.4s; }
.p-4  { top:12%; left:68%; animation-duration:22s; animation-delay:.8s; }
.p-5  { top:9%;  left:88%; animation-duration:26s; animation-delay:1.4s; }
.p-6  { top:28%; left:12%; animation-duration:23s; animation-delay:.2s; }
.p-7  { top:34%; left:34%; animation-duration:21s; animation-delay:1.1s; }
.p-8  { top:24%; left:58%; animation-duration:25s; animation-delay:.6s; }
.p-9  { top:32%; left:80%; animation-duration:20s; animation-delay:1.6s; }
.p-10 { top:46%; left:4%;  animation-duration:27s; animation-delay:.3s; }
.p-11 { top:52%; left:26%; animation-duration:22s; animation-delay:1.2s; }
.p-12 { top:44%; left:50%; animation-duration:24s; animation-delay:.5s; }
.p-13 { top:56%; left:70%; animation-duration:19s; animation-delay:1.5s; }
.p-14 { top:48%; left:92%; animation-duration:23s; animation-delay:.9s; }
.p-15 { top:64%; left:16%; animation-duration:26s; animation-delay:.7s; }
.p-16 { top:70%; left:40%; animation-duration:21s; animation-delay:1.3s; }
.p-17 { top:66%; left:62%; animation-duration:25s; animation-delay:.2s; }
.p-18 { top:74%; left:84%; animation-duration:20s; animation-delay:1s; }
.p-19 { top:86%; left:10%; animation-duration:24s; animation-delay:.4s; }
.p-20 { top:90%; left:32%; animation-duration:22s; animation-delay:1.4s; }
.p-21 { top:84%; left:54%; animation-duration:27s; animation-delay:.6s; }
.p-22 { top:92%; left:76%; animation-duration:19s; animation-delay:1.1s; }
.p-23 { top:80%; left:96%; animation-duration:23s; animation-delay:.8s; }
.p-24 { top:4%;  left:76%; animation-duration:21s; animation-delay:1.7s; }
.rot{ animation:rotateSlow linear infinite; }
.rot-slow{ animation-duration:70s; }
.rot-slower{ animation-duration:110s; }

.bg-network{ position:absolute; inset:0; z-index:3; opacity:1; }
.bg-network svg{ width:100%; height:100%; }
.net-line{ stroke:var(--secondary); stroke-width:1; opacity:.05; transition:stroke .5s ease; }
.net-node{ fill:var(--primary); opacity:.08; transition:fill .5s ease; }
.net-node.c2{ fill:var(--accent); }
.net-node.c3{ fill:var(--highlight); }

.bg-particles{ position:absolute; inset:0; z-index:4; }
.particle{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px 2px var(--glow);
  opacity:var(--particle-op);
  animation:particleDrift 14s ease-in-out infinite;
  transition:background .5s ease, box-shadow .5s ease;
}
.particle.p2{ background:var(--primary); }
.particle.p3{ background:var(--highlight); }
@keyframes particleDrift{
  0%,100%{ transform:translate(0,0); opacity:.2; }
  50%{ transform:translate(14px,-26px); opacity:.5; }
}


@media (prefers-reduced-motion: reduce){
  .bg-mesh, .orb, .el, .rot, .particle{ animation:none !important; }
  *{ transition-duration:.01ms !important; }
}
@media (max-width:1024px){
  .el.symbol.lg{ font-size:42px; }
  .el.symbol{ font-size:30px; }
  .orb-1,.orb-2,.orb-3{ filter:blur(50px); }
}
@media (max-width:640px){
  .bg-elements .el{ opacity:.035; }
  .el.symbol.lg{ font-size:32px; }
  .el.symbol{ font-size:22px; }
  .bg-grid{ background-size:40px 40px; }
  .orb-1{ width:340px; height:340px; }
  .orb-2{ width:300px; height:300px; }
  .orb-3{ width:380px; height:380px; }
  .orb-4{ width:240px; height:240px; }
}