/* ==========================================================================
   GazeTo — DOM Dwell Visualization
   Visual feedback for elements registered with GazeDOMDwell.
   --------------------------------------------------------------------------
   - .dom-dwelling: gaze is currently on the element (progress bar/ring fills)
   - .dom-dwelled: brief flash on activation
   ========================================================================== */

/* The progress ring is drawn with a CSS conic-gradient pseudo-element so
   it works on any DOM element (button, div) without extra markup. */

.dom-dwelling {
  position: relative;
}

.dom-dwelling::before {
  content: "";
  position: absolute;
  /* Fixed-size centred ring — never scales with the element, so it stays the
     same compact size on a small button or a large hub tile. */
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  background:
    conic-gradient(
      from -90deg,
      #4b698c calc(var(--dom-dwell-progress, 0) * 360deg),
      rgba(0, 0, 0, 0.4) 0
    );
  /* Subtract the inner disc to leave a clean ring */
  -webkit-mask:
    radial-gradient(circle, transparent 60%, #000 63%);
          mask:
    radial-gradient(circle, transparent 60%, #000 63%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: opacity 0.12s ease-out;
}

/* Simple fill flash on activation */
.dom-dwelled {
  animation: domDwellFlash 0.32s ease-out;
}

@keyframes domDwellFlash {
  0%   { box-shadow: 0 0 0 0 rgba(75, 105, 140, 0.7),
                     0 4px 12px rgba(0, 0, 0, 0.18); }
  60%  { box-shadow: 0 0 0 18px rgba(75, 105, 140, 0),
                     0 4px 12px rgba(0, 0, 0, 0.18); }
  100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
}

/* Optional explicit "dwell-target" class — adds a subtle hint that the
   element is gaze-activatable (helps clients who use a mix of input methods). */
.dwell-target {
  cursor: pointer;
}

.dwell-target:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(75, 105, 140, 0.35);
  pointer-events: none;
}