/****************************************************
 * PAGE TRANSITION STATES
 ****************************************************/
:host {
	display: block !important;
	width: 100%;
	margin: 0;
	top: 0;
	background: linear-gradient(145deg, #f1f5f9 0%, #e6edf4 100%);
}
html.jv-loading body {
  overflow: hidden;
}

/****************************************************
 * GLOBAL LOADER
 ****************************************************/
.jv-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at center, #f5f7fa 0%, #e2e8f0 100%);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.9s ease,
    background 0.9s ease;
}

/****************************************************
 * PROGRESSIVE FADE
 ****************************************************/
.jv-loader.is-fading {
  opacity: 0.35;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background:
    radial-gradient(circle at center,
      rgba(245,247,250,0.55) 0%,
      rgba(226,232,240,0.35) 100%);
}

/****************************************************
 * FINAL REMOVE
 ****************************************************/
.jv-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/****************************************************
 * CENTER WRAP
 ****************************************************/
.jv-loader__wrap {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

/****************************************************
 * OUTER RING
 ****************************************************/
.jv-loader__ring {
  position: absolute;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  border:
    2px solid rgba(0,0,0,0.06);

  border-top:
    2px solid rgba(96,165,250,0.95);

  animation:
    jv-spin 1.25s linear infinite;

  filter:
    drop-shadow(0 0 18px rgba(96,165,250,0.25));
}

/****************************************************
 * CORE
 ****************************************************/
.jv-loader__core {
  width: 92px;
  height: 92px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle,
      #ffffff 0%,
      #f0f4f8 65%,
      #e2e8f0 100%);

  box-shadow:
    0 0 18px rgba(96,165,250,0.18),
    0 0 60px rgba(96,165,250,0.08);

  animation:
    jv-pulse 1.8s ease-in-out infinite;
}

/****************************************************
 * TEXT
 ****************************************************/
.jv-loader__text {
  color: #1e293b;

  font-size: 22px;
  font-weight: 700;

  letter-spacing: 0.28em;

  /* text-transform: uppercase; */

  animation:
    jv-glow 1.8s ease-in-out infinite;
}

/****************************************************
 * ANIMATIONS
 ****************************************************/
@keyframes jv-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes jv-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes jv-glow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(96,165,250,0.15);
  }

  50% {
    text-shadow:
      0 0 28px rgba(96,165,250,0.65);
  }
}