/* ================================================================
   QIPS ANIMATED LOGO LOADER — V2
   Add this block at the END of /css/style.css.
   It replaces the old blue-dot GIF without changing the HTML or JS.
================================================================ */

#loader-wrapper {
  align-items: center;
  background: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
}

#loader {
  animation: qips-loader-v2-pulse 1.65s ease-in-out infinite;
  background: url("../images/qips-loader-logo.png") center / 68% auto no-repeat;
  border: 0;
  filter: drop-shadow(0 10px 20px rgba(6, 25, 72, 0.13));
  height: clamp(108px, 18vw, 140px);
  left: auto;
  margin: 0;
  position: relative;
  top: auto;
  transform-origin: center;
  width: clamp(108px, 18vw, 140px);
  will-change: opacity, transform;
}

#loader::before,
#loader::after {
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  position: absolute;
}

#loader::before {
  animation: qips-loader-v2-spin 1.15s linear infinite;
  border: 4px solid transparent;
  border-bottom-color: #061948;
  border-left-color: rgba(6, 25, 72, 0.18);
  border-right-color: rgba(201, 147, 0, 0.28);
  border-top-color: #c99300;
  inset: -13px;
}

#loader::after {
  animation: qips-loader-v2-spin 2.2s linear infinite reverse;
  border: 2px dashed rgba(6, 25, 72, 0.34);
  border-left-color: #c99300;
  inset: -5px;
}

@keyframes qips-loader-v2-pulse {
  0%, 100% {
    opacity: 0.88;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes qips-loader-v2-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #loader,
  #loader::before,
  #loader::after {
    animation: none;
  }

  #loader {
    opacity: 1;
    transform: none;
  }
}