/**
 * iBOX / OPTiCLEAN premium preloader.
 *
 * Architecture notes (read before editing):
 *
 * 1. The overlay markup (#ibox-preloader) is ALWAYS present in the DOM,
 *    but is hidden by default (`display: none`). It only ever becomes
 *    visible when the <html> element carries the `.ibox-preload` class.
 *
 * 2. That class is printed directly on the <html> tag in header.php, so
 *    it's present at first paint with zero flash risk. An inline script
 *    at the very top of header.php's <head> -- before this stylesheet is
 *    even linked -- then decides whether to keep it (first load of a
 *    browsing session, or a true browser refresh) or strip it immediately
 *    (clicking an internal link to another page), before anything here
 *    ever paints. This file itself doesn't know or care which case it
 *    is -- it just reacts to whether the class is present.
 *
 * 3. Once `.ibox-preload` is present, EVERYTHING else -- the logo/tagline
 *    fade-in, the progress bar sweep, and the final fade+scale hide -- is
 *    driven by plain CSS keyframe animations with fixed delays. There is
 *    no dependency on any external JS file to finish, hide, or unlock
 *    the overlay. js/preloader.js only adds small progressive-enhancement
 *    touches (removing the node from the a11y tree once it's done); the
 *    experience is fully correct and never blocks the site without it.
 */

:root {
  --ibox-preloader-bg-start: #ffffff;
  --ibox-preloader-bg-end: #D8E3F5;
  --ibox-preloader-blue: #183358;
  --ibox-preloader-blue-soft: #4F9DFF;
  --ibox-preloader-orange: #F7931E;
  --ibox-preloader-panel: #ffffff;
  --ibox-preloader-track: #eef3fb;
  --ibox-preloader-duration: 2.1s;
  --ibox-preloader-logo-h: 83px;
}

/* Hidden by default -- see architecture note above. */
#ibox-preloader {
  display: none;
}

html.ibox-preload {
  /* Prevent a flash of the homepage underneath before the overlay paints. */
  background: var(--ibox-preloader-bg-end);
}

html.ibox-preload #ibox-preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 15%, var(--ibox-preloader-bg-start) 0%, var(--ibox-preloader-bg-end) 100%);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fades + scales the whole overlay away once the bar has finished,
     then goes fully inert (invisible + unclickable) so it can never
     sit on top of the site again, with or without further JS. */
  animation: ibox-preloader-hide 0.7s ease forwards;
  animation-delay: calc(var(--ibox-preloader-duration) + 0.55s);
}

@media (prefers-reduced-motion: reduce) {
  html.ibox-preload #ibox-preloader {
    animation-duration: 0.4s;
    animation-delay: 0.6s;
  }
}

.ibox-preloader__panel {
  position: relative;
  width: 100%;
  max-width: 490px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 36px 38px;
  border-radius: 28px;
  background: var(--ibox-preloader-panel);
  box-shadow:
    0 30px 60px -20px rgba(24, 51, 88, 0.28),
    0 10px 24px -8px rgba(24, 51, 88, 0.14);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  animation: ibox-preloader-panel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

.ibox-preloader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
  opacity: 0;
  animation: ibox-preloader-fade-in 0.8s ease forwards;
  animation-delay: 0.35s;
}

.ibox-preloader__logo img {
  display: block;
  height: var(--ibox-preloader-logo-h);
  width: auto;
}

.ibox-preloader__divider {
  width: 3px;
  height: calc(var(--ibox-preloader-logo-h) * 0.82);
  border-radius: 999px;
  background: var(--ibox-preloader-orange);
}

.ibox-preloader__tagline {
  margin: 0 0 28px;
  font-size: 13.5px;
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ibox-preloader-blue);
  opacity: 0.85;
}

.ibox-preloader__tagline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: ibox-preloader-word-in 0.6s ease forwards;
}

.ibox-preloader__tagline span:nth-child(1) { animation-delay: 0.55s; }
.ibox-preloader__tagline span:nth-child(2) { animation-delay: 0.70s; }
.ibox-preloader__tagline span:nth-child(3) { animation-delay: 0.85s; }

.ibox-preloader__tagline .ibox-preloader__sep {
  margin: 0 6px;
  opacity: 0.35;
}

.ibox-preloader__progress {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 5px;
  border-radius: 999px;
  background: var(--ibox-preloader-track);
  overflow: hidden;
  opacity: 0;
  animation: ibox-preloader-fade-in 0.6s ease forwards;
  animation-delay: 0.75s;
}

.ibox-preloader__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ibox-preloader-blue-soft), var(--ibox-preloader-blue));
  animation: ibox-preloader-bar-fill var(--ibox-preloader-duration) cubic-bezier(0.45, 0, 0.2, 1) forwards;
  animation-delay: 0.75s;
}

.ibox-preloader__progress-fill::after {
  /* Small orange accent riding the leading edge of the bar. */
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ibox-preloader-orange);
  box-shadow: 0 0 8px 1px rgba(247, 147, 30, 0.55);
  transform: translate(50%, -50%);
}

/* ---------- keyframes ---------- */

@keyframes ibox-preloader-panel-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ibox-preloader-fade-in {
  to { opacity: 1; }
}

@keyframes ibox-preloader-word-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ibox-preloader-bar-fill {
  0%   { width: 0%; }
  70%  { width: 88%; }
  100% { width: 100%; }
}

@keyframes ibox-preloader-hide {
  0% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  60% {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

html.ibox-preload #ibox-preloader.is-done {
  display: none;
}

@media (max-width: 600px) {
  html.ibox-preload #ibox-preloader {
    padding: 14px;
  }

  :root {
    --ibox-preloader-logo-h: 49px;
  }

  .ibox-preloader__panel {
    padding: 32px 18px 26px;
    border-radius: 22px;
  }

  .ibox-preloader__logo {
    gap: 10px;
  }

  .ibox-preloader__tagline {
    font-size: 12.5px;
  }
}

/* Full-viewport coverage fix for mobile and tablet portrait -- per
   follow-up feedback: on smaller phones (e.g. iPhone 13), gaps were
   appearing at the top/bottom of the overlay, letting the page
   underneath show through before the preloader finished. The base
   rule above (position: fixed; inset: 0;) is correct in most modern
   browsers, but this adds explicit top/right/bottom/left values
   alongside inset (for any browser that doesn't support the inset
   shorthand, where the whole declaration would otherwise be silently
   ignored) and an explicit width/height using the standard vh -> svh
   progressive-enhancement cascade, with a dvh min-height as an extra
   safety net against mobile browsers' dynamic address-bar resizing.
   Scoped to mobile and tablet portrait only, matching this fix's
   approved scope -- desktop and tablet landscape are untouched, and
   still rely on the base rule above exactly as before. Artwork,
   animation, timing, logo, and colours are all untouched. */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  html.ibox-preload #ibox-preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
  }

  /* Keeps the page itself from scrolling behind the overlay while it's
     active -- reuses the existing html.ibox-preload class (the site's
     one single source of truth for "preloader active") rather than
     introducing a second, separate body class for the same state. */
  html.ibox-preload,
  html.ibox-preload body {
    overflow: hidden;
    height: 100%;
  }
}