/* ============================
   LOADER (CLEAN REWRITE)
============================ */

#site-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* background */
.loader-bg{
  position:absolute;
  inset:0;
  background: var(--color-bg-loader);
  
  opacity:1;
}

/* logo */
.loader-logo{
  position: absolute;
  inset: 0;

  display:flex;
  align-items:center;
  justify-content:center;

}

.loader-img-logo{
  width:min(420px,80%);
  height:auto;

  opacity:1;
  transform: scale(1);
}

/* ============================
   EXIT ANIMATION (SINGLE STATE)
============================ */

#site-loader.is-exiting .loader-bg{
  animation: loaderBgOut 1s cubic-bezier(0.25,0.1,0.25,1) forwards;
  animation-delay: 0.05s;
}

#site-loader.is-exiting .loader-img-logo{
  animation: loaderLogoOut 1s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

/* ============================
   KEYFRAMES (SMOOTH + CONTROLLED)
============================ */

@keyframes loaderBgOut{
  0%{
    opacity:1;
    filter: blur(0);
  }
  30%{
    opacity:0.75;
  }
  60%{
    opacity:0.35;
  }
  100%{
    opacity:0;
    filter: blur(2px);
  }
}

@keyframes loaderLogoOut{
  0%{
    opacity:1;
    transform: scale(1);
    filter: blur(0);
  }
  40%{
    opacity:0.85;
  }
  70%{
    opacity:0.4;
  }
  100%{
    opacity:0;
    transform: scale(0.9);
    filter: blur(1.2px);
  }
}

.loader-bg,
.loader-img-logo{
  will-change: opacity, transform, filter;
}