/* ============================================================================
   ENOK Edge Sweep — a luminous beam that travels the perimeter of an element.
   Zero dependencies. CSP-safe. No build step.

   Put .es-sweep on a card, button, or panel and a beam orbits its border.
   Tune it with CSS variables; pair with edge-sweep.js for runtime mounts.
   Honours prefers-reduced-motion: the beam holds as a soft static border.

   An original ENOK Foundry component — not derived from any other kit.
   Free to use, copy, and ship — see LICENSE.txt.
   ENOK · the open media company · enok.com
   ============================================================================ */

/* Animatable angle. Registered so the conic sweep can tween 0deg -> 360deg. */
@property --es-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.es-sweep {
  /* ---- tunables — override per element (style="--es-color:…") or globally ---- */
  --es-color:        #6BE7FF;   /* beam core                                    */
  --es-color-2:      #B98BFF;   /* beam trail / second hue                      */
  --es-thickness:    2px;       /* width of the border band the beam rides on   */
  --es-arc:          80deg;     /* angular length of the beam                    */
  --es-speed:        4s;        /* time for one full lap                         */
  --es-radius:       14px;      /* corner radius of the ring                     */
  --es-glow:         7px;       /* bloom blur radius                             */
  --es-glow-opacity: .75;       /* bloom strength                                */
  --es-rest:         color-mix(in srgb, var(--es-color) 24%, transparent);

  position: relative;
  border-radius: var(--es-radius);
  isolation: isolate;
}

/* The ring is a padded box filled with a rotating conic gradient, then masked
   so only the border band shows (the content box is punched out). Two layers:
   ::before is the crisp beam, ::after is a blurred bloom behind it. */
.es-sweep::before,
.es-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--es-thickness);
  background: conic-gradient(
    from var(--es-angle),
    transparent       0deg,
    var(--es-color-2) calc(var(--es-arc) * .4),
    var(--es-color)   var(--es-arc),
    transparent       calc(var(--es-arc) + .5deg)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: es-orbit var(--es-speed) linear infinite;
  pointer-events: none;
}
.es-sweep::before { z-index: 2; }
.es-sweep::after  {                       /* the luminous bloom behind the beam */
  z-index: 1;
  filter: blur(var(--es-glow));
  opacity: var(--es-glow-opacity);
}

@keyframes es-orbit {
  to { --es-angle: 360deg; }
}

/* ---- Modifiers -------------------------------------------------------------- */
.es-sweep--reverse::before,
.es-sweep--reverse::after  { animation-direction: reverse; }

.es-sweep--calm     { --es-speed: 7s;   --es-arc: 60deg;  --es-glow: 5px; }
.es-sweep--urgent   { --es-speed: 2.2s; --es-arc: 110deg; --es-glow: 9px; }
.es-sweep--hairline { --es-thickness: 1px; }
.es-sweep--bold     { --es-thickness: 3px; --es-glow: 9px; }

/* Pause the lap without unmounting (e.g. offscreen or on blur). */
.es-sweep.is-paused::before,
.es-sweep.is-paused::after { animation-play-state: paused; }

/* ---- Fallback: no conic-gradient support — show the resting soft border ----- */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .es-sweep::after  { display: none; }
  .es-sweep::before { animation: none; background: var(--es-rest); }
}

/* ---- Accessibility: reduced motion → static soft border, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .es-sweep::before,
  .es-sweep::after { animation: none !important; }
  .es-sweep::after { display: none; }
  .es-sweep::before {
    background: conic-gradient(
      from 0deg,
      var(--es-color-2),
      var(--es-color),
      var(--es-color-2),
      var(--es-color),
      var(--es-color-2)
    );
    opacity: .5;
  }
}