/* Border-beam button — animated conic gradient sweeping the border.
   Inspired by cult-ui border-beam-button, adapted to brutalist square corners. */

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

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

.beam-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  background: var(--bg-secondary);
  border: none;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.beam-btn::before,
.beam-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;            /* border thickness */
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    var(--accent-gold) 60deg,
    var(--accent-red) 110deg,
    transparent 180deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beam-spin 3.2s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.beam-btn::after {
  filter: blur(6px);
  opacity: .55;
  z-index: -2;
}

.beam-btn:hover {
  color: var(--accent-gold);
  transform: translateY(-1px);
}

.beam-btn:hover::before,
.beam-btn:hover::after {
  animation-duration: 1.6s;
}

/* Dark-mode tweak: a touch more glow */
html[data-theme="dark"] .beam-btn::after {
  opacity: .75;
}

/* Reduced motion: keep visible border but stop spin */
@media (prefers-reduced-motion: reduce) {
  .beam-btn::before,
  .beam-btn::after {
    animation: none;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-red));
  }
}

/* When applied to the .contact-btn nav CTA, keep the existing red CTA look
   (which uses color: white !important) and just add the rotating beam border. */
.contact-btn.beam-btn {
  background: var(--accent-red);
  color: #fff;
}
.contact-btn.beam-btn:hover {
  background: var(--text-main);
  color: #fff;
}