/* ============================================================
   ADVANEXUS GLOBAL AMBIENT BACKGROUND
   A quieter version of the auth effect for product screens.
   ============================================================ */

body.ax-app {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #f2f2f2;
  isolation: isolate;
}

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

body.ax-app.is-ambient-rippling .ax-ambient-bg {
  background:
    radial-gradient(circle at var(--ax-ambient-x, 50%) var(--ax-ambient-y, 42%), rgba(10, 179, 156, 0.18), transparent 18%),
    radial-gradient(circle at var(--ax-ambient-x, 50%) var(--ax-ambient-y, 42%), rgba(52, 53, 65, 0.09), transparent 31%),
    linear-gradient(135deg, #ffffff 0%, #f2f2f2 48%, #ffffff 100%);
}

.ax-ambient-bg::before,
.ax-ambient-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: var(--ax-ambient-cover-1);
  background-size: 470px auto;
  opacity: 0.045;
  transform: rotate(-7deg);
  animation: axAmbientWater 34s linear infinite;
}

.ax-ambient-bg::after {
  background-image: var(--ax-ambient-cover-2);
  background-size: 560px auto;
  opacity: 0.032;
  transform: rotate(9deg) scale(1.06);
  animation-duration: 48s;
  animation-direction: reverse;
}

.ax-ambient-pattern,
.ax-ambient-orbit,
.ax-ambient-streams,
.ax-ambient-glass {
  position: absolute;
  inset: 0;
}

.ax-ambient-pattern {
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.ax-ambient-pattern img {
  position: absolute;
  width: min(38vw, 540px);
  min-width: 260px;
  opacity: 0.045;
  filter: blur(0.2px);
  transform: translate3d(0, 0, 0);
  animation: axAmbientPatternFloat 28s ease-in-out infinite;
}

.ax-ambient-pattern img:nth-child(1) {
  top: 4%;
  left: calc(var(--ax-sidebar-width, 240px) + 2vw);
  rotate: -10deg;
}

.ax-ambient-pattern img:nth-child(2) {
  right: -9%;
  top: 14%;
  rotate: 13deg;
  animation-delay: -9s;
}

.ax-ambient-pattern img:nth-child(3) {
  left: calc(var(--ax-sidebar-width, 240px) + 10vw);
  bottom: -14%;
  rotate: 8deg;
  animation-delay: -18s;
}

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

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

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

.ax-ambient-orb.is-burst img {
  animation-duration: 14s;
}

.ax-ambient-orb:nth-child(1) {
  --ambient-orb-size: 150px;
  --ambient-orb-opacity: 0.09;
  --ambient-orb-speed: 26s;
  --ambient-spin-speed: 34s;
  left: calc(var(--ax-sidebar-width, 240px) + 4vw);
  top: 13%;
}

.ax-ambient-orb:nth-child(2) {
  --ambient-orb-size: 92px;
  --ambient-orb-opacity: 0.11;
  --ambient-orb-speed: 22s;
  --ambient-spin-speed: 28s;
  right: 7%;
  top: 13%;
  animation-delay: -8s;
}

.ax-ambient-orb:nth-child(3) {
  --ambient-orb-size: 118px;
  --ambient-orb-opacity: 0.08;
  --ambient-orb-speed: 29s;
  --ambient-spin-speed: 36s;
  left: calc(var(--ax-sidebar-width, 240px) + 10vw);
  bottom: 10%;
  animation-delay: -13s;
}

.ax-ambient-orb:nth-child(4) {
  --ambient-orb-size: 190px;
  --ambient-orb-opacity: 0.07;
  --ambient-orb-speed: 36s;
  --ambient-spin-speed: 44s;
  right: 3%;
  bottom: 7%;
  animation-delay: -18s;
}

.ax-ambient-orb:nth-child(5) {
  --ambient-orb-size: 74px;
  --ambient-orb-opacity: 0.10;
  --ambient-orb-speed: 20s;
  --ambient-spin-speed: 25s;
  left: 54%;
  top: 7%;
  animation-delay: -4s;
}

.ax-ambient-streams {
  overflow: hidden;
  opacity: 0.42;
}

.ax-ambient-stream {
  position: absolute;
  top: -24%;
  left: var(--ambient-stream-left, 50%);
  width: 1px;
  height: 28vh;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(10, 179, 156, 0.22), rgba(52, 53, 65, 0.07), transparent);
  transform: rotate(18deg);
  animation: axAmbientStreamFall var(--ambient-stream-speed, 16s) linear infinite;
  animation-delay: var(--ambient-stream-delay, 0s);
}

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

.ax-ambient-glass {
  background:
    linear-gradient(90deg, rgba(242, 242, 242, 0.82), transparent 38%, transparent 70%, rgba(255, 255, 255, 0.68)),
    radial-gradient(circle at 50% 46%, transparent 0%, rgba(242, 242, 242, 0.60) 76%);
}

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

@keyframes axAmbientPatternFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -14px, 0) scale(1.02); }
}

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

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

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

@media (max-width: 992px) {
  .ax-ambient-pattern img:nth-child(1),
  .ax-ambient-pattern img:nth-child(3),
  .ax-ambient-orb:nth-child(1),
  .ax-ambient-orb:nth-child(3) {
    left: 96px;
  }
}

@media (max-width: 720px) {
  .ax-ambient-pattern img {
    width: 410px;
  }

  .ax-ambient-orb {
    opacity: calc(var(--ambient-orb-opacity, 0.10) * 0.62);
  }

  .ax-ambient-streams {
    opacity: 0.25;
  }
}

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

  .ax-ambient-streams {
    display: none;
  }
}