/* ═══════════════════════════════════════════════════════════════════════
   FIDA — the preloader
   ───────────────────────────────────────────────────────────────────────
   NOT IN THE FIGMA. Like .built-by, this is an addition, and it is written
   so it can be removed without trace: delete this file, js/preloader.js,
   and the three lines each page carries (the <link>, the <script> and the
   #fida-preloader block). Nothing else depends on it.

   ── what it is actually hiding ──────────────────────────────────────────
   Three real things, not a decorative delay:

     1. mobile.js rebuilds the DOM at DOMContentLoaded (js/mobile.js:915),
        converting the absolute Figma artboard into flow layout. On a phone
        the desktop artboard paints FIRST and then visibly reflows. That is
        the big one, and it is why this exists.
     2. Every face is font-display:swap, so each page has a FOUT.
     3. Images pop in one by one; the hero photo is the worst of them.

   ── why it is a separate stylesheet ─────────────────────────────────────
   It could have gone at the top of main.css and saved a request. It did not,
   because main.css is being edited in parallel and because a self-contained
   file is a self-contained revert. Every stylesheet in <head> is
   render-blocking anyway, so they are all fetched together and being a
   separate file costs nothing in WHEN the overlay first paints.

   ── the failsafe, which is the part that matters ────────────────────────
   An overlay that covers the whole site is a single point of failure: if
   js/preloader.js 404s, is blocked by an extension, or throws, the site is
   simply gone. So the hide does NOT depend on JavaScript. The animation
   below removes the overlay at 3.5s on its own, with CSS only. JavaScript
   normally beats it by three seconds; if JavaScript never arrives, the site
   still opens. The <noscript> block in the markup covers the same hole
   instantly for visitors who have scripting off entirely.
   ═══════════════════════════════════════════════════════════════════════ */

#fida-preloader{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:#000000;                       /* --ink, and the theme-color of every page */
  opacity:1;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1);
  /* CSS-only failsafe — see the header note. Fires only if JS never does. */
  animation:fp-failsafe .42s cubic-bezier(.22,.61,.36,1) 3.5s forwards;
}

/* The wordmark, drawn as a mask so it takes the brand lilac exactly the way
   .logo-nav does in main.css rather than shipping a second coloured copy.
   It fades in: the SVG is a separate request, so on a cold first visit it can
   land a beat after the black does. Fading makes that read as intended
   rather than as a stall. */
.fp-mark{
  display:block;width:150px;height:52.65px;   /* the nav lockup's own 151 x 53 */
  background-color:#ded1f2;                   /* --lilac-logo */
  -webkit-mask:url('../assets/img/fida-logo-nav.svg') center/contain no-repeat;
          mask:url('../assets/img/fida-logo-nav.svg') center/contain no-repeat;
  animation:fp-in .55s cubic-bezier(.22,.61,.36,1) both;
}

/* The hairline. The site sets a 1px rule under every heading; this is that
   same line, used as the progress cue. It is INDETERMINATE on purpose — the
   real figure is unknowable, so it eases to 68% and stops rather than faking
   a percentage, then completes when the page is genuinely ready. */
.fp-bar{
  display:block;position:relative;width:150px;height:1px;
  background:rgba(221,210,240,.18);overflow:hidden;
}
.fp-bar > i{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:#ddd2f0;                         /* --lilac */
  animation:fp-fill 1.5s cubic-bezier(.16,.84,.44,1) forwards;
}

/* JS adds this the moment the page is genuinely ready. The line completes
   first, then the whole overlay goes — completing then leaving reads as
   finished, where fading mid-fill reads as abandoned. */
#fida-preloader.is-done{opacity:0;pointer-events:none}
#fida-preloader.is-done .fp-bar > i{width:100%;transition:width .2s linear;animation:none}

@keyframes fp-in     {from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
@keyframes fp-fill   {from{width:0} to{width:68%}}
@keyframes fp-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* A visitor who has asked for less motion gets the overlay without the
   choreography — it still covers the reflow, which is the accessibility win
   here, but nothing slides or crawls. */
@media (prefers-reduced-motion:reduce){
  .fp-mark{animation:none}
  .fp-bar > i{animation:none;width:68%}
  #fida-preloader{transition-duration:.2s}
}