/* ============================================================
   synqa.ca - M24 page-enter transition ("the wash")
   Route changes between /, /work, /theta, /holm, /rewrite,
   /patchpal, /about, /contact.  A full-bleed Bone overlay carries
   the Synqa monogram:

     COVER   (old page leaving)  two Bone halves close in from the
             top and bottom edges to meet at centre while the
             monogram settles in (honest ease-out, no bounce).
     APEX    the full Bone wash holds briefly while the next
             document commits.
     REVEAL  (new page arriving)  the monogram fades, then the two
             halves split at centre - top off the top, bottom off
             the bottom - uncovering the loaded page.

   The overlay is Bone, matching the page background, so the page is
   revealed rather than cut to.  The body never transforms; the
   overlay masks the leaving page and uncovers the arriving one.

   Element host: documentElement (not body).  A transformed body
   becomes the containing block for fixed-position descendants, so
   anything inside body drifts with a body transform.  Hosting the
   overlay on documentElement keeps it locked to the viewport.
   ============================================================ */

/* No overflow toggle during the wash.  Locking body scroll removes the
   scrollbar, which reflows the content ~scrollbar-width and reads as a
   sideways shift when the bar returns on reveal.  The cover masks the
   page anyway, so there is nothing to lock; leaving the scrollbar in
   place keeps the layout width constant across the whole transition. */

/* The wash host: a full-viewport fixed layer above the page. */
.m24-cover {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

/* Two Bone half-panels.  Top covers 0 to 50vh, bottom 50 to 100vh.
   DEFAULT (idle / no transition): each half sits fully OFF its edge so
   the overlay is invisible and the page shows through - this is the
   state on every normal page load.  The covering pose (translateY 0) is
   applied only while a transition runs (inline, from m24.js) or when
   the page is armed via the bridge (html.m24-armed, see m24.js). */
.m24-cover-half {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: var(--bone);
  will-change: transform;
}
.m24-cover-half.is-top    { top: 0;    transform: translateY(-100%); }
.m24-cover-half.is-bottom { top: 50vh; transform: translateY(100%); }

/* The Synqa monogram, centred on the seam, above the halves so the
   split never clips it.  Settles in on cover, fades out on reveal. */
.m24-cover-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  height: clamp(48px, 7vh, 72px);
  width: auto;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  will-change: opacity, transform;
}