:root {
  --akgx-loader-black: #030105;
  --akgx-loader-dark-violet: #1a0a2e;
  --akgx-loader-magenta: #e600ff;
  --akgx-loader-magenta-glow: rgba(230, 0, 255, .6);
  --akgx-loader-violet-light: #b48ced;
  --akgx-loader-white-violet: #f2eefa;
  --akgx-loader-warm: #fff2df;
  --akgx-loader-home-magenta: #ef2ba8;
  --akgx-loader-home-violet: #8b46ef;
  --akgx-loader-font: "Poppins", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --akgx-loader-bar-height: 4px;
  --akgx-loader-bar-width: min(60vw, 800px);
  --aikogx-loader-background-image: none;
}

html.aikogx-with-loader {
  scrollbar-gutter: stable;
}

html.aikogx-with-loader body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.aikogx-loader,
.aikogx-loader * {
  box-sizing: border-box;
}

.aikogx-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--akgx-loader-white-violet);
  font-family: var(--akgx-loader-font);
  background-color: var(--akgx-loader-black);
  background-image: var(--aikogx-loader-background-image);
  background-position: center;
  background-size: cover;
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  transition: opacity .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
}

.aikogx-loader::before,
.aikogx-loader::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.aikogx-loader::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(239, 43, 168, .12) 0, rgba(126, 50, 218, .09) 18%, transparent 43%),
    radial-gradient(ellipse at 50% 104%, rgba(91, 31, 154, .2) 0, rgba(20, 8, 41, .12) 38%, transparent 68%),
    linear-gradient(180deg, #03030b 0%, #060311 52%, #020208 100%);
  opacity: 1;
}

.aikogx-loader::after {
  z-index: 4;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 16%, rgba(198, 143, 255, .38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 86% 69%, rgba(255, 96, 198, .28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 76%, rgba(177, 117, 244, .26) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 7, .7) 100%);
  background-size: 420px 360px, 510px 420px, 620px 460px, 740px 510px, 100% 100%;
  opacity: .58;
}

html.aikogx-with-loader .aikogx-loader {
  display: flex;
}

html.aikogx-skip-loader .aikogx-loader,
.aikogx-loader.is-hidden {
  display: none;
}

.aikogx-loader.is-fading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.aikogx-loader__world {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.aikogx-loader__world::before {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(ellipse at 50% 102%, rgba(97, 34, 158, .24) 0%, rgba(35, 10, 65, .15) 36%, transparent 66%),
    radial-gradient(circle at 50% 45%, rgba(239, 43, 168, .055) 0%, transparent 46%);
  content: "";
  filter: blur(12px);
  animation: aikogxLoaderFog 9s infinite alternate ease-in-out;
}

.aikogx-loader__world::after {
  position: absolute;
  inset: 10% 7%;
  background:
    linear-gradient(136deg, transparent 0 47%, rgba(141, 70, 239, .09) 48% 49%, transparent 50%) 8% 23% / 96px 96px no-repeat,
    linear-gradient(136deg, transparent 0 47%, rgba(239, 43, 168, .075) 48% 49%, transparent 50%) 91% 37% / 130px 130px no-repeat,
    linear-gradient(136deg, transparent 0 47%, rgba(141, 70, 239, .07) 48% 49%, transparent 50%) 76% 83% / 74px 74px no-repeat,
    linear-gradient(136deg, transparent 0 47%, rgba(239, 43, 168, .06) 48% 49%, transparent 50%) 18% 78% / 58px 58px no-repeat;
  content: "";
  filter: blur(.2px) drop-shadow(0 0 18px rgba(119, 52, 212, .12));
  opacity: .7;
  animation: aikogxLoaderFragments 8s infinite alternate ease-in-out;
}

@keyframes aikogxLoaderFog {
  0% { opacity: .56; transform: translate3d(-1%, 1%, 0) scale(1); }
  100% { opacity: .9; transform: translate3d(1%, -1%, 0) scale(1.035); }
}

@keyframes aikogxLoaderFragments {
  0% { transform: translate3d(0, 2px, 0); }
  100% { transform: translate3d(0, -3px, 0); }
}

.aikogx-loader__hud {
  position: absolute;
  inset: clamp(18px, 2.2vw, 42px);
  z-index: 2;
  border: 1px solid rgba(170, 88, 224, .075);
  clip-path: polygon(20px 0, calc(100% - 52px) 0, calc(100% - 32px) 20px, 100% 20px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 44px 100%, 24px calc(100% - 20px), 0 calc(100% - 20px), 0 20px);
  opacity: .82;
  pointer-events: none;
  transition: border-color .24s ease, filter .24s ease, opacity .24s ease;
}

.aikogx-loader__hud::before,
.aikogx-loader__hud::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}

