/* Shared button styles — base, hover, animated gradient */

@keyframes btn-gradient-orbit {
  0%   { background-position: 50% 0%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 50% 100%; }
  75%  { background-position: 0% 50%; }
  100% { background-position: 50% 0%; }
}

.btn {
  transition:
    transform 0.15s ease,
    background 0.25s ease,
    background-color 0.25s ease,
    background-position 0.4s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.btn-primary {
  background: var(--ink, #030712);
  color: var(--n0, #fff);
  border-color: var(--ink, #030712);
}

.btn-primary:hover {
  background: #1b2030;
  border-color: #1b2030;
  box-shadow: 0 8px 20px -8px rgba(3, 7, 18, 0.35);
}

.btn-light {
  background: var(--n0, #fff);
  color: var(--ink, #030712);
  border-color: var(--n0, #fff);
}

.btn-light:hover {
  background: var(--blue-lightest, #e9eaf9);
  color: var(--blue, #252fc7);
  border-color: var(--blue-lightest, #e9eaf9);
  box-shadow: 0 6px 18px -8px rgba(37, 47, 199, 0.35);
}

.btn-outline-light {
  background: transparent;
  color: var(--n0, #fff);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 4px 16px -6px rgba(255, 255, 255, 0.2);
}

.btn-outline-dark {
  background: transparent;
  color: var(--ink, #030712);
  border-color: rgba(3, 7, 18, 0.2);
}

.btn-outline-dark:hover {
  background: var(--ink, #030712);
  color: var(--n0, #fff);
  border-color: var(--ink, #030712);
  box-shadow: 0 8px 20px -8px rgba(3, 7, 18, 0.35);
}

.btn-link {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.btn-link:hover {
  color: var(--cyan, #00d2ff);
  opacity: 1;
}

.btn-gradient,
.btn-add-listing,
.submit,
.gate-card button,
.contact-cue-submit.btn-gradient {
  color: var(--n0, #fff);
  border: none;
  box-shadow: 0 8px 24px -8px rgba(37, 47, 199, 0.5);
  background-color: var(--blue, #252fc7);
  background-image: linear-gradient(
    120deg,
    var(--blue, #252fc7) 0%,
    var(--cyan, #00d2ff) 50%,
    var(--blue, #252fc7) 100%
  );
  background-size: 300% 300%;
  background-position: 50% 50%;
}

.btn-gradient:hover,
.btn-add-listing:hover,
.submit:hover,
.gate-card button:hover,
.contact-cue-submit.btn-gradient:hover {
  animation: btn-gradient-orbit 6s linear infinite;
  box-shadow: 0 12px 28px -8px rgba(37, 47, 199, 0.65);
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .btn-gradient:hover,
  .btn-add-listing:hover,
  .submit:hover,
  .gate-card button:hover,
  .contact-cue-submit.btn-gradient:hover {
    animation: none;
    background-position: 50% 0%;
    filter: brightness(1.04);
  }
}