.loader {
    position: fixed;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: var(--loader-bg);
    opacity: 1;
    transition: opacity 2s ease;
}

.loader-hidden {
    display: none;
    pointer-events: none;
}

.loader-items {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

#loader-logo {
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    --ANIMATION-DELAY-MULTIPLIER: 70ms;
    width: clamp(200px, 400px + (max(0px, 100vw - 450px) * 200 / 264) - (max(0px, 450px - 100vw) * 200 / 220), 600px);
    height: auto;
    overflow: hidden;
}

#loader-logo .quarter-s {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
    
}

#loader-logo .head-s {
    fill: var(--green);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
}

#loader-logo .letter-o {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
}

#loader-logo .letter-l {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
}

#loader-logo .first-half-v {
    fill: var(--orange);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
}

#loader-logo .second-half-v {
    fill: var(--blue-light);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
    /* Starts together with .first-half-v */
}

#loader-logo .letter-e {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
}

#loader-logo .letter-m {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
}

#loader-logo .letter-second-e {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
}

#loader-logo .letter-n {
    fill: var(--default-object);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 7);
}

@keyframes hideAndSeek {
    0% {
        transform: translateY(110%);
    }

    100% {
        transform: translateY(0);
    }
}

.circle-block {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.loader-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: 20px;
    border-radius: 50%;
    -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;
    animation: dot-pulse2 1.5s ease-in-out infinite;
  }
  
  .lc-1 {
    background-color: var(--blue-light);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  
  .lc-2 {
    background-color: var(--green);
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
  .lc-3 {
    background-color: var(--yellow);
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  
  .lc-4 {
    background-color: var(--orange);
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
  }
  
  .lc-5 {
    background-color: var(--default-object);
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }
  
  @keyframes dot-pulse2 {
    0% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      opacity: 0.5;
    }
  
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  
    100% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

.no-scroll {
    overflow: hidden;
}