:root{
  --white: #FBF9F4;
  --primary: #BE5D91;
  --secondary: #99CEFF;
  --size: 50px;
  --dark: #0C1721;
}

body{
  margin: 0;
}

#planr-loader-container{
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
}


#planr-loader-scene{
  position: relative;
  width: 400px;
  height: 400px;
  animation-name: mockAnim;
  opacity: 0;
}

#blur-spheres{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: opacity 0.3s ease-out;
}

#blur-spheres.active{
  opacity: 0.8;
  animation-name: spinBlur;
}

#blur-spheres > span{
  filter: blur(20px);
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 100%;
  position: absolute;
}

#blur-spheres > span:first-of-type{
  background-color: var(--secondary);
  transform: translateX(250px);
}
#blur-spheres > span:last-of-type{
  background-color: var(--primary);
  transform: translateX(-250px);
}

.anim{
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.delay{
  animation-delay: 0.3s;
}

#loader-p{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-360deg) scale(0);
  width: 60px;
  height: 60px;
  animation-name: pAnim;
}

#loader-p > *{
  position: absolute;
}

#pink-dot{
  /*mask-clip: url('#blue-dot');*/
  animation-name: pinkDotAnim;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pink-dot #bar{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: barAnim;
}
#pink-dot .dot{
  opacity: 1;
  position: relative;
  animation-name: pinkDotTempAnim;
}

#blue-dot{
  animation-name: blueDotAnim;
}

#blue-dot > span{
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--white);
  border-radius: 100%;
  clip-path: inset(0% 100% 0% 0%);
  animation-name: blueDotMaskAnim;
}

.dot{
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 100%;
}


#blue-dot.dot{ background-color: var(--secondary); }
#pink-dot .dot{ background-color: var(--primary); }

#bar img{ width: 27px; }

#loader-text{
  width: 140px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-200px, -9px);
  opacity: 0;
  animation-name: textAnim;
}


@keyframes blueDotAnim {
  25%{ transform: translateX(200px); }
  40%{ transform: translateX(13px) translateY(6px); }
  45%{ transform: translateX(13px) translateY(6px); }
  57%{ transform: translateX(13px) translateY(6px); }
  75%{ transform: translateX(13px) translateY(6px); }
  100%{ transform: translateX(13px) translateY(6px); }
}

@keyframes blueDotMaskAnim {
    25%{ transform: inset(0% 100% 0% 0%); }
    35%{ clip-path: inset(0% 100% 0% 0%); }
    41%{ clip-path: inset(0% 77% 0% 0%); }
    45%{ clip-path: inset(0% 77% 0% 0%); }
    57%{ clip-path: inset(0% 77% 0% 0%); }
    75%{ clip-path: inset(0% 77% 0% 0%); }
    100%{ clip-path: inset(0% 77% 0% 0%); }
}

@keyframes pinkDotAnim {
  25%{ transform: translateX(-200px); }
  40%{ transform: translateX(0px); }
  45%{ transform: translateX(0px); }
  57%{ transform: translateX(0px); }
  75%{ transform: translateX(0px); }
  100%{ transform: translateX(0px); }
}

@keyframes barAnim {
  15%{ opacity: 0; }
  17%{ opacity: 1; }
  45%{ opacity: 1; }
  57%{ opacity: 1; }
  75%{ opacity: 1; }
  100%{ opacity: 1; }
}

@keyframes pinkDotTempAnim {
  15%{ opacity: 1; }
  17%{ opacity: 0; }
  45%{ opacity: 0; }
  57%{ opacity: 0; }
  75%{ opacity: 0; }
  100%{ opacity: 0; }
}

@keyframes pAnim {
  25%{ transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  40%{ transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  45%{ transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  57%{ transform: translate(-110px, -50%) rotate(0deg) scale(1); }
  75%{ transform: translate(-110px, -50%) rotate(0deg) scale(1); }
  75%{ transform: translate(-110px, -50%) rotate(0deg) scale(1); }
  100%{ transform: translate(-110px, -50%) rotate(0deg) scale(1); }
}

@keyframes textAnim {
  25%{  transform: translate(-200px, -9px); opacity: 0; }
  40%{  transform: translate(-200px, -9px); opacity: 0;  }
  45%{  transform: translate(-200px, -9px); opacity: 0;  }
  57%{  transform: translate(-15px, -9px); opacity: 1;  }
  75%{  transform: translate(-15px, -9px); opacity: 1;  }
  100%{ transform: translate(-15px, -9px); opacity: 1;  }
}


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

@keyframes mockAnim {
  1%{ opacity: 1; }
  15%{ opacity: 1; }
  25%{ opacity: 1; }
  40%{ opacity: 1; }
  45%{ opacity: 1; }
  57%{ opacity: 1; }
  75%{ opacity: 1; }
  75%{ opacity: 1; }
  100%{ opacity: 1; }
}