/* ============================================================
   THE RING, PHOTOGRAPHED (vault/ring-photo.js)              22 October 2026
   The path-traced still in the ring's window on the Members face, and carried into a place's corner.
   The window keeps its 4:5 (vault.css); the photograph is square, 90 % of the window's height, set on its middle, so
   the same framing travels from the face to the corner by one scale. Its paper is #FFFFFF at its edges.
   ============================================================ */
.kc-photo{ position:absolute; inset:0; pointer-events:none; }
/* the photograph's paper is the page's #FFFFFF (the tool lifts its edges to it), and the face's words are laid over
   the photograph, never under it, so its white never covers a word. The face's column takes the hand only on its
   links, so a charm under the column's empty space is still reached */
.mbr.has-ring-photo .mbr-face{ z-index:7; pointer-events:none; }
.mbr.has-ring-photo .mbr-face :is(a, button, input, label){ pointer-events:auto; }
.kc-photo .rp-frame{
  position:absolute; top:3%; left:50%; height:90%; aspect-ratio:1 / 1; transform:translateX(-50%);
  pointer-events:none;
}
.kc-photo .rp-pic, .kc-photo .rp-still{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.kc-photo .rp-still{
  object-fit:contain; user-select:none; -webkit-user-drag:none;
  opacity:0; transition:opacity var(--slow) var(--settle);
}
.kc-photo.is-lit .rp-still{ opacity:1; }
/* a charm's lift: only the pixels it changes, laid exactly over the still; it comes in on the house's settle, at the
   touch speed, and goes the same way. No scale, no bounce. */
.kc-photo .rp-lifts{ position:absolute; inset:0; }
.kc-photo .rp-lift{
  position:absolute; display:block; user-select:none; -webkit-user-drag:none;
  opacity:0; transition:opacity var(--touch) var(--settle);
}
.kc-photo .rp-lift.is-on{ opacity:1; }
/* small, in a place's corner, the ring may hang over the light table's dark: there the pieces alone are shown (the
   tool's cut-out), with a shadow the page gives them; the photograph eases out as the cut-out eases in, while the ring
   is carried, and back on the way to the face */
.kc-photo .rp-cut{
  position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none;
  opacity:0; filter:drop-shadow(0 3px 5px rgba(0, 0, 0, .16));
  transition:opacity var(--slower) var(--settle);
}
.kc-photo .rp-pic, .kc-photo .rp-lifts{ transition:opacity var(--slower) var(--settle); }
.kc-photo.kc-compact.is-cut .rp-cut{ opacity:1; }
.kc-photo.kc-compact.is-cut .rp-pic, .kc-photo.kc-compact.is-cut .rp-lifts{ opacity:0; }
/* a charm's hover sequence, when the renders give one: its frames stacked on its crop, one shown at a time */
.kc-photo .rp-seq{ position:absolute; }
.kc-photo .rp-seq-f{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; user-select:none; -webkit-user-drag:none; }
.kc-photo .rp-seq-f.is-on{ opacity:1; }
/* the charms' own links: the hit is the charm's silhouette, nothing is drawn */
.kc-photo .rp-hit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.kc-photo .rp-hit path{ fill:transparent; stroke:none; pointer-events:all; cursor:pointer; }
.kc-photo .rp-hit a{ outline:none; }
/* on the face the member's own key is already where its link leads (/vault): a hand on it names it ("Your key") and
   takes nothing, so it does not offer the pointing hand (23 October). A guest's key on the face leads to Become and
   keeps the hand (vault/ring-photo.js memberTo) */
.kc-photo.kc-full .rp-hit a[data-kc="member"][data-here] path{ cursor:default; }
/* while the ring is carried, and over a place until it is pinned in the corner, it takes no hand */
.mbr.is-in .mbr-ring:not(.is-pinned) .kc-photo .rp-hit path,
.mbr.is-going-in .kc-photo .rp-hit path,
.mbr.is-going-out .kc-photo .rp-hit path{ pointer-events:none; }
/* small, in a place's corner: the whole photograph takes the hand (a charm to its place, the rest back to the key);
   the viewing room hangs the same photograph in its own corner (rooms/vault.js, 23 October) */
.mbr-ring.is-pinned .kc-photo.kc-compact .rp-frame,
.mbr-corner-v .kc-photo.kc-compact .rp-frame{ pointer-events:auto; cursor:pointer; }

/* on a desk the bunch sits a little left of the window's middle, so the envelope keeps more than the gutter's white
   at the screen's right edge (the face's column keeps its own) */
@media (min-width:760px){ .kc-photo .rp-frame{ transform:translateX(-52.5%); } }
/* the charm's name under the hand is set a little smaller than the real-time ring's, so the longest ("Private
   collection") ends before the key's bit, which hangs lower in the photograph */
.mbr.has-ring-photo .mbr-hover{ font-size:clamp(34px, calc(100cqi / 9.6), 92px) !important; }
@media (prefers-reduced-motion:reduce){
  .kc-photo .rp-still, .kc-photo .rp-lift, .kc-photo .rp-cut, .kc-photo .rp-pic, .kc-photo .rp-lifts{ transition:none; }
}