/* Loader wrapper stays fullscreen */
.loader_wrapper {
    position: fixed;
    inset: 0;
    background: #181818;
    z-index: 9999;
    overflow: hidden;
}

/* Loader wave starts covering the screen */
.wave-loader {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 120vh; /* bigger so it fully covers */

    transform: translateY(0);
    transition:
    transform 2.0s cubic-bezier(.77,0,.18,1),
    opacity   1.2s ease;
}

/* Exit animation: wave goes DOWN */
.loader_wrapper.wave-exit {
    opacity: 0;
}

.loader_wrapper.wave-exit .wave-loader {
    transform: translateY(120%);
}

/* Prevent scroll during load */
.preload {
    overflow: hidden;
}



/*LOADING SCREEN*/
.loader_wrapper {
    width: 100%;
    height: 100%;
    position: fixed; /* Changed to fixed */
    top: 0;
    left: 0;
    background-color: #212830;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Added z-index to ensure it's above other elements */
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 60px;
    aspect-ratio: 1;
    color: #ffffff;
    position: relative;
  }
  .loader::before,
  .loader::after {
    content: "";
    position: absolute;
    inset:0;
    background:
      linear-gradient(currentColor 0 0) 0 calc(var(--s,0)*-100%)/100% calc(100%/3),
      repeating-linear-gradient(90deg,currentColor 0 25%,#212830 0 50%) calc(var(--s,0)*100%) 50%/calc(4*100%/3) calc(100%/3);
    background-repeat: no-repeat;
    animation: l26 2s infinite;
  }
  .loader::after {
    --s:-1;
  }
  @keyframes l26 {
      0%,
      10%  {transform:translateY(calc(var(--s,1)*0));   background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
      33%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
      66%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
      90%,
      100%  {transform:translateY(calc(var(--s,1)*0));  background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
  }


/* Prevent scrolling when preload is active */
.preload {
    overflow: hidden;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none; /* Prevent interactions while fading out */
}


.loader_wrapper {
    position: fixed;
    inset: 0;
    background: #212830;
    z-index: 9999;
    overflow: hidden;

    opacity: 1;
    transition: opacity 1.2s ease;
}