.pointer-effects {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pointer-ring {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 101;
  width: 27px;
  height: 27px;
  pointer-events: none;
}

.pointer-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #ff9784;
  border-radius: 50%;
  background: #ff655616;
  box-shadow: 0 0 9px #ff4a39c9, 0 0 20px #ff392b87, inset 0 0 8px #ff554670;
}

.pointer-ring.is-hot::before { border-color: #ffcfbc; background: #ff655636; transform: scale(1.1); }
.pointer-ripple {
  position: absolute;
  inset: 0;
  border: 1px solid #ffb49f;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff4a39b3;
  opacity: 0;
}
.pointer-ring[hidden] { display: none; }
:root:has(dialog[open]) body > :is(.pointer-effects, .pointer-ring) { visibility: hidden; }

@media (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root.red-pointer-active:not(.is-loading, :has(dialog[open])),
  :root.red-pointer-active:not(.is-loading, :has(dialog[open])) *,
  dialog.red-pointer-active[open], dialog.red-pointer-active[open] * { cursor: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .pointer-ring:not([hidden])::before {
    animation: pointer-breathe 2.2s ease-in-out infinite;
    transition: transform .19s ease-out, background-color .16s ease-out, border-color .16s ease-out;
  }

  @keyframes pointer-breathe {
    0%, 100% { scale: .94; opacity: .78; }
    50% { scale: 1.16; opacity: 1; }
  }
}