html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html {
  --offset-bottom: 70px;
}

@keyframes planeMove {
  50% {
    transform: translateY(-5%);
  }
}
@keyframes planeRotate {
  0%,
  100% {
    transform: rotate(-2deg) translateX(-2%);
  }
  50% {
    transform: rotate(2deg) translateX(2%);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.85);
  }
}

@keyframes circlePulse {
  50% {
    transform: scale(1);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.pr-container {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url('./assets/bg.webp'), linear-gradient(#0b0c21, #03030f);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 70px 0;
  box-sizing: border-box;
}

@keyframes noise {
  0% {
    background-position: -71px 113px;
  }
  33% {
    background-position: 89px -101px;
  }
  66% {
    background-position: -107px 79px;
  }
}
.pr-noise {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('./assets/noise.svg');
  background-size: 300px 300px;
  /* animation: noise 2000ms steps(10) infinite; */
  opacity: 0.3;
  mix-blend-mode: color-dodge;
}

.pr-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pr-logo {
  margin-bottom: 32px;
  width: 88px;
  height: 23px;
}

.pr-middle {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.pr-animation {
  position: relative;
  margin-top: -72px;
  height: 200px;
  width: 200px;
}

.pr-plane {
  position: absolute;
  width: 420px;
  height: 228px;
  left: -105px;
  top: -25px;
  animation: planeRotate ease-in-out 3s infinite;
  transform-origin: 30% -20%;
}

.pr-plane::before {
  display: block;
  content: '';
  background: url('./assets/plane.png');
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: planeMove ease-in-out 1.8s infinite;
}

.pr-shine {
  background: radial-gradient(
    circle,
    rgba(240, 53, 91, 0.4),
    transparent,
    transparent
  );
  width: 800px;
  height: 800px;
  position: absolute;
  left: -300px;
  top: -300px;
  animation: pulse cubic-bezier(0.65, 0, 0.35, 1) 5s infinite;
  filter: blur(24px);
}

.pr-circle-1 {
  --size: 240px;
  --border: 3px;
  --opacity: 0.3;
  --rotation-duration: 30s;
  --rotation-direction: normal;
  --pulse-delay: 0s;
}
.pr-circle-2 {
  --size: 360px;
  --border: 3px;
  --opacity: 0.15;
  --rotation-duration: 36s;
  --rotation-direction: reverse;
  --pulse-delay: 300ms;
}
.pr-circle-3 {
  --size: 500px;
  --border: 2px;
  --opacity: 0.15;
  --rotation-duration: 42s;
  --rotation-direction: normal;
  --pulse-delay: 600ms;
}
.pr-circle-4 {
  --size: 650px;
  --border: 1px;
  --opacity: 0.15;
  --rotation-duration: 48s;
  --rotation-direction: reverse;
  --pulse-delay: 900ms;
}
.pr-circle-5 {
  --size: 810px;
  --border: 2px;
  --opacity: 0.05;
  --rotation-duration: 54s;
  --rotation-direction: normal;
  --pulse-delay: 1200ms;
}

.pr-circle {
  position: absolute;
  left: calc((200px - var(--size)) * 0.5);
  top: calc((200px - var(--size)) * 0.5);
  width: var(--size);
  height: var(--size);
  transform-origin: calc(var(--size) * 0.5) calc(var(--size) * 0.5);
  transform: scale(0.8);
  animation: circlePulse ease-in-out 3s infinite var(--pulse-delay);
}

.pr-circle::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 800px;
  border: var(--border) dashed #ff6181;
  opacity: var(--opacity);
  animation: rotate linear var(--rotation-duration) infinite
    var(--rotation-direction);
}

.pr-main-logo {
  background: url('./assets/main-logo.svg');
  width: 309px;
  height: 99px;
  position: absolute;
  left: -55px;
  top: 132px;
}

@media (max-width: 600px) or (max-height: 600px) {
  .pr-middle {
    transform: scale(0.64);
    margin-top: 20px;
  }
  .pr-logo {
    width: 62px;
    height: 16px;
    margin-bottom: 24px;
  }
}

@media (max-height: 400px) {
  html {
    --offset-bottom: 35px;
  }
  .pr-logo {
    display: none;
  }
  .pr-middle {
    margin-top: 30px;
  }
}

@media (max-height: 375px) {
  html {
    --offset-bottom: 0px;
  }
  .pr-middle {
    margin-top: 100px;
  }
  .pr-progress {
    display: none;
  }
}

.pr-progress {
  width: 280px;
  max-width: calc(100% - 30px);
  height: 9px;
  border-radius: 9px;
  margin: 0px -30px 0;
  position: relative;
}
.pr-progress__value,
.pr-progress__line {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.pr-progress__value {
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #161024;
  height: 7px !important;
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  text-indent: 10px;
  line-height: 50px;
}
.pr-progress,
.pr-progress__line {
  background: #42afff;
  opacity: 1 !important;
}
.pr-progress__line {
  width: 0%;
  transition: 8s !important;
  transition-timing-function: linear;
}
.pr-progress[progress='0'] .pr-progress__line {
  width: 33%;
  transition: 5s;
  transition-timing-function: linear;
}
.pr-progress[progress='1'] .pr-progress__line {
  width: 66%;
  transition: 3s;
  transition-timing-function: linear;
}
.pr-progress[progress='2'] .pr-progress__line {
  width: 99%;
  transition: 1s;
  transition-timing-function: linear;
}
.pr-progress[progress='3'] .pr-progress__line {
  width: 100%;
  transition: 0.3s;
  transition-timing-function: linear;
}