/* crayon.css */

/* palette scales with viewport width (min-max clamp) */
#jjc-crayon-box{
  position:fixed; bottom:-12%; left:2%;
  width:clamp(120px, 15vw, 260px);
  z-index: 150;
  cursor:pointer;
}

/* Drawing canvas covers everything except the nav */
.jjc-crayon-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30; /* Keep it on top of the Rive animation */
  pointer-events: none; /* Default to letting clicks pass through */
}


/* Add an “active” state so we can flip events on/off */
.jjc-crayon-active{
  pointer-events: auto;
}

/* crayon.css  – additions */
#jjc-crayon-box svg g[id$="_Crayon"]{
  transform-origin: 50% 100%;          /* pivot at bottom centre */
  transition: transform .25s ease-out; /* hover lift */
}

#jjc-crayon-box svg g[id$="_Crayon"]:hover{
  transform: translateY(-20px);
}

/* Hide mouse cursor only while a crayon is active */
/* body.drawing-mode, */
/* body.drawing-mode * { cursor: none !important; } */

/* prevent lifted crayons from clipping */
#jjc-crayon-box svg{ overflow:visible; width:100%; height:auto; }

#jjc-crayon-box svg g[id$="_Crayon"]{
  transform-origin: 50% 100%;
  transition: transform .25s ease-out;
  will-change: transform;                           /* new: isolate stacking */
}

/* Keep the drawing layer safely above Rive (10) and below nav (20) */
.jjc-crayon-layer,
.jjc-crayon-layer + .canvas-container { z-index: 30 !important; }

#jjc-crayon-box svg { overflow: visible; }

/* Rive canvas never steals pointer events */
#rive-canvas { pointer-events: none; }