/* ============================================================
   advanexus AUTH EXPERIENCE
   Background effects stay behind the form and use only brand
   palette colors: #0ab39c / #343541 / #ffffff / #f2f2f2.
   ============================================================ */

body.ax-auth-body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f2f2f2;
  isolation: isolate;
}

.ax-auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ax-auth-x, 50%) var(--ax-auth-y, 50%), rgba(10, 179, 156, 0.16), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f2f2f2 54%, #ffffff 100%);
}

body.ax-auth-body.is-auth-rippling .ax-auth-bg {
  background:
    radial-gradient(circle at var(--ax-auth-x, 50%) var(--ax-auth-y, 50%), rgba(10, 179, 156, 0.26), transparent 20%),
    radial-gradient(circle at var(--ax-auth-x, 50%) var(--ax-auth-y, 50%), rgba(52, 53, 65, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f2f2f2 54%, #ffffff 100%);
}

.ax-auth-bg::before,
.ax-auth-bg::after {
  content: "";
  position: absolute;
  inset: -18%;
  background-image: var(--ax-cover-1);
  background-size: 420px auto;
  opacity: 0.08;
  transform: rotate(-7deg);
  animation: axAuthWater 26s linear infinite;
}

.ax-auth-bg::after {
  background-image: var(--ax-cover-2);
  background-size: 520px auto;
  opacity: 0.05;
  transform: rotate(9deg) scale(1.08);
  animation-duration: 38s;
  animation-direction: reverse;
}

.ax-auth-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.36;
  mix-blend-mode: multiply;
}

.ax-auth-pattern img {
  position: absolute;
  width: min(48vw, 620px);
  min-width: 280px;
  opacity: 0.08;
  filter: blur(0.2px);
  transform: translate3d(0, 0, 0);
  animation: axAuthPatternFloat 24s ease-in-out infinite;
}

.ax-auth-pattern img:nth-child(1) {
  top: 7%;
  left: -11%;
  rotate: -11deg;
}

.ax-auth-pattern img:nth-child(2) {
  right: -13%;
  top: 16%;
  rotate: 13deg;
  animation-delay: -8s;
}

.ax-auth-pattern img:nth-child(3) {
  left: 9%;
  bottom: -13%;
  rotate: 8deg;
  animation-delay: -14s;
}

.ax-auth-pattern img:nth-child(4) {
  right: 12%;
  bottom: -16%;
  rotate: -9deg;
  animation-delay: -20s;
}

.ax-auth-orbit {
  position: absolute;
  inset: 0;
}

.ax-auth-orb {
  position: absolute;
  width: var(--orb-size, 132px);
  height: var(--orb-size, 132px);
  opacity: var(--orb-opacity, 0.16);
  filter: drop-shadow(0 18px 34px rgba(52, 53, 65, 0.10));
  transform: translate3d(var(--repel-x, 0), var(--repel-y, 0), 0) rotate(var(--orb-rotate, 0deg));
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.28s ease;
  will-change: transform;
  animation: axAuthOrbDrift var(--orb-speed, 18s) ease-in-out infinite;
}

.ax-auth-orb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  animation: axAuthOrbSpin var(--spin-speed, 24s) linear infinite;
}

.ax-auth-orb.is-burst {
  opacity: calc(var(--orb-opacity, 0.16) + 0.10);
}

.ax-auth-orb.is-burst img {
  animation-duration: 12s;
}

.ax-auth-orb:nth-child(1) {
  --orb-size: 170px;
  --orb-opacity: 0.17;
  --orb-speed: 22s;
  --spin-speed: 28s;
  left: 10%;
  top: 12%;
}

.ax-auth-orb:nth-child(2) {
  --orb-size: 96px;
  --orb-opacity: 0.13;
  --orb-speed: 19s;
  --spin-speed: 22s;
  right: 14%;
  top: 11%;
  animation-delay: -7s;
}

.ax-auth-orb:nth-child(3) {
  --orb-size: 128px;
  --orb-opacity: 0.14;
  --orb-speed: 25s;
  --spin-speed: 30s;
  left: 14%;
  bottom: 13%;
  animation-delay: -12s;
}

.ax-auth-orb:nth-child(4) {
  --orb-size: 210px;
  --orb-opacity: 0.10;
  --orb-speed: 31s;
  --spin-speed: 38s;
  right: 7%;
  bottom: 9%;
  animation-delay: -17s;
}

