/* BOOKMARK: Loader Root */
.ax-menu-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(183, 150, 214, .24) 0%, rgba(183, 150, 214, 0) 30%),
    radial-gradient(circle at 82% 22%, rgba(241, 235, 247, .82) 0%, rgba(241, 235, 247, 0) 30%),
    radial-gradient(circle at 56% 82%, rgba(133, 89, 173, .14) 0%, rgba(133, 89, 173, 0) 34%),
    linear-gradient(145deg, #f6f2f8 0%, #efe8f4 42%, #e8deef 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease, visibility .42s ease;
}

.ax-menu-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

body.ax-menu-loader-active{
  overflow:hidden;
}

body.ax-menu-loader-active.ax-menu-loader-ready{
  overflow:auto;
}

/* BOOKMARK: Backdrop and Glow */
.ax-menu-loader__backdrop{
  position:absolute;
  inset:-12%;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ax-menu-loader__glow{
  position:absolute;
  border-radius:999px;
  filter:blur(54px);
  opacity:.72;
  animation:axmlGlowFloat 9s ease-in-out infinite;
}

.ax-menu-loader__glow--one{
  width:34vmax;
  height:34vmax;
  top:-9vmax;
  left:-7vmax;
  background:radial-gradient(circle, rgba(120, 72, 169, .20) 0%, rgba(120, 72, 169, 0) 72%);
}

.ax-menu-loader__glow--two{
  width:30vmax;
  height:30vmax;
  right:-5vmax;
  bottom:-8vmax;
  background:radial-gradient(circle, rgba(223, 208, 239, .88) 0%, rgba(223, 208, 239, 0) 74%);
  animation-delay:-3.2s;
}

/* BOOKMARK: Inner Layout */
.ax-menu-loader__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:min(88vw, 420px);
  padding:30px 24px 28px;
}

.ax-menu-loader__vessel-wrap{
  position:relative;
  width:min(72vw, 240px);
  height:min(82vw, 310px);
  min-width:190px;
  min-height:250px;
  display:grid;
  place-items:center;
}

.ax-menu-loader__vessel-shadow{
  position:absolute;
  bottom:8px;
  width:52%;
  height:14px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(94, 55, 139, .24) 0%, rgba(94, 55, 139, 0) 74%);
  filter:blur(10px);
  animation:axmlShadowPulse 3.8s ease-in-out infinite;
}

/* BOOKMARK: Vessel */
.ax-menu-loader__vessel{
  position:relative;
  width:74%;
  height:82%;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.52);
  background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 100%);
  box-shadow:
    0 24px 60px rgba(95, 63, 130, .12),
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -24px 24px rgba(129, 92, 174, .06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow:hidden;
}

.ax-menu-loader__vessel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%, rgba(111, 66, 161, .05) 100%);
  pointer-events:none;
}

.ax-menu-loader__vessel-rim{
  position:absolute;
  top:14px;
  left:50%;
  width:64%;
  height:18px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.24) 100%);
  border:1px solid rgba(255,255,255,.44);
  box-shadow:0 2px 10px rgba(110, 73, 151, .08);
}

.ax-menu-loader__vessel-liquid{
  position:absolute;
  left:13%;
  right:13%;
  bottom:14%;
  height:56%;
  border-radius:26px 26px 22px 22px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(227, 195, 247, .20) 0%, rgba(174, 116, 216, .18) 28%, rgba(129, 70, 186, .24) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}

.ax-menu-loader__vessel-highlight{
  position:absolute;
  top:9%;
  left:14%;
  width:18%;
  height:64%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 32%, rgba(255,255,255,0) 76%);
  filter:blur(.5px);
  opacity:.7;
}

/* BOOKMARK: Pearls */
.ax-menu-loader__pearls{
  position:absolute;
  inset:0;
}

.ax-menu-loader__pearl{
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 24%, currentColor 70%, rgba(63, 24, 101, .92) 100%);
  color:#7e43b2;
  box-shadow:
    0 8px 18px rgba(95, 58, 136, .18),
    inset 0 1px 2px rgba(255,255,255,.34);
  animation-name: axmlPearlFloat;
  animation-duration: 4.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ax-menu-loader__pearl--1{ width:28px; height:28px; left:24%; bottom:20%; animation-delay:-.4s; }
