/* ------------------------------------------------------------------
   Homepage Preloader (admin-only, WIP)
   Overlay + logo styling for the three "logo sting" variants.
   The logo is the inlined M Financial lockup (assets/img/mfg-logo.svg):
   white wordmark + white icon box + blue "M" mark, designed for the
   brand-blue background. We let the SVG keep its own colors.
   Critical positioning/background is inline-printed in lib/preloader.php.
   ------------------------------------------------------------------ */

#titan-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  box-sizing: border-box;
  /* GSAP toggles this via autoAlpha on dismiss; start fully visible. */
  opacity: 1;
  visibility: visible;
}

/* M Financial brand blue — matches the logo's intended background so the
   white lockup (and the blue "M", which reads as negative space) sits clean. */
#titan-preloader.tp-bg-brand {
  background: #04588c;
}

#titan-preloader.tp-bg-light {
  background: #ffffff;
}

#titan-preloader .tp-logo {
  width: min(440px, 72vw);
  height: auto;
  overflow: visible; /* so back.out overshoot / drawSVG strokes aren't clipped */
}

/* Lock scrolling (incl. GSAP ScrollSmoother's body) while the overlay is up. */
html.tp-lock,
html.tp-lock body {
  overflow: hidden !important;
}

/* Respect reduced-motion: the JS shortcuts the animation, but make sure the
   logo is visible immediately if scripts are slow/unavailable. */
@media (prefers-reduced-motion: reduce) {
  #titan-preloader .tp-logo {
    opacity: 1 !important; /* override the critical-CSS opacity:0; show statically */
  }
  #titan-preloader .tp-logo path {
    fill-opacity: 1 !important;
    stroke-opacity: 0 !important;
  }
}