@font-face {
  font-family: "Nunito Sans";
  src: url("./NunitoSans-VariableFont_YTLC_opsz_wdth_wght-DD6HJfH_.ttf");
}
:root {
  --primary-navy-blue: #011875;
  --primary-white: #FFF;
  --accent-pink: #ED1580;
  --accent-purple: #60348D;
  --accent-sky-blue: #6FCFF4;
  --accent-green: #00E7C1;
  --accent-orange: #EA8537;
  --font-family: Nunito Sans, sans-serif;
  --base-unit: calc(1vw + 1vh);
  --anim-body-delay: 1s;
  --anim-main-duration: 1s;
  --anim-move-circle-duration: 2s;
  --blur: calc(var(--base-unit) * 5.34);
  --slide-width: 55vmax;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  align-items: baseline;
}

.loading {
  width: calc(var(--base-unit) * 14.6);
  max-width: 90%;
  height: calc(var(--base-unit) * 0.34);
  border-radius: calc(var(--base-unit) * 0.167);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.loading__progress {
  width: 1%;
  height: 100%;
  border-radius: calc(var(--base-unit) * 0.167);
  background: var(--primary-white, #FFF);
  transition: 1s;
  animation: progress 5s linear infinite forwards;
}

.circle {
  --circle-size: calc(var(--base-unit) * 21.3);
  position: absolute;
  width: var(--circle-size);
  height: var(--circle-size);
  flex-shrink: 0;
}

.circle__content {
  border-radius: 50%;
}

/* =========== CIRCLE 1 ================= */
.circle-1 {
  top: calc(var(--base-unit) * 0.5);
  left: calc(var(--base-unit) * -11.4);
  z-index: 1;
  animation: circle-1-move-anim var(--anim-move-circle-duration) ease-in-out forwards;
}

.circle-1__content {
  width: 100%;
  height: 100%;
  background: var(--accent-pink, #ED1580);
  animation: circle-1-slide-anim 6s ease-in-out 1s infinite alternate;
}

/* =========== CIRCLE 2 ================= */
.circle-2 {
  top: calc(var(--base-unit) * 12.8);
  left: calc(var(--base-unit) * -9.8);
  z-index: 2;
  animation: circle-2-move-anim var(--anim-move-circle-duration) ease-in-out forwards;
}

.circle-2__content {
  width: 100%;
  height: 100%;
  background: var(--accent-purple, #60348D);
  animation: circle-2-slide-anim 6s ease-in-out 1s infinite alternate;
}

/* =========== CIRCLE 3 ================= */
.circle-3 {
  top: calc(var(--base-unit) * 0.1);
  right: calc(var(--base-unit) * -15.5);
  z-index: 3;
  animation: circle-3-move-anim var(--anim-move-circle-duration) ease-in-out forwards;
}

.circle-3__content {
  width: 100%;
  height: 100%;
  background: var(--accent-green, #00E7C1);
  animation: circle-3-slide-anim 6s ease-in-out 1s infinite alternate;
}

/* =========== CIRCLE 4 ================= */
.circle-4 {
  top: calc(var(--base-unit) * 10.8);
  right: calc(var(--base-unit) * -12.8);
  z-index: 4;
  animation: circle-4-move-anim var(--anim-move-circle-duration) ease-in-out forwards;
}

.circle-4__content {
  width: 100%;
  height: 100%;
  background: var(--accent-sky-blue, #6FCFF4);
  animation: circle-4-slide-anim 6s ease-in-out 1s infinite alternate;
}

/* =========== CIRCLE 5 ================= */
.circle-5 {
  bottom: calc(var(--base-unit) * -17);
  z-index: 5;
  animation: circle-5-move-anim var(--anim-move-circle-duration) ease-in-out forwards;
}

.circle-5__content {
  width: 100%;
  height: 100%;
  background: var(--accent-sky-blue, #6FCFF4);
  animation: circle-5-pulse-anim 6s ease-in-out 1s infinite alternate;
}

.content {
  display: flex;
  justify-content: center;
}

.slide {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--base-unit) * 0.7);
  width: var(--slide-width);
  word-break: break-word;
}

.slide-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  gap: calc(var(--base-unit) * 1.65);
}

.slide__info--container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--base-unit) * 1.65);
}

.slide__title {
  font-size: calc(var(--base-unit) * 1.87);
  line-height: calc(var(--base-unit) * 2.34);
  font-style: normal;
  font-weight: 300;
  text-align: center;
}

.slide__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(var(--base-unit) * 5.6);
}
.slide__info--multiline {
  gap: calc(var(--base-unit) * 0.87);
}

