/*
  justincook.dev · hardware (how I build) · ART LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="art/hardware-art.css">
  Every rule here targets an <img> that art/hardware-art.js inserts ONLY once its file has loaded. With no image,
  nothing matches and the proof panel is exactly as before. Slot sizes: art/README.md, section "Hardware".
*/
:root{
  --jc-art-proof-rest:1;     /* the object at rest, before the claim's scene starts */
  --jc-art-proof-dim:.12;    /* the object behind the scene once it plays */
  --jc-art-proof-fade:.5;    /* seconds from rest to dim, from the scene's first tween (read by the JS) */
  --jc-art-proof-pos:50% 50%;
  --jc-art-outline:#FF2E9A;
}
img.jc-art{position:absolute;display:block;max-width:none;border:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* first child of the proof panel (inside its 1 px rule): the caption and the scene paint above it.
   --jc-art-k runs 0 -> 1 on the page's own timeline (set by the JS); opacity goes rest -> dim with it. */
.proof>img.jc-art-proof{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:var(--jc-art-proof-pos);
  opacity:calc(var(--jc-art-proof-rest) - var(--jc-art-k,0) * (var(--jc-art-proof-rest) - var(--jc-art-proof-dim)))}
html.jc-art-outline img.jc-art{outline:1px dashed var(--jc-art-outline);outline-offset:-1px}