/* =========================================================
   RT PAGE LOADER
   Rotating outer border -> RT reveal -> fade to portfolio
   ========================================================= */

html.rt-loader-active,
html.rt-loader-active body{
  overflow:hidden !important;
}

.rt-page-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(10,75,120,.16),transparent 34%),
    radial-gradient(circle at 50% 50%,rgba(82,120,255,.06),transparent 50%),
    #020a16;
  opacity:1;
  visibility:visible;
  transition:
    opacity .65s ease,
    visibility .65s ease;
}

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

.rt-loader-stage{
  display:grid;
  place-items:center;
  gap:22px;
  text-align:center;
}

.rt-loader-orbit{
  position:relative;
  width:154px;
  height:154px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 22px rgba(42,226,255,.15));
}

.rt-loader-orbit::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(42,226,255,.08),transparent 62%);
  animation:rtLoaderAura 2s ease-in-out infinite;
}

.rt-loader-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

.rt-loader-ring.ring-one{
  inset:0;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 42deg,
      #2ae2ff 72deg,
      #5278ff 132deg,
      #9d7cff 184deg,
      transparent 224deg 360deg
    );
  -webkit-mask:
    radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:
    radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:rtLoaderSpin 1.35s linear infinite;
  filter:
    drop-shadow(0 0 7px rgba(42,226,255,.60))
    drop-shadow(0 0 15px rgba(82,120,255,.35));
}

.rt-loader-ring.ring-two{
  inset:9px;
  border:1px solid rgba(42,226,255,.16);
  box-shadow:
    0 0 18px rgba(42,226,255,.10) inset,
    0 0 20px rgba(42,226,255,.06);
  animation:rtLoaderSpinReverse 2.4s linear infinite;
}

.rt-loader-ring.ring-two::before,
.rt-loader-ring.ring-two::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#67e8ff;
  box-shadow:
    0 0 8px #67e8ff,
    0 0 18px rgba(82,120,255,.7);
}

.rt-loader-ring.ring-two::before{
  top:-4px;
  left:50%;
  transform:translateX(-50%);
}

.rt-loader-ring.ring-two::after{
  bottom:-4px;
  left:50%;
  transform:translateX(-50%);
}

.rt-loader-ring.ring-three{
  inset:20px;
  border:1px dashed rgba(123,154,255,.18);
  animation:rtLoaderSpin 5s linear infinite;
}

.rt-loader-core{
  position:relative;
  z-index:2;
  width:104px;
  height:104px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 38% 28%,rgba(42,226,255,.14),transparent 35%),
    linear-gradient(145deg,rgba(6,28,52,.96),rgba(2,13,27,.98));
  border:1px solid rgba(42,226,255,.15);
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 28px rgba(42,226,255,.12),
    inset 0 0 24px rgba(82,120,255,.055);
  overflow:hidden;
}

.rt-loader-core::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(115deg,transparent 24%,rgba(255,255,255,.08) 44%,transparent 61%);
  transform:translateX(-120%);
  animation:rtLoaderCoreSweep 1.5s ease-in-out infinite;
}

.rt-loader-text{
  position:relative;
  z-index:2;
  font:800 48px/1 Rajdhani,Arial,sans-serif;
  letter-spacing:1px;
  background:linear-gradient(135deg,#2ae2ff,#5278ff 56%,#b8efff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  transform:scale(.68);
  filter:blur(9px);
  text-shadow:none;
  animation:rtLoaderTextReveal .62s cubic-bezier(.16,.84,.3,1) 1.05s forwards;
}

.rt-loader-spark{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7cecff;
  box-shadow:
    0 0 7px #7cecff,
    0 0 14px rgba(82,120,255,.75);
  opacity:.85;
}

.rt-loader-spark.spark-one{
  top:9px;
  right:30px;
  animation:rtSparkPulse 1.1s ease-in-out infinite;
}

.rt-loader-spark.spark-two{
  bottom:20px;
  left:13px;
  animation:rtSparkPulse 1.3s ease-in-out infinite .25s;
}

.rt-loader-spark.spark-three{
  right:4px;
  bottom:44px;
  width:3px;
  height:3px;
  animation:rtSparkPulse 1.5s ease-in-out infinite .5s;
}

.rt-loader-caption{
  color:#7fa7c1;
  font:700 9px/1.2 "Inter",Arial,sans-serif;
  letter-spacing:2.6px;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(5px);
  animation:rtCaptionReveal .45s ease 1.45s forwards;
}

.rt-loader-progress{
  width:150px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(63,133,180,.13);
}

.rt-loader-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2ae2ff,#5278ff,#9f7cff);
  box-shadow:0 0 10px rgba(42,226,255,.45);
  animation:rtProgressFill 1.95s cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes rtLoaderSpin{
  to{transform:rotate(360deg)}
}

@keyframes rtLoaderSpinReverse{
  to{transform:rotate(-360deg)}
}

@keyframes rtLoaderAura{
  50%{
    transform:scale(1.07);
    opacity:.65;
  }
}

@keyframes rtLoaderTextReveal{
  0%{
    opacity:0;
    transform:scale(.68);
    filter:blur(9px);
  }
  55%{
    opacity:1;
    transform:scale(1.08);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}

@keyframes rtLoaderCoreSweep{
  0%,25%{transform:translateX(-120%)}
  72%,100%{transform:translateX(120%)}
}

@keyframes rtSparkPulse{
  50%{
    opacity:.25;
    transform:scale(.65);
  }
}

@keyframes rtCaptionReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes rtProgressFill{
  0%{width:0}
  35%{width:28%}
  68%{width:70%}
  100%{width:100%}
}

@media(max-width:480px){
  .rt-loader-orbit{
    width:132px;
    height:132px;
  }

  .rt-loader-core{
    width:88px;
    height:88px;
  }

  .rt-loader-text{
    font-size:40px;
  }

  .rt-loader-progress{
    width:132px;
  }
}

@media(prefers-reduced-motion:reduce){
  .rt-loader-ring,
  .rt-loader-core::before,
  .rt-loader-spark,
  .rt-loader-progress span{
    animation:none !important;
  }

  .rt-loader-text,
  .rt-loader-caption{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  .rt-loader-progress span{
    width:100% !important;
  }
}