/* THE POINTER ("Frost") — a small disc of frosted glass, the iPad pointer. pointer.js moves it.
   At rest it is a soft frosted circle. On a button it lets go of the mouse, glides
   onto the button and becomes a sheet of glass the button's own shape. In a text
   field it becomes a caret. */

html.cx-on, html.cx-on * { cursor: none !important; }
html.cx-on iframe { cursor: auto !important; }

#cx {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 2147483000; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
#cx.is-live { opacity: 1; }
#cx .cx-glass {
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 999px;
  will-change: transform, width, height, border-radius;
  /* frosted: it blurs and lifts whatever is under it, with a fine bright edge */
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.22) 42%, rgba(255,255,255,0) 64%),
    linear-gradient(165deg, rgba(196,214,228,.42), rgba(120,146,168,.30));
  backdrop-filter: blur(5px) saturate(1.7) brightness(1.08);
  -webkit-backdrop-filter: blur(5px) saturate(1.7) brightness(1.08);
  box-shadow:
    inset 0 0 0 .75px rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(21,34,48,.10),
    0 0 0 .5px rgba(21,34,48,.16),
    0 3px 10px rgba(21,34,48,.16);
  transition: background .3s ease, box-shadow .3s ease, opacity .25s ease;
}
/* the light that slides across a button under the pointer */
#cx .cx-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.6), rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .3s ease;
}

/* on a button: one quiet sheet of glass over it */
#cx.is-snap .cx-glass {
  background: rgba(21,34,48,.05);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 .75px rgba(255,255,255,.9), 0 0 0 .5px rgba(21,34,48,.07), 0 10px 28px rgba(21,34,48,.10);
}
#cx.is-snap .cx-glass::after { opacity: .7; }
#cx.is-snap.on-solid .cx-glass {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 .75px rgba(255,255,255,.45), 0 12px 30px rgba(21,34,48,.20);
}
#cx.is-snap.on-solid .cx-glass::after { opacity: .5; }
/* on the voice orb: a ring of glass around it */
#cx.is-snap.on-orb .cx-glass {
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 .5px rgba(59,159,212,.25), 0 14px 40px rgba(59,159,212,.16);
}
#cx.is-snap.on-orb .cx-glass::after { opacity: .35; }
/* a big row (an FAQ question): the disc swells a little and clears */
#cx.is-big .cx-glass {
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%), rgba(150,175,195,.18);
}
/* in a text field: a caret */
#cx.is-text .cx-glass {
  background: #2882B5;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 0 8px rgba(59,159,212,.35);
}
#cx.is-text .cx-glass::after { opacity: 0; }