:root {
  --btn-pop-scale: 1.04;
  --btn-pop-translate: -6px;
  --btn-shadow: 0 18px 40px rgba(99,102,241,0.08), 0 6px 18px rgba(236,72,153,0.06);
  --btn-transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s cubic-bezier(.2,.9,.3,1);
  --btn-primary-bg: linear-gradient(90deg, #ec4899 0%, #6366f1 50%, #06b6d4 100%);
  --btn-primary-text: #ffffff;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary,
.btn-grad {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.8);
  color: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Apply to common button-like elements across the site */
button,
.btn,
.btn-view,
a.btn,
input[type="button"],
input[type="submit"],
.inline-button {
  transition: var(--btn-transition);
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* Hover / focus - AAA smooth pop with radiant shadow */
@media (hover: hover) and (pointer: fine) {
  button:hover,
  .btn:hover,
  .btn-view:hover,
  a.btn:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover,
  .inline-button:hover,
  button:focus-visible,
  .btn:focus-visible,
  .btn-view:focus-visible,
  a.btn:focus-visible,
  input[type="button"]:focus-visible,
  input[type="submit"]:focus-visible {
    transform: translateY(var(--btn-pop-translate)) scale(var(--btn-pop-scale));
    box-shadow: var(--btn-shadow);
    outline: none;
  }

  /* Active press state */
  button:active,
  .btn:active,
  .btn-view:active {
    transform: translateY(calc(var(--btn-pop-translate) + 2px)) scale(calc(var(--btn-pop-scale) - 0.02));
    transition-duration: .14s;
  }
}

@media (hover: none) {
  button:active,
  .btn:active,
  .btn-view:active {
    transform: scale(0.985);
    transition-duration: .12s;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
  }
}

/* Accessible focus ring */
:focus-visible {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), var(--btn-shadow);
}

/* Disabled button variant: allow using the .btn visual without interactive transforms */
.btn[aria-disabled="true"] {
  pointer-events: none; /* fully non-interactive */
  cursor: not-allowed;
  opacity: 0.95;
  transform: none !important; /* prevent any pop/translate */
  box-shadow: none !important; /* keep flat */
}
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:focus,
.btn[aria-disabled="true"]:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  .btn-view,
  a.btn,
  input[type="button"],
  input[type="submit"],
  .inline-button {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}