.ax-auth-orb:nth-child(5) {
  --orb-size: 72px;
  --orb-opacity: 0.16;
  --orb-speed: 17s;
  --spin-speed: 20s;
  left: 47%;
  top: 8%;
  animation-delay: -4s;
}

.ax-auth-orb:nth-child(6) {
  --orb-size: 88px;
  --orb-opacity: 0.11;
  --orb-speed: 21s;
  --spin-speed: 24s;
  right: 28%;
  bottom: 17%;
  animation-delay: -10s;
}

.ax-auth-streams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.74;
}

.ax-auth-stream {
  position: absolute;
  top: -22%;
  left: var(--stream-left, 50%);
  width: 1px;
  height: 34vh;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(10, 179, 156, 0.34), rgba(52, 53, 65, 0.10), transparent);
  transform: rotate(18deg);
  animation: axAuthStreamFall var(--stream-speed, 12s) linear infinite;
  animation-delay: var(--stream-delay, 0s);
}

.ax-auth-stream span {
  position: absolute;
  top: 18%;
  left: 8px;
  color: rgba(52, 53, 65, 0.34);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ax-auth-glass {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.70), transparent 34%, transparent 66%, rgba(255, 255, 255, 0.70)),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(242, 242, 242, 0.72) 72%);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 452px);
  max-width: 452px;
  padding: 2rem 2.3rem;
  border: 1px solid rgba(52, 53, 65, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 28px 70px rgba(52, 53, 65, 0.18);
  backdrop-filter: blur(22px) saturate(1.16);
  animation: axAuthCardIn 0.52s cubic-bezier(.2, .9, .2, 1) both;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}

.auth-card:hover {
  box-shadow: 0 32px 78px rgba(52, 53, 65, 0.20);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.auth-sso-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: rgba(52, 53, 65, 0.58);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-sso-divider::before,
.auth-sso-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(52, 53, 65, 0.12);
}

.auth-sso-form {
  padding: 12px;
  border: 1px solid rgba(10, 179, 156, 0.22);
  border-radius: 8px;
  background: rgba(242, 242, 242, 0.58);
}

.auth-sso-form .btn {
  border-color: #0ab39c;
  color: #0ab39c;
  font-weight: 700;
}

.auth-sso-form .btn:hover,
.auth-sso-form .btn:focus {
  background: #0ab39c;
  border-color: #0ab39c;
  color: #ffffff;
}

.auth-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(10, 179, 156, 0.30), transparent 36%, rgba(52, 53, 65, 0.10));
  opacity: 0.62;
  filter: blur(16px);
}

.auth-logo {
  height: 42px;
  margin-bottom: 1rem;
  opacity: 0;
  animation: axAuthLogoIn .62s ease forwards;
}

.auth-subtext {
  color: rgba(52, 53, 65, 0.62);
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

.auth-card .form-control {
  min-height: 42px;
  background: rgba(255, 255, 255, 0.86);
}

.auth-card .btn {
  min-height: 42px;
}

@keyframes axAuthWater {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-7deg); }
  100% { transform: translate3d(9%, 7%, 0) rotate(-7deg); }
}

@keyframes axAuthPatternFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(24px, -18px, 0) scale(1.03); }
}

@keyframes axAuthOrbDrift {
  0%, 100% { margin-top: 0; margin-left: 0; }
  50% { margin-top: -22px; margin-left: 18px; }
}

@keyframes axAuthOrbSpin {
  to { rotate: 360deg; }
}

@keyframes axAuthStreamFall {
  0% { translate: 0 -20vh; opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { translate: -14vw 128vh; opacity: 0; }
}

@keyframes axAuthCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes axAuthLogoIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  body.ax-auth-body {
    padding: 18px;
  }

  .auth-card {
    padding: 1.55rem;
  }

  .ax-auth-pattern img {
    width: 420px;
  }

  .ax-auth-orb {
    opacity: calc(var(--orb-opacity, 0.16) * 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-auth-bg::before,
  .ax-auth-bg::after,
  .ax-auth-pattern img,
  .ax-auth-orb,
  .ax-auth-orb img,
  .ax-auth-stream,
  .auth-card,
  .auth-logo {
    animation: none !important;
  }

  .ax-auth-streams {
    display: none;
  }
}
.ax-auth-contextual-help[dir="rtl"] {
  font-family: "Noto Sans Arabic", "Space Grotesk", sans-serif;
  text-align: right;
}