.ax-menu-loader__pearl--2{ width:22px; height:22px; left:46%; bottom:17%; color:#9d5bd4; animation-delay:-1.5s; animation-duration:4.9s; }
.ax-menu-loader__pearl--3{ width:30px; height:30px; left:58%; bottom:22%; color:#b67be0; animation-delay:-2.2s; animation-duration:5.3s; }
.ax-menu-loader__pearl--4{ width:18px; height:18px; left:36%; bottom:31%; color:#c8a2eb; animation-delay:-1.1s; animation-duration:4.1s; }
.ax-menu-loader__pearl--5{ width:24px; height:24px; left:62%; bottom:36%; color:#8f4bc6; animation-delay:-3.2s; animation-duration:5.5s; }
.ax-menu-loader__pearl--6{ width:16px; height:16px; left:31%; bottom:42%; color:#d4b2f0; animation-delay:-2.8s; animation-duration:4.6s; }
.ax-menu-loader__pearl--7{ width:20px; height:20px; left:50%; bottom:45%; color:#ac74da; animation-delay:-3.7s; animation-duration:5.1s; }
.ax-menu-loader__pearl--8{ width:14px; height:14px; left:44%; bottom:58%; color:#efe2fa; animation-delay:-.9s; animation-duration:4.0s; }

/* BOOKMARK: Text */
.ax-menu-loader__text-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.ax-menu-loader__eyebrow{
  font-family:Poppins, sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(95, 35, 147, .70);
}

.ax-menu-loader__title{
  font-family:Poppins, sans-serif;
  font-size:clamp(22px, 4vw, 30px);
  line-height:1.08;
  font-weight:700;
  color:#4b1877;
}

.ax-menu-loader__caption{
  font-family:Poppins, sans-serif;
  font-size:14px;
  line-height:1.45;
  color:rgba(90, 52, 124, .68);
}

/* BOOKMARK: Motion */
@keyframes axmlGlowFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(1.5vmax,-1.2vmax,0) scale(1.04); }
}

@keyframes axmlShadowPulse{
  0%,100%{ transform:scaleX(1); opacity:.62; }
  50%{ transform:scaleX(1.08); opacity:.42; }
}

@keyframes axmlPearlFloat{
  0%{ transform:translate3d(0,0,0) scale(.96); }
  18%{ transform:translate3d(-6px,-18px,0) scale(1.02); }
  36%{ transform:translate3d(5px,-42px,0) scale(1); }
  54%{ transform:translate3d(-3px,-66px,0) scale(1.04); }
  72%{ transform:translate3d(4px,-88px,0) scale(.98); opacity:.98; }
  100%{ transform:translate3d(1px,-118px,0) scale(.90); opacity:.34; }
}

/* BOOKMARK: Dark Theme */
html[data-theme="dark"] .ax-menu-loader,
body.ax-theme-dark .ax-menu-loader,
body[data-theme="dark"] .ax-menu-loader{
  background:
    radial-gradient(circle at 18% 18%, rgba(122, 80, 170, .20) 0%, rgba(122, 80, 170, 0) 30%),
    radial-gradient(circle at 82% 22%, rgba(66, 40, 96, .38) 0%, rgba(66, 40, 96, 0) 30%),
    radial-gradient(circle at 56% 82%, rgba(186, 161, 216, .08) 0%, rgba(186, 161, 216, 0) 34%),
    linear-gradient(145deg, #17111f 0%, #1f1729 42%, #281d34 100%);
}

html[data-theme="dark"] .ax-menu-loader__vessel,
body.ax-theme-dark .ax-menu-loader__vessel,
body[data-theme="dark"] .ax-menu-loader__vessel{
  background:linear-gradient(180deg, rgba(44, 31, 58, .68) 0%, rgba(30, 21, 41, .54) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -24px 24px rgba(143, 97, 196, .06);
}

html[data-theme="dark"] .ax-menu-loader__vessel-rim,
body.ax-theme-dark .ax-menu-loader__vessel-rim,
body[data-theme="dark"] .ax-menu-loader__vessel-rim{
  background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 100%);
  border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .ax-menu-loader__vessel-liquid,
body.ax-theme-dark .ax-menu-loader__vessel-liquid,
body[data-theme="dark"] .ax-menu-loader__vessel-liquid{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(170, 126, 214, .18) 0%, rgba(124, 73, 179, .22) 30%, rgba(89, 41, 132, .34) 100%);
}

html[data-theme="dark"] .ax-menu-loader__eyebrow,
body.ax-theme-dark .ax-menu-loader__eyebrow,
body[data-theme="dark"] .ax-menu-loader__eyebrow{
  color:rgba(228, 213, 243, .76);
}

html[data-theme="dark"] .ax-menu-loader__title,
body.ax-theme-dark .ax-menu-loader__title,
body[data-theme="dark"] .ax-menu-loader__title{
  color:#f0e8f9;
}

html[data-theme="dark"] .ax-menu-loader__caption,
body.ax-theme-dark .ax-menu-loader__caption,
body[data-theme="dark"] .ax-menu-loader__caption{
  color:rgba(229, 216, 241, .74);
}

@media (max-width: 767px){
  .ax-menu-loader__inner{
    width:min(88vw, 360px);
    gap:20px;
    padding:20px 18px 24px;
  }

  .ax-menu-loader__vessel-wrap{
    width:min(72vw, 216px);
    height:min(86vw, 286px);
    min-width:180px;
    min-height:228px;
  }

  .ax-menu-loader__title{
    font-size:clamp(22px, 8vw, 28px);
  }
}
