/* Maplayer global page transitions */
:root{
  --ml-page-transition-bg:#0B0B0D;
  --ml-page-transition-text:#FFFFFF;
  --ml-page-transition-muted:rgba(255,255,255,.48);
}
html[data-theme="light"]{
  --ml-page-transition-bg:#F7F6FB;
  --ml-page-transition-text:#17151D;
  --ml-page-transition-muted:rgba(23,21,29,.46);
}

#ml-page-transition{
  position:fixed;
  z-index:2147483646;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:auto;
  opacity:0;
  visibility:hidden;
  background:var(--ml-page-transition-bg);
  transition:
    opacity .46s cubic-bezier(.22,.61,.36,1),
    visibility .46s step-end;
}

#ml-page-transition::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(540px,72vw);
  height:min(330px,48vw);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(122,92,255,.14) 0%,
    rgba(122,92,255,.05) 38%,
    transparent 70%
  );
  filter:blur(24px);
  opacity:.72;
  transition:opacity .4s ease,transform .48s cubic-bezier(.22,.61,.36,1);
}

.ml-page-transition-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  transform:translateY(0) scale(1);
  opacity:1;
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.16,.84,.22,1);
}

.ml-page-transition-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Alexandria','Tajawal',system-ui,sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.045em;
  color:var(--ml-page-transition-text);
  user-select:none;
}

.ml-page-transition-brand .map{
  color:var(--ml-page-transition-text);
}
.ml-page-transition-brand .layer{
  color:#8D70FF;
  background:linear-gradient(135deg,#A78BFA 0%,#7A5CFF 48%,#6D3BEB 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ml-page-transition-line{
  position:relative;
  width:94px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(167,139,250,.10);
}
.ml-page-transition-line::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -42%;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,#A78BFA,#7A5CFF,transparent);
  box-shadow:0 0 12px rgba(122,92,255,.42);
  animation:mlPageLine 1.12s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes mlPageLine{
  0%{left:-42%}
  100%{left:110%}
}

/* Page has finished entering */
html.ml-page-ready #ml-page-transition{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
html.ml-page-ready #ml-page-transition::before{
  opacity:.24;
  transform:translate(-50%,-50%) scale(1.08);
}
html.ml-page-ready .ml-page-transition-inner{
  opacity:0;
  transform:translateY(-4px) scale(.985);
}

/* Leaving: bring the layer back smoothly */
html.ml-page-leaving #ml-page-transition{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:
    opacity .34s cubic-bezier(.22,.61,.36,1),
    visibility 0s step-start!important;
}
html.ml-page-leaving #ml-page-transition::before{
  opacity:.72;
  transform:translate(-50%,-50%) scale(1);
}
html.ml-page-leaving .ml-page-transition-inner{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Keep the first paint calm rather than flashing white/black */
html:not(.ml-page-ready):not(.ml-page-leaving) body{
  background:var(--ml-page-transition-bg);
}

@media(max-width:700px){
  .ml-page-transition-brand{font-size:18px}
  .ml-page-transition-line{width:82px}
  #ml-page-transition::before{
    width:84vw;
    height:50vw;
  }
}

@media(prefers-reduced-motion:reduce){
  #ml-page-transition,
  #ml-page-transition::before,
  .ml-page-transition-inner{
    transition:none!important;
  }
  .ml-page-transition-line::after{
    animation:none!important;
  }
}
/* v2: brand is always the literal Latin wordmark, regardless of page language */
.ml-page-transition-brand{
  direction:ltr!important;
  unicode-bidi:isolate!important;
}