/* ==========================================================================
   LOKRIS Hub — éléments décoratifs hors Tailwind
   (le reste du design est en classes Tailwind directement dans les templates)
   ========================================================================== */

/* Barre signature : dégradé animé LOKRIS */
.brand-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 50;
  background: linear-gradient(90deg, #FDC237, #5eb9f0, #f97316, #FDC237);
  background-size: 300% 100%;
  animation: brand-gradient 6s linear infinite;
}
@keyframes brand-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Fond : grille discrète masquée en ellipse */
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 63, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 63, 82, 0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 70% at 40% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 40% 40%, black 30%, transparent 75%);
}

/* Orbes de dégradé flous */
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
.orb-1 { width: 460px; height: 460px; background: #FDC237; top: -140px; left: -120px; opacity: .32; }
.orb-2 { width: 380px; height: 380px; background: #5eb9f0; bottom: -160px; right: -100px; opacity: .22; }
.orb-3 { width: 220px; height: 220px; background: #f97316; top: 22%; right: 34%; opacity: .12; }