/* Shared dwell-to-click progress ring.
 *
 * Attached by shared/dwell.js (attachDwell). The ring is an SVG arc with
 * a thick build-up stroke — crisp at any size, animated via a CSS
 * keyframe scaled by `--dw-dwell-ms` which the helper sets on the host
 * element.
 *
 * Cosmetic hooks (set per activity on the host or an ancestor):
 *   --dw-dwell-accent      Ring sweep colour. Default orange #ff6600.
 *   --dw-dwell-complete    Confirmation colour. Default green #46a850.
 *   --dw-dwell-track       Faint track behind the arc. Default rgba(0,0,0,.08).
 *   --dw-dwell-stroke-w    Stroke width in viewBox units (viewBox 0..36).
 *                          Default 6.
 */

.dw-dwell-indicator {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s ease-out;
    z-index: 3;
}

.dw-dwelling > .dw-dwell-indicator,
.dw-dwell-complete > .dw-dwell-indicator {
    opacity: 1;
}

.dw-dwell-indicator svg {
    width: 100%;
    height: 100%;
    display: block;
    /* -90° so the sweep starts at 12 o'clock. */
    transform: rotate(-90deg);
}

/* Thin faint track hints at the full travel before the sweep begins. */
.dw-dwell-track {
    fill: none;
    stroke: var(--dw-dwell-track, rgba(0, 0, 0, 0.08));
    stroke-width: 2;
}

/* Thick arc that sweeps clockwise as dwell progresses. r=15 →
 * circumference ≈ 94.25; the stroke-width is deliberately chunky so the
 * build-up ring reads clearly even on small dwell targets. */
.dw-dwell-fill {
    fill: none;
    stroke: var(--dw-dwell-accent, #ff6600);
    stroke-width: var(--dw-dwell-stroke-w, 6);
    stroke-linecap: round;
    stroke-dasharray: 94.25;
    stroke-dashoffset: 94.25;
}

.dw-dwelling > .dw-dwell-indicator .dw-dwell-fill {
    animation: dw-dwell-sweep var(--dw-dwell-ms, 1200ms) linear forwards;
}

.dw-dwell-complete > .dw-dwell-indicator .dw-dwell-fill {
    stroke-dashoffset: 0;
    stroke: var(--dw-dwell-complete, #46a850);
}

@keyframes dw-dwell-sweep {
    from { stroke-dashoffset: 94.25; }
    to   { stroke-dashoffset: 0; }
}

/* Confirmation flash: brief outer pulse the moment the ring completes,
 * so the user sees "dwell landed" before the view changes. */
.dw-dwell-complete {
    animation: dw-dwell-confirm 140ms ease-out;
}

@keyframes dw-dwell-confirm {
    0%   { box-shadow: 0 0 0 0 rgba(70, 168, 80, 0); }
    50%  { box-shadow: 0 0 0 0.4em rgba(70, 168, 80, 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(70, 168, 80, 0); }
}

/* Reduced motion: the sweep is the clock, so it must still run; the
 * confirmation box-shadow pulse is swapped for a steady state so the
 * user still gets a landing cue without the animated flash. */
@media (prefers-reduced-motion: reduce) {
    .dw-dwell-complete {
        animation: none;
        box-shadow: 0 0 0 0.3em rgba(70, 168, 80, 0.5);
    }
}