.aikogx-loader__hud::before {
  background:
    linear-gradient(90deg, var(--akgx-loader-home-magenta), rgba(139, 70, 239, .12)) 18px 0 / min(25vw, 330px) 1px,
    linear-gradient(90deg, rgba(139, 70, 239, .16), var(--akgx-loader-home-magenta)) calc(100% - 24px) 100% / min(20vw, 250px) 1px,
    linear-gradient(135deg, transparent 47%, var(--akgx-loader-home-magenta) 49% 51%, transparent 53%) 0 0 / 40px 40px,
    linear-gradient(315deg, transparent 47%, var(--akgx-loader-home-violet) 49% 51%, transparent 53%) 100% 100% / 50px 50px;
  background-repeat: no-repeat;
  opacity: .72;
}

.aikogx-loader__hud::after {
  background:
    linear-gradient(90deg, transparent 0 28%, rgba(239, 43, 168, .72) 28% 36%, transparent 36% 44%, rgba(139, 70, 239, .52) 44% 49%, transparent 49%) 34px 10px / 150px 2px,
    repeating-linear-gradient(90deg, rgba(239, 43, 168, .7) 0 4px, transparent 4px 8px) calc(100% - 42px) 12px / 52px 2px,
    linear-gradient(180deg, var(--akgx-loader-home-violet), transparent) 8px calc(100% - 30px) / 1px 72px,
    linear-gradient(90deg, var(--akgx-loader-home-magenta), transparent) calc(100% - 16px) calc(100% - 10px) / 86px 1px;
  background-repeat: no-repeat;
  opacity: .56;
}

.aikogx-loader__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1040px);
  padding: 0 20px;
}

.aikogx-loader__sigil {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.25rem;
  opacity: 1;
  transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .32s;
}

.aikogx-loader__sigil::before,
.aikogx-loader__sigil::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(180, 140, 237, .42);
  content: "";
  transform: rotate(45deg);
}

.aikogx-loader__sigil::after {
  inset: -5px;
  border-color: rgba(139, 70, 239, .18);
  box-shadow: 0 0 26px rgba(239, 43, 168, .16);
}

.aikogx-loader__sigil svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--akgx-loader-home-magenta);
  stroke-width: 1.35;
  filter: drop-shadow(0 0 9px rgba(239, 43, 168, .48));
  animation: aikogxLoaderSigilPulse 2.8s infinite alternate ease-in-out;
}

.aikogx-loader__sigil-inner {
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  background: var(--akgx-loader-home-magenta);
  box-shadow: 0 0 8px #fff, 0 0 22px rgba(239, 43, 168, .78);
  transform: rotate(45deg);
  animation: aikogxLoaderCorePulse 1.9s infinite alternate ease-in-out;
}

@keyframes aikogxLoaderSigilPulse {
  0% { opacity: .72; transform: scale(.97); }
  100% { opacity: 1; transform: scale(1.035); }
}

@keyframes aikogxLoaderCorePulse {
  0% { opacity: .72; transform: rotate(45deg) scale(.88); }
  100% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}

.aikogx-loader__brand {
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: 2.15rem;
  text-align: center;
  opacity: 1;
  transition: opacity .44s ease, transform .44s ease;
}

.aikogx-loader__brand::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 165%;
  height: 132px;
  background: radial-gradient(ellipse at center, rgba(239, 43, 168, .12) 0%, rgba(125, 52, 216, .08) 35%, transparent 72%);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.aikogx-loader__brand-entry {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: .62rem;
  color: rgba(210, 166, 247, .78);
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .25em;
  line-height: 1;
}

.aikogx-loader__brand-entry::before,
.aikogx-loader__brand-entry::after {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 43, 168, .65));
  content: "";
}

.aikogx-loader__brand-entry::after {
  background: linear-gradient(90deg, rgba(239, 43, 168, .65), transparent);
}

