:root {
  --touch-anchor-surface: linear-gradient(110deg, #292926f2, #21211ec9);
  --touch-halo-strength: .18;
}

:root, .light-stage {
  --touch-frame-halo: radial-gradient(ellipse at center,
    rgb(233 230 218 / var(--touch-halo-strength)),
    rgb(211 209 201 / calc(var(--touch-halo-strength) * .55)) 23%,
    rgb(199 197 191 / calc(var(--touch-halo-strength) * .18)) 48%,
    transparent 73%);
}

/* The anchor stays in place and its surface remains open to the ambient light. */
[data-anchor-pending] {
  position: relative;
}
[data-anchor-pending]::before {
  content: '';
  position: absolute;
  inset: auto auto 0 18px;
  width: 112px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .19;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="quiet"]) [data-anchor-pending]::before {
    animation: touch-anchor-glint 1s ease-in-out both;
  }
}
@keyframes touch-anchor-glint {
  0% { opacity: 0; transform: translateX(-4px); }
  45% { opacity: .26; }
  100% { opacity: .08; transform: translateX(12px); }
}