/* ══════════════════════════════════════════════════════════════════════════════════════════════
   bejo-beam.css — BEJO-BEAM-01 (bejo-uk/ai-apps#747)

   A subtle red beam that travels around a button's border on hover or keyboard focus.
   Pure CSS: no JavaScript, no framework, no build step. Drop it into any page (bejo.is WordPress,
   the apps.bejo.ai React shell, a static HTML page) and add `class="bejo-beam"`. A complete sweep
   takes --beam-speed (default 1.8s); it loops while hovered/focused and fades out on leave.

   Colours are Bejo reds only (the palette tokens --carmine / --rosso-ferrari / --montmartre /
   --guards-red / --phoenix). Reduced motion shows a static red outline instead of the travelling
   beam.

   Derivative work. Ported (as a pure-CSS, framework-free effect) from the MIT-licensed
   `border-beam` v1.4.1 by Jakub Antalik — https://github.com/Jakubantalik/border-beam.
   Full upstream MIT notice: client/src/ui/THIRD_PARTY_LICENSES.md
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.bejo-beam {
  /* ── Tunable custom properties (subtle defaults; override per instance) ── */
  /* Bejo reds only. A single travelling highlight uses colours 1–3; 4 and 5 are offered so a
     host can retune the palette without leaving the brand. */
  --beam-color-1: #960018;   /* carmine       */
  --beam-color-2: #d40000;   /* rosso ferrari */
  --beam-color-3: #e63946;   /* montmartre    */
  --beam-color-4: #cc0000;   /* guards red    */
  --beam-color-5: #ff4500;   /* phoenix       */
  --beam-width: 1px;         /* thickness of the travelling beam           */
  --beam-speed: 1.8s;        /* time for one full loop around the border   */
  --beam-opacity: 0.85;      /* peak opacity of the travelling beam        */
  --beam-radius: inherit;    /* follow the host's border-radius; never clip */
  --beam-outline-color: #d40000;
  --beam-outline-width: 1px;

  position: relative;
  /* Promotes the box to its own layer so the sweep does not repaint siblings. */
  will-change: transform;
}

/* The beam layer sits OUTSIDE the content box (inset: -1px on a 1px border), so hover introduces
   no layout shift and the ::after can never intercept the host's pointer events. */
.bejo-beam::before,
.bejo-beam::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--beam-radius);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* The travelling beam: a conic gradient masked to a 1px ring, rotated around the border-box. */
.bejo-beam::before {
  inset: calc(-1 * var(--beam-width));
  padding: var(--beam-width);
  background: conic-gradient(
    from var(--bejo-beam-angle),
    transparent 0deg 304deg,
    var(--beam-color-1) 322deg,
    var(--beam-color-2) 340deg,
    var(--beam-color-3) 356deg,
    transparent 360deg
  );
  /* Paint only the padding ring, leaving the middle transparent. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 0 var(--beam-color-2));
}

/* The static outline. Visible only for prefers-reduced-motion (below). */
.bejo-beam::after {
  inset: 0;
  border: var(--beam-outline-width) solid var(--beam-outline-color);
}

/* ── Hover / keyboard focus: run the beam once around the border, fade out on leave ── */
.bejo-beam:hover::before,
.bejo-beam:focus-visible::before {
  opacity: var(--beam-opacity);
  animation: bejo-beam-travel var(--beam-speed) linear infinite;
}

/* The @property registration is what makes a conic-gradient's angle animatable. Browsers without
   @property support simply show a static red ring (no regression, no layout shift). */
@property --bejo-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes bejo-beam-travel {
  to { --bejo-beam-angle: 360deg; }
}

/* ── Reduced motion: no travelling beam; a static red outline instead ── */
@media (prefers-reduced-motion: reduce) {
  .bejo-beam:hover::before,
  .bejo-beam:focus-visible::before {
    opacity: 0;
    animation: none;
  }
  .bejo-beam:hover::after,
  .bejo-beam:focus-visible::after {
    opacity: var(--beam-opacity);
  }
}