.slide__info-text {
  font-size: calc(var(--base-unit) * 0.87);
  line-height: calc(var(--base-unit) * 1.15);
  font-style: normal;
  font-weight: 200;
  text-align: center;
  opacity: 0.7;
}
.slide__info-text--bold {
  font-weight: 600;
  margin-bottom: calc(var(--base-unit) * 0.5);
}

.slide__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--base-unit) * 1.1);
}

.status-container {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex: 1;
}

.status {
  font-size: calc(var(--base-unit) * 0.867);
  line-height: calc(var(--base-unit) * 1.13);
  font-style: normal;
  font-weight: 600;
  text-align: center;
}

.status__code {
  color: var(--accent-orange, #EA8537);
}

.additional-info {
  font-size: calc(var(--base-unit) * 0.6);
  line-height: calc(var(--base-unit) * 0.7);
  color: var(--primary-white, #FFF);
  text-align: center;
  font-style: normal;
  font-weight: 400;
  opacity: 0.5;
  padding: 0 calc(var(--base-unit) * 3.5);
}

.slide-auth-failed .slide__info, .slide-auth-expired .slide__info {
  padding: 0 calc(var(--base-unit) * 7);
}

.slide-content {
  display: flex;
  flex-direction: row;
  gap: calc(var(--base-unit) * 2.6);
}

.slide-contacts {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.slide-contacts__content {
  display: none;
}

.qrcode-container {
  width: calc(var(--base-unit) * 10.65);
  height: calc(var(--base-unit) * 10.65);
  padding: calc(var(--base-unit) * 1.3);
  border-radius: 10px;
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.15) 0%, rgba(221, 221, 221, 0.07) 48.93%, rgba(217, 217, 217, 0.15) 97.86%);
}

.qrcode-container__svg {
  width: 100%;
  height: 100%;
}

.slide-contacts__footer {
  display: flex;
  justify-content: center;
}

/* Network Status */
.network-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
  align-self: stretch;
}

.network-status__item {
  display: flex;
  flex-direction: row;
  gap: calc(var(--base-unit) * 0.35);
}

.network-status__label, .network-status__separator {
  color: var(--primary-white, #FFF);
  text-align: center;
  font-size: calc(var(--base-unit) * 0.87);
  line-height: calc(var(--base-unit) * 1.1);
  font-style: normal;
  font-weight: 600;
}

.network-status__content {
  font-size: calc(var(--base-unit) * 0.87);
  line-height: calc(var(--base-unit) * 1.1);
  font-style: normal;
  font-weight: 600;
}
.network-status__content--error {
  color: var(--accent-pink);
}
.network-status__content--success {
  color: var(--accent-green);
}

@keyframes bg-anim {
  from {
    background: #000;
  }
  to {
    background: var(--primary-navy-blue);
  }
}
@keyframes main-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes circle-1-move-anim {
  0% {
    transform: translate(92vw, 51vh) scale(0.4);
  }
  100% {
    transform: translate(0) scale(1);
  }
}
@keyframes circle-1-slide-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translate(calc(var(--base-unit) * -1.4), calc(var(--base-unit) * 11.3));
  }
}
@keyframes circle-2-move-anim {
  0% {
    transform: translate(90vw, -50vh) scale(0.4);
  }
  100% {
    transform: translate(0) scale(1);
  }
}
@keyframes circle-2-slide-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translate(calc(var(--base-unit) * -0.9), calc(var(--base-unit) * -15.3));
  }
}
@keyframes circle-3-move-anim {
  0% {
    transform: translate(-80vw, 35vh) scale(0.4);
  }
  100% {
    transform: translate(0) scale(1);
  }
}
@keyframes circle-3-slide-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translate(calc(var(--base-unit) * -2.7), calc(var(--base-unit) * 10.7));
  }
}
@keyframes circle-4-move-anim {
  0% {
    transform: translate(-75vw, -60vh) scale(0.4);
  }
  100% {
    transform: translate(0) scale(1);
  }
}
@keyframes circle-4-slide-anim {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translate(calc(var(--base-unit) * 2.8), calc(var(--base-unit) * -10.8));
  }
}
@keyframes circle-5-move-anim {
  0% {
    transform: translateY(-90vh) scale(0.4);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes circle-5-pulse-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: translateY(calc(var(--base-unit) * -2.2)) scale(0.75);
  }
}
@media only screen and (min-width: 3840px) and (max-height: 1080px) {
  :root {
    --base-unit: calc((1vw + 1vh) * 0.8);
  }
  .slide__info--container {
    justify-content: space-between;
  }
  .slide__info {
    min-height: calc(var(--base-unit) * 2);
  }
}
@media only screen and (min-width: 4760px) and (max-height: 1080px) {
  :root {
    --base-unit: calc((1vw + 1vh) * 0.6);
  }
}
@media only screen and (min-width: 6460px) and (max-height: 1080px) {
  :root {
    --base-unit: calc((1vw + 1vh) * 0.5);
  }
}
@media (orientation: portrait) {
  :root {
    --slide-width: 80vw;
  }
  .additional-info {
    padding: 0;
  }
  .slide-auth-failed .slide__info, .slide-auth-expired .slide__info {
    padding: 0 calc(var(--base-unit) * 0.65);
  }
  .slide-auth-failed .additional-info, .slide-auth-expired .additional-info {
    text-align: center;
    padding: 0 calc(var(--base-unit) * 5);
  }
}
@media only screen and (max-width: 1080px) and (min-height: 3000px) {
  .slide-auth-failed .slide__info, .slide-auth-expired .slide__info {
    padding: 0;
  }
  .slide-auth-failed .additional-info, .slide-auth-expired .additional-info {
    padding: 0;
  }
}
@media only screen and (max-width: 1080px) and (min-height: 6000px) {
  :root {
    --base-unit: calc((1vw + 1vh) * 0.8);
  }
}
.dot-loading {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(max(4px, var(--base-unit) * 0.13) * 5);
  margin-left: calc(max(4px, var(--base-unit) * 0.13) * 0.357);
}

