/* ==========================================================================
   Themis — photographic statue that reassembles from shards on scroll
   Owner: js/themis.js draws into a <canvas> it appends to #themis-stage.

   Hooks for the page (set on :root or on .themis-stage):
     --themis-w               column width on desktop    (default clamp(380px, 44vw, 720px))
     --themis-right           distance from right edge   (default 0px)
     --themis-z               z-index on desktop         (default 1)
     --themis-z-mobile        z-index below 1024px       (default 0)
     --themis-mobile-opacity  stage opacity below 1024px (default .28)
     --themis-fit             statue height as a fraction of the stage height
                              (default .87 desktop / .84 below 1024px; read on layout)
     --themis-bottom          gap under the base as a fraction of the stage height
                              (default .035 desktop / .07 below 1024px; read on layout)
     --themis-top-safe        header strip kept clear, any CSS length (default 96px; read on
                              layout). No shard is ever drawn above it and the statue's
                              raised hand is kept below it (the statue shrinks if needed).
     --themis-mobile-boost    0..1 mid-tone lift of the statue below 1024px so it reads as a
                              faint backdrop (default .6; 0 = as on desktop; read on layout)
     --themis-p               (read only, written on <html>) smoothed progress 0..1
   State classes on #themis-stage:
     .is-ready     image decoded, first frame painted
     .is-complete  statue whole and the scales locked in (p ~ 1)
     .is-static    prefers-reduced-motion: intact statue, no animation
     .is-pinned    ?themis=<p> debug override active (no fade-in)
   Events on #themis-stage (bubbling): themis:lock, themis:unlock
   ========================================================================== */

.themis-stage {
  position: fixed;
  top: 0;
  right: var(--themis-right, 0px);
  width: var(--themis-w, clamp(380px, 44vw, 720px));
  height: 100vh;
  height: 100dvh;
  z-index: var(--themis-z, 1);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  contain: layout paint style;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.themis-stage.is-ready {
  opacity: 1;
}

.themis-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Touch devices at desktop widths (e.g. a tablet in landscape): size the column by the
   small viewport as well, so browser chrome sliding in/out never rescales the statue. */
@media (pointer: coarse) {
  .themis-stage {
    height: 100vh;
    height: 100svh;
  }
}

/* Phones / tablets: a faint full-viewport backdrop behind the content.
   Height uses the *small* viewport so the statue is always fully visible and
   never rescales or jumps when the browser's URL bar slides in or out. */
@media (max-width: 1023.98px) {
  .themis-stage {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 100vh;
    height: 100svh;
    z-index: var(--themis-z-mobile, 0);
  }

  .themis-stage.is-ready {
    opacity: var(--themis-mobile-opacity, 0.28);
  }
}

.themis-stage.is-static,
.themis-stage.is-pinned {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .themis-stage {
    transition: none;
  }
}

@media print {
  .themis-stage {
    display: none;
  }
}