/* Light Beam button: component styles (unmodified from the supplied component). */
@property --lb-gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.light-beam-btn {
  --lb-gradient-angle: 0deg;
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  padding: 14px 32px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: #fffeff;
  background: 
    linear-gradient(#010101, #010101) padding-box, 
    conic-gradient(
      from calc(var(--lb-gradient-angle) - 0deg), 
      transparent 0%, 
      #1d4fd8 5%, 
      #8584fe 15%, 
      #1d4fd8 30%, 
      transparent 40%, 
      transparent 100%
    ) border-box;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px #1b1819;
  outline: none;
  transition: box-shadow 0.3s, transform 0.2s;
  cursor: pointer;
  isolation: isolate;
  font-family: 'Inter', -apple-system, sans-serif;
  z-index: 0;
  animation: lb-border-spin 2.5s linear infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.light-beam-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation-play-state: paused;
}

@keyframes lb-border-spin {
  to {
    --lb-gradient-angle: 360deg;
  }
}

.light-beam-btn:active:not(.disabled) {
  transform: translateY(1px) scale(0.98);
}

.light-beam-btn::before {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  --size: calc(100% - 6px);
  --position: 2px;
  --space: 4px;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--lb-gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
}

.light-beam-btn::after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, #1d4fd8, transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
  animation: lb-shimmer 4s linear infinite;
}

.light-beam-btn.disabled::after {
  animation-play-state: paused;
}

.light-beam-btn span {
  position: relative;
  z-index: 2;
}

@keyframes lb-shimmer {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Site adapter: sizing and integration only, not part of the component. */
.light-beam-btn { text-decoration: none; }
a.light-beam-btn, button.light-beam-btn, .light-beam-btn { color: #fffeff; }
.light-beam-btn.lb-block { width: 100%; }
.nav-links .light-beam-btn { padding: 9px 20px; font-size: 14px; font-weight: 600; }
.mob .light-beam-btn { width: 100%; padding: 12px 20px; font-size: 15px; }
.light-beam-btn:disabled { opacity: 0.5; cursor: not-allowed; animation-play-state: paused; }
.light-beam-btn:disabled::after { animation-play-state: paused; }
/* The beam keeps running with reduced motion: it is a light moving around the edge, not movement of the page. */