.dot-flashing {
  position: relative;
  width: max(4px, var(--base-unit) * 0.13);
  height: max(4px, var(--base-unit) * 0.13);
  min-height: max(4px, var(--base-unit) * 0.13);
  min-width: max(4px, var(--base-unit) * 0.13);
  border-radius: 50%;
  background-color: #9880ff;
  color: #9880ff;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}

.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-flashing::before {
  left: calc(max(4px, var(--base-unit) * 0.13) + 2px - max(4px, var(--base-unit) * 0.13) * 3);
  width: max(4px, var(--base-unit) * 0.13);
  height: max(4px, var(--base-unit) * 0.13);
  min-height: max(4px, var(--base-unit) * 0.13);
  min-width: max(4px, var(--base-unit) * 0.13);
  border-radius: 50%;
  background-color: var(--primary-white);
  color: var(--primary-white);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}

.dot-flashing::after {
  left: calc((max(4px, var(--base-unit) * 0.13) - 1px) * 2);
  width: max(4px, var(--base-unit) * 0.13);
  height: max(4px, var(--base-unit) * 0.13);
  min-height: max(4px, var(--base-unit) * 0.13);
  min-width: max(4px, var(--base-unit) * 0.13);
  border-radius: 50%;
  background-color: var(--primary-white);
  color: var(--primary-white);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: var(--primary-white);
  }
  50%, 100% {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
html, body {
  position: relative;
  display: flex;
  background: #000;
  color: #FFFFFF;
  animation-name: bg-anim;
  animation-duration: var(--anim-body-delay);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  height: 100vh;
  width: 100vw;
  font-family: var(--font-family);
  overflow: hidden;
}

/* ============ MAIN ==================  */
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 10;
  opacity: 0;
  animation: main-anim var(--anim-main-duration) ease-in-out var(--anim-move-circle-duration) forwards;
}

/* ============= HEADER ===============*/
.header {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 11.1vh;
}

.header__logo {
  width: calc(var(--base-unit) * 5.4);
  height: calc(var(--base-unit) * 1.7);
}

/* ============= FOOTER ===============*/
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--primary-white);
  height: calc(var(--base-unit) * 4);
}

.footer__left, .footer__right {
  font-size: calc(var(--base-unit) * 0.6);
  line-height: calc(var(--base-unit) * 0.73);
  font-style: normal;
  font-weight: 400;
  padding: 0 calc(var(--base-unit) * 2) 0 calc(var(--base-unit) * 2);
  opacity: 0.6;
}

/* ============ LAYER 1 =========================*/
.layer-1 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}

.layer-1--blur {
  filter: blur(var(--blur));
}

.layer-blur {
  display: none;
  position: absolute;
  backdrop-filter: blur(var(--blur));
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

@media (orientation: portrait) {
  .layer-1 {
    top: 25%;
  }
}
/* =============  slide switching  ================== */
.dn {
  display: none;
}