/* ============================================================
   PAGE LOADER
   Phase 1 — small brand mark fades in at centre and spins for as
   long as the page is still loading (JS locks it to a clean,
   upright stop — orange top-right, white bottom-left — exactly
   on a rotation boundary, never a mid-spin cut).
   Phase 2 — a white line draws from the centre out to the
   top-left corner, an orange line draws from the centre out to
   the bottom-right corner, together tracing the screen's true
   diagonal corner to corner (SVG dash-offset, so it's exact on
   any aspect ratio).
   Phase 3 — the two navy halves either side of that diagonal
   (which is what's been "holding" the dark background the whole
   time) slide apart along the diagonal's perpendicular, each
   line riding its own half's leading edge. The page — already
   loaded behind it — is visible only in the gap between the two
   lines; everything beyond them is still hidden behind navy.

   JS-driven (assets/js/main.js → initLoader): the "as long as
   needed" stop can only be done from script. If JS fails, a hard
   timeout fallback still releases the page.
   ============================================================ */

#page-loader{
  position:fixed; inset:0; z-index:9999;
  overflow:hidden;
}
#page-loader.is-done{ visibility:hidden; pointer-events:none; }

/* ---- the two navy halves, split along the true viewport diagonal ---- */
.loader-half{
  position:absolute; inset:0;
  background:var(--navy-deep);
}
.loader-half--white{ clip-path:polygon(0% 0%, 0% 100%, 100% 100%); }
.loader-half--orange{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%); }

/* a thin navy strip laid exactly along the seam between the two halves —
   sharing one exact clip-path boundary between them left a hairline
   anti-aliasing gap there, showing a sliver of the real page through it.
   initLoader() rotates/sizes this to the viewport's true diagonal. */
.loader-seam{
  position:absolute; top:50%; left:50%;
  height:6px;
  background:var(--navy-deep);
  transform-origin:center center;
}
#page-loader.is-drawing .loader-seam,
#page-loader.is-opening .loader-seam{ opacity:0; transition:opacity .15s linear; }

#page-loader.is-opening .loader-half--white{
  animation:loaderOpenWhite 1.3s ease-in-out forwards;
}
#page-loader.is-opening .loader-half--orange{
  animation:loaderOpenOrange 1.3s ease-in-out forwards;
}
@keyframes loaderOpenWhite{ to{ transform:translate(-60vw,60vh); } }
@keyframes loaderOpenOrange{ to{ transform:translate(60vw,-60vh); } }

/* ---- the corner-to-corner accent lines, drawn via dash-offset ----
   No viewBox: x1/y1/x2/y2 are plain percentages resolved straight
   against the rendered pixel box, so there's no scale transform to
   fight with stroke width or dasharray. initLoader() sets the
   dasharray/dashoffset to the true on-screen diagonal length in px. */
.loader-line-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.loader-line{ fill:none; stroke-width:3px; stroke-dasharray:9999; stroke-dashoffset:9999; }
.loader-line--white{ stroke:var(--white); }
.loader-line--orange{ stroke:var(--orange); }

#page-loader.is-drawing .loader-line--white{
  animation:loaderDrawLine .6s linear forwards;
}
#page-loader.is-drawing .loader-line--orange{
  animation:loaderDrawLine .6s linear forwards;
  animation-delay:.05s;
}
@keyframes loaderDrawLine{ to{ stroke-dashoffset:0; } }

/* ---- the small spinning brand mark ---- */
.loader-logo-stage{
  position:absolute; top:50%; left:50%;
  width:14vmin; height:14vmin; margin:-7vmin 0 0 -7vmin;
  opacity:0;
  animation:loaderLogoIn .4s ease forwards;
}
#page-loader.is-drawing .loader-logo-stage,
#page-loader.is-opening .loader-logo-stage{
  animation:loaderLogoOut .3s ease forwards;
}
@keyframes loaderLogoIn{ to{ opacity:1; } }
@keyframes loaderLogoOut{ to{ opacity:0; } }

.loader-logo-spin{
  width:100%; height:100%; position:relative;
  animation:loaderSpin 1.1s linear infinite;
}
.loader-logo-spin.is-locked{ animation:none; transform:rotate(0deg); }
@keyframes loaderSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.loader-logo-shape{ position:absolute; inset:0; }
.loader-logo-shape--orange{
  background:var(--orange);
  clip-path:polygon(36.74% 29.53%, 70.47% 29.53%, 70.47% 63.26%, 100% 92.79%, 100% 30.07%, 100% 0%, 70.47% 0%, 7.35% 0%, 7.35% .14%);
}
.loader-logo-shape--white{
  background:var(--white);
  clip-path:polygon(63.26% 70.47%, 29.53% 70.47%, 29.53% 36.74%, 0% 7.21%, 0% 69.94%, 0% 100%, 29.53% 100%, 92.66% 100%, 92.66% 99.86%);
}

@media (prefers-reduced-motion: reduce){
  #page-loader{ display:none; }
}