/* ===========================
   Preloader (clean version)
   =========================== */

:root {
  --preloader-bg: #fff;
  --preloader-z: 9999;
  --spinner-size: 96px;     /* base spinner size */
}

/* Fullscreen overlay */
#preloader {
  position: fixed !important;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  width: 100vw;
  height: 100dvh;           /* handles mobile dynamic bars */
  background: var(--preloader-bg);
  z-index: var(--preloader-z);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;           /* avoid scrollbars while visible */
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
}

/* Fallback if 100dvh is not supported */
@supports not (height: 100dvh) {
  #preloader { height: 100vh; }
}

/* Optional inner wrapper (kept for compatibility; flex does the centering) */
#status {
  position: static;
  text-align: center;
}

/* Spinner image (rotating logo) */
#spinner-logo {
  width: var(--spinner-size);
  height: var(--spinner-size);
  max-width: 30vw;
  max-height: 30vh;
  object-fit: contain;
  animation: preloader-spin 1.2s linear infinite;
}

/* Spin animation */
@keyframes preloader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hidden state (add this class via JS to fade out) */
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* While preloader is visible, lock page scroll */
html.preloading,
body.preloading {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}

/* Neutralize transforms that can affect fixed overlays during load (index only) */
html.preloading .home-slider,
html.preloading .banner-parent,
html.preloading [data-stellar-background-ratio],
html.preloading .sticky-wrapper,
html.preloading .for-sticky {
  transform: none !important;
  will-change: auto !important;
}

/* ===========================
   (Optional) Bounce spinner
   If you want dots instead of a logo, use:
   <div class="spinner"><span class="double-bounce1"></span><span class="double-bounce2"></span></div>
   =========================== */

.spinner {
  width: 100px;
  height: 40px;
  margin: 0 auto;
  position: relative;
}

.double-bounce1,
.double-bounce2 {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left: 0 */
  border-radius: 50%;
  background-color: #333;
  opacity: .6;
  animation: preloader-bounce 2s infinite ease-in-out;
}

.double-bounce2 { animation-delay: -1s; }

@keyframes preloader-bounce {
  0%, 100% { transform: scale(0); }
  50%      { transform: scale(1); }
}














/* ===== Preloader — index-only robust ===== */
:root{
  --preloader-bg: #fff;
  --preloader-z: 2147483647;    /* max overlay priority */
  --spinner-size: 96px;         /* adjust to taste */
}

/* Fullscreen overlay */
#preloader{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;          /* mobile dynamic bars */
  background: var(--preloader-bg) !important;
  z-index: var(--preloader-z) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .35s ease, visibility .35s ease;
  transform: none !important;         /* defeat ancestor transforms */
}

/* Fallback for older browsers */
@supports not (height: 100dvh) {
  #preloader{ height: 100vh !important; }
}

/* Absolutely center the spinner (no flex reliance) */
#preloader .preloader-center{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  will-change: transform;
}

/* Spinner image */
#spinner-logo{
  display: block !important;
  width: var(--spinner-size) !important;
  height: var(--spinner-size) !important;
  object-fit: contain;
  animation: preloader-spin 1.2s linear infinite;
  margin: 0 !important;
}

/* Spin animation */
@keyframes preloader-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hidden state */
#preloader.is-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Lock scroll while loading */
html.preloading, body.preloading{
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

/* Neutralize transforms while loading (prevents fixed-position bugs) */
html.preloading, html.preloading *{
  transform: none !important;
}