/* =========================
   APP LOADER — 4s + SPINNER
========================= */

#app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#app-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* LOADER WRAPPER */
.loader-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOGO */
.loader-logo {
  width: 110px;
  height: auto;
  z-index: 2;

  transform: translateY(5px); /* move logo down */
}
/* SPINNER RING */
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: #0b0b0b;

  animation: spin 1.1s linear infinite;
}

/* ANIMATIONS */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}