body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  inline-size: 100%;
  gap: 1.5rem;
}

/* Loader container */
.loading {
  position: relative;
  box-sizing: border-box;
  border-radius: 50%;
  block-size: 70px;
  inline-size: 70px;
}

/* Each ring */
.loading .effect-1,
.loading .effect-2,
.loading .effect-3 {
  position: absolute;
  border-radius: 50%;
  block-size: 100%;
  inline-size: 100%;
  border: 3px solid transparent;
  border-inline-start: 3px solid var(--initial-loader-color, #02c87c);
  opacity: 0.8;
}

/* Different animations per ring */
.loading .effect-1 {
  animation: spin 1.2s linear infinite;
}

.loading .effect-2 {
  animation: pulse 1.8s ease-in-out infinite;
}

.loading .effect-3 {
  animation: expandFade 2.4s ease-in-out infinite;
}

/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes pulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.4;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes expandFade {
  0% {
    transform: scale(0.8);
    opacity: 0.2;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.2;
  }
}

/* Logo animation */
.loading-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: logoIntro 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    logoPulse 2s ease-in-out infinite 1s;
  transform-origin: center;
}

@keyframes logoIntro {
  0% {
    transform: scale(0.3) rotate(-360deg);
    opacity: 0;
    filter: blur(4px);
  }

  70% {
    transform: scale(1.1) rotate(-15deg);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes logoPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(2, 200, 124, 0.3));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(2, 200, 124, 0.6));
    transform: scale(1.05);
  }
}

:root {
  --initial-loader-color: #02c87c;
  --initial-loader-bg: #ffffff;
}