/* Magic UI–inspired shimmer — pure CSS for .btn and .floating-cta */

@keyframes btn-shimmer-slide {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}

@keyframes btn-shimmer-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes btn-shimmer-glow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.floating-cta {
  isolation: isolate;
  overflow: hidden;
}

/* Border shimmer — ::before only (arrow is in button label text) */
.btn::before,
.floating-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(217, 255, 63, 0.2) 38%,
    rgba(217, 255, 63, 1) 50%,
    rgba(217, 255, 63, 0.2) 62%,
    transparent 80%
  );
  background-size: 280% 100%;
  animation: btn-shimmer-slide 2.8s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Primary + floating — moving inner highlight */
.btn-primary,
.floating-cta {
  background-image: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: btn-shimmer-glow 2.8s ease-in-out infinite;
}

.btn-ghost::before {
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(217, 255, 63, 0.15) 40%,
    rgba(217, 255, 63, 0.85) 50%,
    rgba(217, 255, 63, 0.15) 60%,
    transparent 80%
  );
  background-size: 280% 100%;
}

.btn-dark::before {
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(217, 255, 63, 0.25) 40%,
    rgba(217, 255, 63, 0.9) 50%,
    rgba(217, 255, 63, 0.25) 60%,
    transparent 80%
  );
  background-size: 280% 100%;
}

.btn-outline-dark::before {
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(22, 45, 13, 0.3) 40%,
    rgba(22, 45, 13, 0.9) 50%,
    rgba(22, 45, 13, 0.3) 60%,
    transparent 80%
  );
  background-size: 280% 100%;
}

@media (hover: hover) {
  .btn-primary:hover::before,
  .floating-cta:hover::before {
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(217, 255, 63, 0.3) 40deg,
      rgba(217, 255, 63, 1) 90deg,
      rgba(217, 255, 63, 0.3) 140deg,
      transparent 200deg,
      transparent 360deg
    );
    background-size: auto;
    animation: btn-shimmer-spin 2.5s linear infinite;
    padding: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .floating-cta::before,
  .btn-primary,
  .floating-cta {
    animation: none;
  }

  .btn-primary,
  .floating-cta {
    background-image: none;
  }
}