/* ==========================================================================
   PAGE LOADER / ARRIVAL SEQUENCE — Evolve Up Fitness
   ==========================================================================
   Fully isolated, additive. Does not touch any existing section,
   layout, spacing, typography, or component.

   Deliberately CSS-driven, not JS-controlled, for its entire visible
   life — the fade-in, hold, and fade-out are all one continuous CSS
   animation with a fixed, guaranteed duration. This is a safety
   decision, not a style one: a JS-controlled loader that fails to
   receive its "hide now" signal (a slow connection, a script error
   elsewhere on the page, anything) can get permanently stuck covering
   the site, which would be a far worse outcome than no loader at all.
   A pure-CSS animation cannot get stuck — it always completes on its
   own schedule regardless of anything else on the page succeeding or
   failing.

   To roll back completely: remove this file's <link> tag and the
   #pageLoader element from index.html.
   ========================================================================== */

#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  pointer-events: none; /* never intercepts a real click, even during its ~1s life */
  animation: page-loader-hide 0.4s var(--ease) 1.05s forwards;
}

.page-loader__mark {
  /* Now the emblem rather than "EVOLVEUP" text. The same entrance
     animation is kept, so the loader timing and feel are unchanged.
     The mark's plates are genuinely black (original colours, never
     inverted), so it sits on a white plate exactly as it does in the
     hero — otherwise it would be invisible on the black overlay. */
  display: block;
  width: clamp(180px, 46vw, 280px);
  height: auto;
  /* TRANSPARENT — plate removed; glow keeps the black plates legible
     against the loader overlay. */
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.95))
          drop-shadow(0 0 6px rgba(255,255,255,0.7))
          drop-shadow(0 0 16px rgba(255,255,255,0.35));
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: page-loader-mark-in 0.5s var(--ease) 0.15s forwards;
}
/* .page-loader__mark-accent removed with the text mark it styled. */

@keyframes page-loader-mark-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The overlay itself: fades out after the mark has had a brief moment
   to be seen, then removes itself from layout and interaction
   entirely via visibility — belt-and-suspenders alongside
   pointer-events:none above. */
@keyframes page-loader-hide {
  to { opacity: 0; visibility: hidden; }
}

/* --------------------------------------------------- REDUCED MOTION
   Skips the sequence entirely rather than showing a motion-free
   version of it — for a reduced-motion visitor, the fastest path to
   real content is the right one, not a still version of a moment
   that exists purely for delight. */
@media (prefers-reduced-motion: reduce) {
  #pageLoader { display: none; }
}

/* On very slow connections/devices, never let this exceed ~1.5s total
   even if something about the animation timing needs adjustment later
   — this is a hard ceiling, kept deliberately short. */