/* ──────────────────────────────────────────────────────────────────────────────────
   SUPPORT HEART — styles. Pair with client/js/support-heart.js.

   LIFTED FROM THE WIKI, `source/src/styles/support-heart.css`. The palette
   needed nothing: `--ink`, `--panel`, `--line`, `--dim` and `--torch` are the
   same six hex codes in both projects, token for token — app.css's own header
   says so ("The wiki's palette, token for token with sim.css"). Two departures,
   both about the FACE:

     — `--ui-font` is the wiki's ApogeaThick, whose cap height is 0.3125em, so
       every size on that side is about twice what a normal face would want.
       This game's loud face is Press Start 2P (`--loud`), which is full height,
       so the two sizes came down to match the ink rather than the number.
     — the thank-you's emoji heart is gone. This client's answer to "an icon is
       a game asset" is the item atlas, and the mark beside the words is the
       same Heart Of The Tree the rail's own tab wears.

   NOTHING HERE APPLIES UNTIL A CLICK. #apwShell and #apwShellInner are
   display:contents at rest, which means the browser lays the page out exactly as
   if the two wrapper divs did not exist — same children on <body>, same
   measurements, same selectors.

   AND THE THREE z-indexes ARE THE WIKI'S OWN NUMBERS, which are far above
   anything this stylesheet asks for. `.tip` is 90 and is asserted to be the
   highest thing on the page, because a tooltip is never the subject and nothing
   may cover it — the one exception is a full-screen takeover that is about to
   leave, and check.mjs names these three selectors rather than raising the bar.
   ────────────────────────────────────────────────────────────────────────────────── */

#apwShell, #apwShellInner { display: contents; }

/* The square. 100vmax so the heart's silhouette is fully outside the viewport at
   scale(4) — no visible clipping at the start of the collapse. */
#apwShell.apw-on {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vmax;
  height: 100vmax;
  margin: -50vmax 0 0 -50vmax;
  z-index: 9998;
  background: var(--ink, #0d1017);
  transform: scale(4);
  transform-origin: 50% 50%;
  -webkit-clip-path: url(#apwHeartClip);
  clip-path: url(#apwHeartClip);
  will-change: transform;
}

/* The page, at its real size, inside that square: scale(0.25) cancels the
   square's scale(4).

   NO TRANSLATE HERE. The handoff carried a translate of -scrollY to hold the
   reader's place, and it moved the WINDOW rather than what is in it — on /atlas
   at scroll 900 the box slid 900px off the top of the screen and what collapsed
   was a 9px sliver of a table. This box is a scroll container (overflow:hidden
   still is one), so the offset goes on its scrollTop instead, which
   support-heart.js sets and which keeps the sticky header honest too. */
#apwShell.apw-on > #apwShellInner {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.25);
  transform-origin: 50% 50%;
}

/* The document must not scroll while it is a heart. */
html.apw-locked, html.apw-locked body { overflow: hidden; }

#apwHearts {
  position: fixed;
  inset: 0;
  z-index: 9997;
  overflow: hidden;
  pointer-events: none;
}

@keyframes apw-rise {
  0%   { transform: translateY(0) scale(0.5) rotate(-8deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(-280px) scale(1.2) rotate(9deg); opacity: 0; }
}

#apwThanks {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
#apwThanks.on { pointer-events: auto; }

/* TOP-ANCHORED, NOT CENTRED. The stack is offset from the middle of the screen
   by half the heart's height, so it clears the heart's bottom point at any
   --apw-heart-half. Centring it here instead subtracts half the stack's own
   height back off that clearance and the point lands in the text — measured. */
#apwThanks .apw-thanks-stack {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
  transform: translateY(calc(var(--apw-heart-half, 13vmax) + min(5vh, 34px)));
}

/* PRESS START 2P AND NOT APOGEA THICK, which is the whole of why these numbers
   are not the wiki's. Its cap height is 0.3125em, so 52px there is about 16px of
   ink; this face is full height, so the same ink wants a third of the size.
   Measured against the rail's own 9px capitals rather than converted.
   clamp() keeps it inside a phone. */
#apwThanks .apw-thanks-msg {
  margin: 0;
  font-family: var(--loud, "Press Start 2P", monospace);
  font-size: clamp(13px, 1.5vw, 22px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--torch, #f0a53c);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
}

#apwThanks .apw-thanks-back {
  font-family: var(--label, "Silkscreen", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  word-spacing: 0.22em; /* the UA resets it on buttons; the site re-inherits it */
  text-transform: uppercase;
  padding: 11px 22px;
  border: 1px solid var(--line, #2a3242);
  border-radius: 3px;
  background: rgba(21, 26, 36, 0.9);
  color: var(--dim, #7c8698);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
#apwThanks .apw-thanks-back:hover {
  border-color: var(--torch, #f0a53c);
  color: var(--torch, #f0a53c);
}
#apwThanks .apw-thanks-back:focus-visible {
  outline: 2px solid var(--torch, #f0a53c);
  outline-offset: 1px;
}

/* A reader who asked for less motion still gets the heart and the thank-you —
   the JS drops every duration to 1ms and skips the hearts and the beat. Nothing
   extra is needed here, but the transitions go too. */
@media (prefers-reduced-motion: reduce) {
  #apwThanks .apw-thanks-back { transition: none; }
}