/* ============================================================
   CONCEPTO P — THE KEY RING (vault/keychain.js)
   The drawn ring fills the box it is given and arrives by its own light:
   the canvas is clear until its first frame is on the glass, then it comes
   up on the slow settle. Without WebGL the same ring is drawn once on a
   canvas (the still), from the same faces, and comes up the same way.
   ============================================================ */
.kc{ position:absolute; inset:0; }
.kc .kc-canvas, .kc .kc-still-c{ opacity:0; transition:opacity var(--slow, .46s) var(--settle, cubic-bezier(.18,.8,.24,1)); }
.kc.is-lit .kc-canvas, .kc.is-lit .kc-still-c{ opacity:1; }
.kc-still-c{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
/* a swatch of a metal, a silk or a fob's shape: a small drawing, never a box */
.kc-swatch{ display:block; }
@media (prefers-reduced-motion: reduce){
  .kc .kc-canvas, .kc .kc-still-c{ transition:none; }
}