/* ============================================================
   THE LOCKUP — 2026-08-26
   The mark is a stylised E and P in purple over a stylised grey leaf. It sits
   whole in the corner when you arrive; as you read down the page the E swings
   left and the P swings right, opening over the leaf they sit on; all three lock
   back into exact register as the closing section lands, then hand off to the
   real mark in the footer.

   The three layers are cut out of elarion-mark.png by colour (purple left of the
   centre line, purple right of it, and the greys), so they account for every
   opaque pixel of the artwork and recombine into it exactly. Nothing is redrawn.

   Displacement is in percentages, not pixels, so the choreography holds when the
   mark grows and when it shrinks on a phone.
   ============================================================ */
.lockup {
  position: fixed;
  /* Pinned to the outside of the content column, never to the viewport edge, so
     it cannot drift into the text as the window narrows. --maxw is 1180px, so
     half of it is 590px; 76px further out leaves the 52px mark a 24px gap. */
  left: calc(50% - 590px - 76px);
  bottom: 1.6rem;
  width: 52px; aspect-ratio: 316 / 430;
  z-index: 80;                 /* under the reach-out widget, which is 90 */
  display: block;
  cursor: pointer;
  /* Spans are the layers; the link itself carries the label. */
  -webkit-tap-highlight-color: transparent;
  /* No scaling. On this page the closing band and the footer are barely a screen
     apart, so a mark that grew for its moment simply landed on the footer logo.
     The idea is that it comes apart and comes back together; size adds nothing
     and costs legibility. It fades instead, handing off to the real mark below. */
  opacity: calc(0.92 * (1 - var(--out, 0)));
}
/* Once it has faded out it must stop being clickable: an invisible target over
   the footer links is worse than no target at all. */
.lockup.is-gone { pointer-events: none; }

.lockup:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
.lockup.is-on-dark:focus-visible { outline-color: var(--on-deep); }

/* Only a hover cue on devices that actually hover. */
@media (hover: hover) and (pointer: fine) {
  .lockup { transition: opacity 160ms var(--ease, ease-out); }
  .lockup:hover { opacity: 1; }
}

.lockup__part {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  will-change: transform;
}
/* Stacking follows the artwork: the purple sits over the grey. */
/* The whole leaf, not just the grey part of it. In the artwork the purple E and P
   are not sitting on top of a grey leaf, they ARE the lower half of the leaf drawn
   in purple, so there was nothing behind them to reveal. mark-leaf-full.png is
   every opaque pixel of elarion-mark.png recoloured to the leaf grey (#999), which
   is the complete drawing with nothing invented: at rest the purple covers its own
   areas exactly, so the mark looks untouched, and when the letters swing away the
   whole leaf is underneath them.

   It barely moves. It is the thing being revealed, so the letters should carry the
   motion. */
.lockup__part--leaf {
  background-image: url("mark-leaf-full.png");
  transform: scale(calc(1 + var(--d, 0) * 0.02));
}
.lockup__part--e {
  background-image: url("mark-e.png");
  transform: translate3d(calc(var(--d, 0) * -30%), calc(var(--d, 0) * 5%), 0) rotate(calc(var(--d, 0) * -8deg));
}
.lockup__part--p {
  background-image: url("mark-p.png");
  transform: translate3d(calc(var(--d, 0) * 30%), calc(var(--d, 0) * 5%), 0) rotate(calc(var(--d, 0) * 8deg));
}

/* Only where the layout actually has a margin for it. The content column is
   1180px, so a viewport under ~1332px leaves no room outside it and the mark
   would sit on the copy: on phones because the column is full width, on smaller
   laptops because the column is centred with thin gutters. Tried both lower and
   higher on mobile; each cost legibility, and legibility beats decoration. The
   real mark is in the header and the footer regardless. */
/* ---------- Over the dark band ----------
   The mark is fixed, so it crosses from the cream page onto the near-black closing
   band. The site's light logo variant is a flat cream knockout with no purple or
   grey in it, so using it whole would erase the distinction between the letters
   and the leaf. Instead the letters take that variant's cream and the leaf stays
   grey, which reads as the light logo while keeping the two parts legible.
   Purple on near-black measures about 2.2:1, which is fine for decoration but
   looks accidental next to the light footer logo. */
.lockup.is-on-dark .lockup__part--e { background-image: url("mark-e-light.png"); }
.lockup.is-on-dark .lockup__part--p { background-image: url("mark-p-light.png"); }

@media (max-width: 1339px) {
  .lockup { display: none; }
}
/* The mobile menu owns the screen when open, as the reach-out widget already does. */
body.menu-open .lockup { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* It stays, because it is now a control (back to the top) and not only a
     flourish, and withholding a control from these users would be the wrong
     trade. What goes is the movement: the mark sits whole and still, and the
     script keeps handling the fade near the footer and the click. */
  .lockup__part { transform: none !important; }
}