/* === Pre‑loader === */

#site-preloader {
	opacity:100%;
  position: fixed;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--wp--preset--color--accent-1);      /* match your site background */
  z-index: 99999;
/*   mask-image: radial-gradient(circle at center, transparent var(--hole-size), black calc(var(--hole-size) + 1px));
	mask-size:100%;
	mask-composite: exclude; */
  transition: opacity 1s ease;
}

/* fade‑out class will be added via JS */
#site-preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Spinner circle */
#site-preloader .spinner {
  width: 56px;
  height: 56px;
  border: 6px solid #ddd;
  border-top-color: #0073aa; /* WP blue; change to brand color*/
  border-radius: 50%; 
  animation: spin 1s linear infinite;
}

#site-preloader .preloader-image {
   width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
  transition: opacity 0.2s ease;
}



@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes mask-grow {
	to {
	}
}