/* Fullscreen loader (transparant) */
#sync-loader{
  position: fixed;
  inset: 0;
  background: transparent !important;
  background-color: transparent !important;
  display: grid;
  place-items: center;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
}

/* Mooie zachte “glow” over de pagina */
#sync-loader::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.20) 35%,
    rgba(255,255,255,0.00) 70%
  );
  opacity: 0;
  animation: syncGlow 2.4s ease forwards;
  animation-delay: .2s;
}

/* Fade-out state */
#sync-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* Na de fade echt weg, zodat hij niets meer kan blokkeren */
#sync-loader.is-removed{
  display: none !important;
}

/* Container exact midden */
.sync-loader-inner{
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transform: translateZ(0);
}

/* Logo: spin + grow + weg */
.sync-loader-logo{
  width: 180px;
  height: 180px;
  object-fit: contain;
  will-change: transform, opacity, filter;
  transform: rotate(0deg) scale(1);
  animation: syncSpinGrow 2.2s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: .3s; /* mini pauze */
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.12));
}

/* Glow animatie */
@keyframes syncGlow{
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Spin + grow tot buiten beeld */
@keyframes syncSpinGrow{
  0%{
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  10%{
    transform: rotate(0deg) scale(1); /* kort stil */
    opacity: 1;
  }
  100%{
    transform: rotate(2880deg) scale(45); /* 8 rondes + heel groot */
    opacity: 0;
  }
}

/* Mobile */
@media (max-width: 480px){
  .sync-loader-inner,
  .sync-loader-logo{
    width: 140px;
    height: 140px;
  }
}

/* HARD FIX: als hij hidden is, mag hij nooit clicks blokkeren */
#sync-loader.is-hidden,
#sync-loader.is-hidden *{
  pointer-events: none !important;
}

#sync-loader::before{
  pointer-events: none !important;
}