/* ============================================================
   AgenteX Educa · Effects — radii, gradients, shadows/glow,
   blur, and the signature aurora + grid backdrop.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:   8px;   /* tags / small chips */
  --radius-sm:   11px;  /* logo mark / nav items */
  --radius-md:   14px;  /* inner cards / meta tiles */
  --radius-lg:   16px;
  --radius-xl:   20px;  /* standard card */
  --radius-2xl:  22px;  /* feature card / persona */
  --radius-pill: 999px; /* buttons, badges */

  /* ---- Signature gradients ---- */
  --grad-primary: linear-gradient(135deg, #7a5cff 0%, #22e7ff 100%); /* @kind color */
  --grad-edu:     linear-gradient(135deg, #22e7ff 0%, #b6ff4d 100%); /* @kind color */
  --grad-alert:   linear-gradient(135deg, #ffb545 0%, #ff4d7a 100%); /* @kind color */
  --grad-pie:     linear-gradient(135deg, #ff5cf2 0%, #7a5cff 100%); /* @kind color */
  --grad-conic:   conic-gradient(from 180deg, #7a5cff, #22e7ff, #7a5cff); /* @kind color */
  /* Hairline that tops every product card */
  --grad-hairline: linear-gradient(90deg, transparent, rgba(122,92,255,.55), rgba(34,231,255,.55), transparent); /* @kind color */

  /* ---- Shadows & glow ---- */
  --shadow-card:       0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:        0 20px 60px rgba(122, 92, 255, 0.18); /* card lift on hover */
  --shadow-cta:        0 10px 40px rgba(122, 92, 255, 0.40); /* primary button hover */
  --glow-violet:       0 0 35px rgba(122, 92, 255, 0.60);
  --glow-cyan:         0 0 30px rgba(34, 231, 255, 0.55);
  --glow-lime:         0 0 30px rgba(182, 255, 77, 0.70);
  --glow-amber:        0 0 28px rgba(255, 181, 69, 0.70);
  --glow-red:          0 0 28px rgba(255, 77, 122, 0.75);

  /* ---- Blur (glass) ---- */
  --blur-nav:    22px;
  --blur-panel:  16px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast:    .15s; /* @kind other */
  --dur:         .2s; /* @kind other */
  --dur-slow:    .3s; /* @kind other */
  --dur-ring:    .9s; /* @kind other */
}

/* ============================================================
   Backdrop utilities — the AgenteX "aurora + grid" environment.
   Apply .ax-backdrop to a full-bleed fixed layer behind content,
   OR drop .ax-aurora and .ax-grid as two fixed children.
   ============================================================ */
.ax-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ax-aurora::before, .ax-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: .5;
}
.ax-aurora::before {
  width: 700px; height: 700px; top: -220px; left: -180px;
  background: radial-gradient(circle, var(--ax-violet), transparent 60%);
  animation: ax-float 18s var(--ease-out) infinite alternate;
}
.ax-aurora::after {
  width: 600px; height: 600px; top: 40%; right: -180px;
  background: radial-gradient(circle, var(--ax-cyan), transparent 60%);
  animation: ax-float 22s var(--ease-out) infinite alternate-reverse;
}
@keyframes ax-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 40px) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .ax-aurora::before, .ax-aurora::after { animation: none; }
}

.ax-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: var(--bg-grid-size) var(--bg-grid-size);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 92%);
          mask-image: radial-gradient(ellipse at center, black 35%, transparent 92%);
}