/* =========================================================
   SHIFTLYNX PAGE LOADING ANIMATION
========================================================= */

:root {
  --shiftlynx-loader-bg:
    rgba(3, 9, 17, 0.985);

  --shiftlynx-loader-border:
    rgba(79, 190, 255, 0.16);

  --shiftlynx-loader-blue:
    #29c2ff;

  --shiftlynx-loader-deep-blue:
    #297cff;

  --shiftlynx-loader-text:
    #eef9ff;

  --shiftlynx-loader-muted:
    #7890a8;
}

.shiftlynx-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: grid;
  place-items: center;

  padding:
    max(22px, env(safe-area-inset-top))
    22px
    max(22px, env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(37, 162, 255, 0.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 12%,
      rgba(57, 95, 255, 0.08),
      transparent 28%
    ),
    var(--shiftlynx-loader-bg);

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 240ms ease,
    visibility 240ms ease;
}

.shiftlynx-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.shiftlynx-page-loader.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shiftlynx-loader-inner {
  display: flex;
  align-items: center;
  flex-direction: column;

  width: min(100%, 330px);

  text-align: center;
}

.shiftlynx-loader-logo-wrap {
  position: relative;

  display: grid;
  place-items: center;

  width: 118px;
  height: 118px;

  border:
    1px solid var(--shiftlynx-loader-border);

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 24px 70px rgba(0, 0, 0, 0.34),
    0 0 55px rgba(41, 194, 255, 0.08);

  overflow: hidden;
}

.shiftlynx-loader-logo-wrap::before {
  content: "";

  position: absolute;
  inset: -45%;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(41, 194, 255, 0.78) 48deg,
      transparent 95deg,
      transparent 360deg
    );

  animation:
    shiftlynx-loader-spin
    1.9s
    linear
    infinite;
}

.shiftlynx-loader-logo-wrap::after {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(43, 165, 255, 0.12),
      transparent 60%
    ),
    #06111d;
}

.shiftlynx-loader-logo {
  position: relative;
  z-index: 2;

  display: block;

  width: 86px;
  max-height: 70px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 18px
      rgba(41, 194, 255, 0.24)
    );

  animation:
    shiftlynx-loader-breathe
    1.55s
    ease-in-out
    infinite;
}

.shiftlynx-loader-copy {
  margin-top: 21px;
}

.shiftlynx-loader-copy strong {
  display: block;

  color: var(--shiftlynx-loader-text);

  font-size: 0.92rem;
  font-weight: 820;
  letter-spacing: 0.01em;
}

.shiftlynx-loader-copy span {
  display: block;

  margin-top: 6px;

  color: var(--shiftlynx-loader-muted);

  font-size: 0.69rem;
  line-height: 1.45;
}

.shiftlynx-loader-progress {
  position: relative;

  width: min(100%, 210px);
  height: 3px;

  margin-top: 19px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(113, 148, 184, 0.12);
}

.shiftlynx-loader-progress::after {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 42%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--shiftlynx-loader-blue),
      var(--shiftlynx-loader-deep-blue),
      transparent
    );

  box-shadow:
    0 0 16px
    rgba(41, 194, 255, 0.48);

  animation:
    shiftlynx-loader-progress
    1.1s
    ease-in-out
    infinite;
}

/* Page fade after loader closes */

html.shiftlynx-page-ready body {
  animation:
    shiftlynx-page-fade-in
    280ms
    ease
    both;
}

/* Avoid flicker before JS injects the loader */

html.shiftlynx-loading body {
  overflow: hidden;
}

@keyframes shiftlynx-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shiftlynx-loader-breathe {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shiftlynx-loader-progress {
  0% {
    left: -48%;
  }

  100% {
    left: 108%;
  }
}

@keyframes shiftlynx-page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shiftlynx-page-loader,
  .shiftlynx-loader-logo,
  .shiftlynx-loader-logo-wrap::before,
  .shiftlynx-loader-progress::after,
  html.shiftlynx-page-ready body {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Keep viewport-fixed UI truly attached to the browser viewport. */
html.academy-active.shiftlynx-page-ready body,
html.academy-active body {
  transform: none !important;
}