/* Brief accents only after a real interaction; the control's own box is the mask. */
.pixie-touch-edge {
  position: fixed;
  z-index: 30;
  display: block;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  color: #fff2c8;
}
.pixie-touch-edge--quiet { color: #e9c976; }
.pixie-touch-star {
  position: absolute;
  display: block;
  width: var(--pixie-touch-size, 7px);
  height: var(--pixie-touch-size, 7px);
  margin: calc(var(--pixie-touch-size, 7px) / -2);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  animation: pixie-touch-glint 610ms ease-out var(--pixie-touch-delay, 0ms) both;
}
.pixie-touch-star svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes pixie-touch-glint {
  0% { opacity: 0; transform: scale(.25) rotate(0deg); }
  25% { opacity: .9; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--pixie-touch-x), var(--pixie-touch-y)) scale(.2) rotate(var(--pixie-touch-turn)); }
}
body[data-pixie-motion="paused"] .pixie-touch-edge,
body[data-pixie-motion="reduced"] .pixie-touch-edge,
body[data-pixie-motion="hidden"] .pixie-touch-edge { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pixie-touch-edge { display: none; }
  .pixie-touch-star { animation: none; }
}