/* ==========================================================================
   Button — curved fill on hover
   --------------------------------------------------------------------------
   Usage: add `.btn` to any <a>/<button> and wrap its text in `.btn__label`.
   Size, colours and spacing come from the element's own section class.
   Hover fill is black; `.btn--red` fills red (cream text) and `.btn--dark`
   (black buttons on dark/pink menus) fills pink (black text).
   Change the fill per instance with `--btn-fill`.
   ========================================================================== */

.btn {
  --btn-fill: var(--color-black);
  --btn-hover-color: var(--color-cream);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color 0.4s var(--ease-out-quint);
}

.btn::before {
  content: "";
  position: absolute;
  inset: -70% -15%;
  z-index: -1;
  border-radius: 50%;
  background: var(--btn-fill);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.65s var(--ease-out-quint);
}

.btn:is(:hover, :focus-visible) {
  color: var(--btn-hover-color);
}

.btn:is(:hover, :focus-visible)::before {
  transform: translateY(0);
}

.btn__label {
  position: relative;
  display: inline-block;
  transition: translate 0.5s var(--ease-out-quint);
}

.btn:is(:hover, :focus-visible) > .btn__label {
  translate: 0 -2px;
}

/* Red hover (talks, tools and footer buttons) */
.btn--red {
  --btn-fill: var(--color-red);
  --btn-hover-color: var(--color-cream);
}

/* Black buttons inside the mobile menu */
.btn--dark {
  --btn-fill: var(--color-pink);
  --btn-hover-color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn__label {
    transition: none;
  }

  .btn:is(:hover, :focus-visible) > .btn__label {
    translate: none;
  }
}