/* ── the lit ring ────────────────────────────────────────────────────
   The rotating conic border from the kiosk (qaqc/index.html, "the lit
   border"), lifted out so the marketing pages and the app mark the next
   action the same way. That file keeps its own copy on purpose: it is the
   application and ships self-contained, and its tokens are the light-card
   set. This one is the dark marketing set. Change one, change the other.

   The rule that comes with it matters more than the CSS:
   IT IS ONLY EVER ON ONE CONTROL PER SCREEN. It marks the one thing to do
   next. Put it on every button and it marks nothing. So a sticky header
   button never carries it — it would be on screen beside the section's own
   CTA and there would be two next things.

   Applied by adding class="lit" to the control. Nothing else opts in. */

@property --lit{ syntax:"<angle>"; initial-value:0deg; inherits:false }
@keyframes litspin{ to{ --lit:360deg } }

.lit{
  position:relative;
  isolation:isolate;
  /* a low halo under the ring, so it reads as lit rather than outlined */
  box-shadow:0 0 22px -9px var(--brand,#E87722);
}
.lit::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  /* orange, a white highlight, and a dark gap that reads as the ring turning
     away from you. On the dark pages the gap is the page, not a colour. */
  background:conic-gradient(from var(--lit),
    var(--brand,#E87722) 0deg,
    #ffffff 65deg,
    var(--lit-gap,#0b0b10) 125deg,
    var(--brand,#E87722) 195deg,
    #ffffff 285deg,
    var(--brand,#E87722) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:litspin 2.5s linear infinite;
  pointer-events:none;
  z-index:2;
}

/* Browsers without @property cannot tween the angle, and a frozen ring would
   claim to be animated. Give those, and anyone who asked for less motion, a
   steady orange edge instead — same meaning, no movement. */
@supports not (background:conic-gradient(from var(--lit),#000,#fff)){
  .lit::before{ background:var(--brand,#E87722); animation:none }
}
@media(prefers-reduced-motion:reduce){
  .lit::before{ background:var(--brand,#E87722); animation:none }
}