/* Homepage nav — Join CYN primary CTA */

.btn-join-cyn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  --join-x: 50%;
  --join-y: 50%;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1),
    box-shadow 0.4s ease,
    filter 0.35s ease;
}

.btn-join-cyn__shine {
  position: absolute;
  inset: -50%;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.28) 70deg,
    transparent 140deg
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.btn-join-cyn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--join-x) var(--join-y),
    rgba(255, 255, 255, 0.35) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-join-cyn__label,
.btn-join-cyn__icon {
  position: relative;
  z-index: 2;
}

.btn-join-cyn__icon {
  display: grid;
  place-items: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.btn-join-cyn:hover,
.btn-join-cyn:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -2px 0 rgba(0, 0, 0, 0.08) inset,
    0 0 24px -4px rgba(91, 191, 191, 0.5),
    0 18px 36px -12px rgba(91, 191, 191, 0.65);
}

.btn-join-cyn:hover::before,
.btn-join-cyn:focus-visible::before,
.btn-join-cyn:hover .btn-join-cyn__shine,
.btn-join-cyn:focus-visible .btn-join-cyn__shine {
  opacity: 1;
}

.btn-join-cyn:hover .btn-join-cyn__shine,
.btn-join-cyn:focus-visible .btn-join-cyn__shine {
  animation: join-shine-spin 3.5s linear infinite;
}

.btn-join-cyn:hover .btn-join-cyn__icon,
.btn-join-cyn:focus-visible .btn-join-cyn__icon {
  transform: scale(1.12) rotate(-6deg);
}

@keyframes join-shine-spin {
  to { transform: rotate(360deg); }
}

.btn-join-cyn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Secondary nav — Get in touch */
.btn-nav-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  border: 1px solid rgba(14, 42, 56, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: #0e2a38;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.btn-nav-secondary:hover,
.btn-nav-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(91, 191, 191, 0.35);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 12px 28px -16px rgba(91, 191, 191, 0.35);
}

.btn-nav-secondary:active {
  transform: translateY(0);
}

.btn-nav-secondary__icon {
  transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.btn-nav-secondary:hover .btn-nav-secondary__icon,
.btn-nav-secondary:focus-visible .btn-nav-secondary__icon {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-join-cyn:hover .btn-join-cyn__shine {
    animation: none;
  }

  .btn-join-cyn:hover .btn-join-cyn__icon {
    transform: none;
  }
}