/* ============================================================
   anchor-halo · styles.css   (XUR-legal, gate-clean)
   ------------------------------------------------------------
   The glass Anchor logo's conic-ring "halo" — a masked gold sweep
   around a circular mark. Promoted 2026-07-11 from the frames'
   `.rail__mark::before` surface CSS so the look is a SINGLE SOURCE the
   workbench tunes and every surface consumes (the same conic-sweep
   idiom the segmented wire + anchor-brand pill wear). Michael loves it
   and wanted calmer versions + a speed control — so the noise is all in
   tokens now, dialed back at rest and tunable in the bench.

       <span class="acn-halo"> … the round mark … </span>

   The ring is drawn on the host's `::before`; the host must be round-ish
   and position:relative (the rail mark already is — the ring reads its
   radius via `border-radius:inherit`).

   Tokens the workbench writes (all in tokens.css — no var() fallbacks):
     --halo-op     ring + glint opacity (INTENSITY; 0 = invisible)   → "less noisy"
     --halo-thick  ring thickness in px (thinner = calmer)
     --halo-speed  sweep duration                                    → the speed knob

   Modes:
     .acn-halo         always-on sweep (the frames default today)
     .acn-halo--hover  invisible at rest; sweeps only while the host is
                       hovered/focused (the calmest "on-demand" variant)
     .acn-halo--off    force-hidden (the compare-chip "off" state)

   Gate rules honoured:
   • no :root, no tokens defined in the component
   • NO rgb()/rgba()/hsl()/hex — every translucency is color-mix on a token
   • the only literal colour is `black`, legal ONLY in the mask idiom
   • every class / keyframe / @property is prefixed `acn-halo`
   • no var() fallbacks — --halo-op / --halo-thick / --halo-speed +
     --accent / --accent-hi live in tokens.css
   ============================================================ */
@property --acn-halo-ang{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes acn-halo-sweep{ to{ --acn-halo-ang:360deg; } }

.acn-halo{ position:relative; }
/* the ring — sits just outside the mark, gold conic sweep, masked to a band.
   Opacity IS the intensity knob, so it fades the ring AND its glow together. */
.acn-halo::before{
  content:""; position:absolute; inset:calc(-1 * var(--halo-thick)); border-radius:inherit; padding:var(--halo-thick);
  pointer-events:none; opacity:var(--halo-op);
  background:conic-gradient(from var(--acn-halo-ang),
    color-mix(in srgb, var(--accent) 16%, transparent) 0deg,
    color-mix(in srgb, var(--accent) 42%, transparent) 120deg,
    color-mix(in srgb, var(--accent-hi) 92%, transparent) 180deg,
    color-mix(in srgb, var(--accent) 42%, transparent) 240deg,
    color-mix(in srgb, var(--accent) 16%, transparent) 360deg);
  -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite:exclude;
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 40%, transparent));
  animation:acn-halo-sweep var(--halo-speed) linear infinite;
  transition:opacity .3s ease;
}
/* hover-only — hidden AND idle at rest, reveal + sweep on host hover/focus.
   The animation is OFF at rest (not just opacity:0) so an invisible conic sweep
   can't keep re-compositing every frame — that per-frame raster inside a
   backdrop-filtered parent is what flickers the frosted chrome. This is the
   genuinely calm "on-demand" variant (2026-07-13 fix; the base always-on `.acn-halo`
   is unchanged). */
.acn-halo--hover::before{ opacity:0; animation:none; }
.acn-halo--hover:hover::before,
.acn-halo--hover:focus-visible::before,
.acn-halo--hover:focus-within::before{ opacity:var(--halo-op); animation:acn-halo-sweep var(--halo-speed) linear infinite; }
/* off — the compare-chip "no halo" state; a HARD override. The extra selectors
   match the hover-reveal's specificity (a class + a pseudo-class + ::before) and
   come later, so `--off` + `--hover` can't flicker the ring back on hover/focus. */
.acn-halo--off::before,
.acn-halo--off:hover::before,
.acn-halo--off:focus-visible::before,
.acn-halo--off:focus-within::before{ opacity:0; animation:none; }

@media (prefers-reduced-motion: reduce){
  .acn-halo::before{ animation:none; }
}