/*
  Laser border (CSS-only)
  Usage: <div class="laser-frame">…</div>
  Notes:
  - Pure CSS: conic-gradient + masking.
  - @property enables smooth animation of the angle custom property.
  - Works in modern Chromium/Firefox. Uses -webkit-mask for WebKit/Safari.
*/

@property --laser-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.laser-frame {
  /* Tweakables */
  --laser-color: #63eaff;                 /* bright cyan for the “laser” */
  --laser-glow: rgba(99,234,255, .65);    /* soft glow colour */
  --laser-base: rgba(99,234,255, .22);    /* subtle static border */
  --laser-thickness: 2px;                 /* border stroke width */
  --laser-radius: 18px;                   /* corner radius */
  --laser-speed: 15s;                      /* full loop duration */
  --laser-segment: 190deg;                 /* size of the bright segment */

  position: relative;
  border-radius: var(--laser-radius, 18px);
  background: rgba(10, 20, 32, .35);      /* optional background inside */
  box-shadow: inset 0 0 0 1px var(--laser-base); /* faint static outline */
}

/* The animated stroke */
.laser-frame::before,
.laser-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Carve out only a “ring” (stroke) using masks */
  padding: var(--laser-thickness, 2px);
  /* Compose a conic gradient where a bright arc rotates around */
  background:
    conic-gradient(
      from var(--laser-angle),
      transparent 0,
      transparent calc(360deg - var(--laser-segment)),
      var(--laser-color) 0
    ) border-box;

  /* Mask so only the border ring is visible */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: laser-spin var(--laser-speed) linear infinite;
  pointer-events: none;         /* ← IMPORTANT: don't block clicks */
  z-index: 0;                   /* sit below content */
}

/* Outer glow that follows the laser (slightly bigger + blur) */
.laser-frame::after {
  padding: calc(var(--laser-thickness) + 4px);
  background:
    conic-gradient(
      from var(--laser-angle),
      transparent 0,
      transparent calc(360deg - var(--laser-segment)),
      var(--laser-glow) 0
    ) border-box;
  filter: blur(8px);
  opacity: .9;
  pointer-events: none;
}

@keyframes laser-spin {
  to { --laser-angle: 360deg; }
}

/* Optional: a darker inner panel to mimic a HUD card */
.laser-panel {
  border-radius: calc(var(--laser-radius) - 6px);
  background: rgba(3, 12, 20, .55);
  padding: 1.25rem;
  color: #eaf6ff;
}
/* Ensure your real content is above the lasers */
.laser-frame > * {
  position: relative;
  z-index: 1;                   /* above ::before/::after */
}