/*
 * Preloader — minimal wordmark, hairline progress bar, percentage counter.
 *
 * Replaces the theme's spinning-aeroplane preloader. Loaded after main.css in
 * web_layouts/master.blade.php, so everything here is written to beat the
 * theme's own .loading-screen rules; main.css is generated from web_assets/sass
 * and would lose any edit made directly to it.
 *
 * No JavaScript changes: main.js already drives .bar (width), .progress-line
 * (scaleX) and .loading-counter (text) from a 0-100 counter, then fades the
 * screen out. The old markup simply never included the last two.
 */

.loading-screen {
  position: fixed;
  inset: 0;
  /* Above the WhatsApp and scroll-to-top floats, which sit at z-index 1000 and
     come later in the source order — at equal z-index they painted over it. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  cursor: default;
}

/* The two halves that wipe apart as the counter runs. main.js drives width
   from 50% down to 0, so they retract from the centre outwards. */
.loading-screen .bar {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: #ffffff;
  z-index: 1;
}

.loading-screen .top-bar {
  left: 0;
  right: auto;
  bottom: auto;
}

.loading-screen .down-bar {
  right: 0;
  left: auto;
  top: auto;
  bottom: 0;
}

.loading-screen .animation-preloader {
  position: relative;
  z-index: 2;
  width: clamp(240px, 60vw, 400px);
  max-width: calc(100vw - 40px);
  text-align: center;
}

/* -------------------------------------------------------------------- logo --*/

.loading-screen .preloader-logo {
  display: block;
  width: clamp(240px, 60vw, 400px);
  height: auto;
  margin: 0 auto 32px;
  opacity: 0;
  transform: translateY(8px);
  animation: preloader-logo-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

/* ------------------------------------------------------------ progress bar --*/

.loading-screen .preloader-track {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #e5e7eb;
  overflow: hidden;
}

/* main.js sets transform: scale(n) as the counter climbs, so the origin has to
   be the left edge for it to read as a bar filling rather than growing. */
.loading-screen .preloader-track .progress-line {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #113a75;
  transform: scale(0);
  transform-origin: left center;
}

/* ---------------------------------------------------------------- counter ---*/

.loading-screen .preloader-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--body-font, "Satoshi", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.loading-screen .preloader-meta .loading-counter {
  /* Tabular figures stop the counter jittering as digits change width. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: #113a75;
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .loading-screen .preloader-logo {
    opacity: 1;
    transform: none;
    animation: none;
  }
}