/* shared/demo-intro.js: the pointer, the tap ring, the pulse, the ripple, the shadow under the sheet as it opens out of the button (and folds back), and the cue. Every class dmi- prefixed.
   In the intro the first four live inside the stamped site, above its Book here pill (z-index 50 in kzm.css); in the tour the pointer, the tap rings and
   the ripples sit in the frame over the sheet. None of them ever takes a tap. */
.dmi-cur,.dmi-tap,.dmi-ring,.dmi-dot{position:absolute;left:0;top:0;z-index:60;pointer-events:none;box-sizing:border-box}
.dmi-cur svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1.5px 2.5px rgba(0,0,0,.35));transform-origin:23% 13%}
.dmi-tap{border-radius:50%;background:rgba(31,29,26,.16);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.95),0 0 0 1px rgba(31,29,26,.3),0 6px 16px rgba(0,0,0,.28)}
.dmi-ring{border-radius:999px}
.dmi-dot{border-radius:50%;background:rgba(31,29,26,.3)}
.dmi-morph{position:absolute;pointer-events:none;box-shadow:0 18px 48px rgba(8,18,12,.3)}  /* a shadow only: the sheet itself is the shape */
.dmi-cue{position:absolute;left:0;top:0;z-index:70;pointer-events:none;padding:.42em .85em .46em;border-radius:999px;background:#1f1d1a;color:#fff;font-weight:600;line-height:1;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25)}  /* the visitor's "Your turn", over their tap */