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

#planr-banner-scene {
  position: relative;
  width: 400px;
  height: 400px;
  -webkit-animation-name: mockAnim;
          animation-name: mockAnim;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
}
#planr-banner-scene.disapear {
  transition: opacity 0.4s cubic-bezier(0.63, 0.15, 0.36, 0.99), transform 0.4s cubic-bezier(0.63, 0.15, 0.36, 0.99);
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}
#planr-banner-scene .anim {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
#planr-banner-scene .delay {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#planr-banner-scene h3 {
  position: absolute;
  top: 64%;
  left: 50%;
  font-size: 22px;
  opacity: 0;
  transform: translateX(-80%);
  font-weight: lighter;
  -webkit-animation-name: sloganAnim;
          animation-name: sloganAnim;
}
#planr-banner-scene #loader-p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-360deg) scale(0);
  width: 60px;
  height: 60px;
  -webkit-animation-name: pAnim;
          animation-name: pAnim;
}
#planr-banner-scene #loader-p > * {
  position: absolute;
}
#planr-banner-scene #pink-dot {
  /*mask-clip: url('#blue-dot');*/
  -webkit-animation-name: pinkDotAnim;
          animation-name: pinkDotAnim;
  display: flex;
  justify-content: center;
  align-items: center;
}
#planr-banner-scene #pink-dot #bar {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation-name: barAnim;
          animation-name: barAnim;
}
#planr-banner-scene #pink-dot .dot {
  opacity: 1;
  position: relative;
  -webkit-animation-name: pinkDotTempAnim;
          animation-name: pinkDotTempAnim;
}
#planr-banner-scene #blue-dot {
  -webkit-animation-name: blueDotAnim;
          animation-name: blueDotAnim;
}
#planr-banner-scene #blue-dot > span {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--white);
  border-radius: 100%;
  -webkit-clip-path: inset(0% 100% 0% 0%);
          clip-path: inset(0% 100% 0% 0%);
  -webkit-animation-name: blueDotMaskAnim;
          animation-name: blueDotMaskAnim;
}
#planr-banner-scene .dot {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 100%;
}
#planr-banner-scene #blue-dot.dot {
  background-color: var(--secondary);
}
#planr-banner-scene #pink-dot .dot {
  background-color: var(--primary);
}
#planr-banner-scene #bar img {
  width: 27px;
}
#planr-banner-scene #loader-text {
  width: 140px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-200px, -9px);
  opacity: 0;
  -webkit-animation-name: textAnim;
          animation-name: textAnim;
}
@-webkit-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 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);
  }
}
@-webkit-keyframes blueDotMaskAnim {
  25% {
    transform: inset(0% 100% 0% 0%);
  }
  35% {
    -webkit-clip-path: inset(0% 100% 0% 0%);
            clip-path: inset(0% 100% 0% 0%);
  }
  41% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  45% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  57% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  75% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  100% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
}
@keyframes blueDotMaskAnim {
  25% {
    transform: inset(0% 100% 0% 0%);
  }
  35% {
    -webkit-clip-path: inset(0% 100% 0% 0%);
            clip-path: inset(0% 100% 0% 0%);
  }
  41% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  45% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  57% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  75% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
  100% {
    -webkit-clip-path: inset(0% 77% 0% 0%);
            clip-path: inset(0% 77% 0% 0%);
  }
}
@-webkit-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 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);
  }
}
@-webkit-keyframes barAnim {
  15% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  57% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes barAnim {
  15% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  57% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes pinkDotTempAnim {
  15% {
    opacity: 1;
  }
  17% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pinkDotTempAnim {
  15% {
    opacity: 1;
  }
  17% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-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);
  }
  100% {
    transform: translate(-110px, -50%) rotate(0deg) scale(1);
  }
}
@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);
  }
  100% {
    transform: translate(-110px, -50%) rotate(0deg) scale(1);
  }
}
@-webkit-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 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;
  }
}
@-webkit-keyframes mockAnim {
  1% {
    transform: translate(-50%, 0px);
  }
  15% {
    transform: translate(-50%, 0px);
  }
  25% {
    transform: translate(-50%, 0px);
  }
  40% {
    transform: translate(-50%, 0px);
  }
  45% {
    transform: translate(-50%, 0px);
  }
  57% {
    transform: translate(-50%, 0px);
  }
  75% {
    transform: translateY(-50%, -100px);
  }
  100% {
    transform: translateY(-50%, -100px);
  }
}
@keyframes mockAnim {
  1% {
    transform: translate(-50%, 0px);
  }
  15% {
    transform: translate(-50%, 0px);
  }
  25% {
    transform: translate(-50%, 0px);
  }
  40% {
    transform: translate(-50%, 0px);
  }
  45% {
    transform: translate(-50%, 0px);
  }
  57% {
    transform: translate(-50%, 0px);
  }
  75% {
    transform: translateY(-50%, -100px);
  }
  100% {
    transform: translateY(-50%, -100px);
  }
}
@-webkit-keyframes sloganAnim {
  25% {
    transform: translateX(-80%);
    opacity: 0;
  }
  40% {
    transform: translateX(-80%);
    opacity: 0;
  }
  45% {
    transform: translateX(-80%);
    opacity: 0;
  }
  57% {
    transform: translateX(-80%);
    opacity: 0;
  }
  75% {
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes sloganAnim {
  25% {
    transform: translateX(-80%);
    opacity: 0;
  }
  40% {
    transform: translateX(-80%);
    opacity: 0;
  }
  45% {
    transform: translateX(-80%);
    opacity: 0;
  }
  57% {
    transform: translateX(-80%);
    opacity: 0;
  }
  75% {
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}/*# sourceMappingURL=logoanim.css.map */