.aikogx-loader__brand-name {
  margin-left: .13em;
  color: var(--akgx-loader-warm);
  background: linear-gradient(102deg, var(--akgx-loader-warm) 0 72%, #ffc8e8 84%, var(--akgx-loader-home-magenta) 100%);
  background-clip: text;
  font-size: clamp(2.5rem, 4.25vw, 4.15rem);
  font-weight: 760;
  letter-spacing: .13em;
  line-height: .98;
  text-shadow: 0 0 24px rgba(239, 43, 168, .12);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aikogx-loader__brand-studio {
  margin: 10px 0 0 .34em;
  color: var(--akgx-loader-home-magenta);
  font-size: clamp(.72rem, 1.2vw, 1rem);
  font-weight: 650;
  letter-spacing: .34em;
  line-height: 1.2;
  text-shadow: 0 0 14px rgba(239, 43, 168, .28);
}

.aikogx-loader__status {
  position: relative;
  width: 100%;
  height: 20px;
  margin-bottom: 1.25rem;
  text-align: center;
}

.aikogx-loader__status-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #caa7ef;
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: .235em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity .16s ease, transform .18s ease, visibility 0s linear .16s;
}

.aikogx-loader__status-text.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

.aikogx-loader__status-text--gate {
  color: var(--akgx-loader-warm);
  font-weight: 700;
  text-shadow: 0 0 10px #fff;
}

.aikogx-loader__status-text--welcome {
  color: var(--akgx-loader-warm);
  font-size: .9rem;
  letter-spacing: .4em;
}

.aikogx-loader__bar-container {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: center;
  width: var(--akgx-loader-bar-width);
  margin-bottom: 2rem;
  opacity: 1;
  transition: transform .52s cubic-bezier(.16, 1, .3, 1), opacity .42s ease .08s;
}

.aikogx-loader__bar-terminal {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid var(--akgx-loader-violet-light);
  opacity: .5;
}

.aikogx-loader__bar-terminal--left {
  border-right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.aikogx-loader__bar-terminal--right {
  border-left: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.aikogx-loader__bar-track {
  position: relative;
  flex: 1 1 auto;
  height: var(--akgx-loader-bar-height);
  overflow: visible;
  border: 1px solid rgba(230, 0, 255, .2);
  background: rgba(26, 10, 46, .5);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.aikogx-loader__bar-track::after {
  position: absolute;
  bottom: -5px;
  left: 5%;
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 0, 255, .3), transparent);
  content: "";
}

.aikogx-loader__progress {
  position: relative;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--akgx-loader-magenta) 100%);
  box-shadow: 0 0 15px var(--akgx-loader-magenta-glow);
}

.aikogx-loader__progress-glow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 15px;
  background: #fff;
  filter: blur(4px);
  opacity: .9;
  transform: translateY(-50%);
}

.aikogx-loader__percent {
  flex: 0 0 58px;
  color: var(--akgx-loader-white-violet);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
  letter-spacing: .2em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, .3);
}

.aikogx-loader.is-opening .aikogx-loader__progress {
  background: #fff;
  box-shadow: 0 0 30px #fff;
  transition: width .1s, background .24s;
}

.aikogx-loader.is-opening .aikogx-loader__bar-container {
  opacity: 0;
  transform: scaleX(1.1);
}

.aikogx-loader.is-opening .aikogx-loader__sigil {
  opacity: 0;
  transform: scale(2.5) rotate(90deg);
}

.aikogx-loader.is-opening .aikogx-loader__brand {
  opacity: 0;
  transform: translateY(-20px);
}

.aikogx-loader.is-opening .aikogx-loader__hud {
  border-color: rgba(239, 43, 168, .24);
  filter: drop-shadow(0 0 12px rgba(239, 43, 168, .18));
  opacity: 1;
}

.aikogx-loader.is-paused .aikogx-loader__world::before,
.aikogx-loader.is-paused .aikogx-loader__world::after,
.aikogx-loader.is-paused .aikogx-loader__sigil svg,
.aikogx-loader.is-paused .aikogx-loader__sigil-inner {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  :root { --akgx-loader-bar-width: 85vw; }

  .aikogx-loader__content { padding-right: 16px; padding-left: 16px; }
  .aikogx-loader__sigil { width: 43px; height: 43px; margin-bottom: 1.05rem; }
  .aikogx-loader__brand { margin-bottom: 1.85rem; }
  .aikogx-loader__brand-entry { margin-bottom: .5rem; font-size: .5rem; }
  .aikogx-loader__brand-name { font-size: clamp(2.1rem, 10.5vw, 3rem); }
  .aikogx-loader__brand-studio { font-size: clamp(.67rem, 3.3vw, .86rem); }
  .aikogx-loader__status { margin-bottom: 1.2rem; }
  .aikogx-loader__status-text { font-size: .65rem; letter-spacing: .2em; }
  .aikogx-loader__status-text--welcome { font-size: .72rem; letter-spacing: .25em; }
  .aikogx-loader__bar-container { gap: 9px; }
  .aikogx-loader__percent { flex-basis: 48px; font-size: .8rem; }
  .aikogx-loader__hud { inset: 14px; }
}

@media (max-width: 430px) {
  .aikogx-loader__brand-name { letter-spacing: .105em; }
  .aikogx-loader__brand-studio { letter-spacing: .28em; }
  .aikogx-loader__brand-entry::before,
  .aikogx-loader__brand-entry::after { width: 14px; }
  .aikogx-loader__bar-terminal { width: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .aikogx-loader,
  .aikogx-loader *,
  .aikogx-loader *::before,
  .aikogx-loader *::after {
    animation: none !important;
    transition-duration: .08s !important;
    transition-delay: 0s !important;
  }

  .aikogx-loader.is-opening .aikogx-loader__sigil,
  .aikogx-loader.is-opening .aikogx-loader__bar-container,
  .aikogx-loader.is-opening .aikogx-loader__brand {
    transform: none;
  }
}
