/* Liquid fill for prominent CTA and chat-action buttons. */
.button,
.topbar .nav-cta,
.review-head a,
.chat-form button {
  --liquid-base: var(--wine);
  --liquid-fill: var(--rose);
  --liquid-ink: #fff;
  --liquid-hover-ink: #fff;
}

:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
) {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--liquid-ink);
  transition:
    transform .24s ease,
    color .24s ease,
    border-color .24s ease;
}

:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
)::before,
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
)::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Rebuild each original button background below the liquid layer. */
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
)::after {
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--liquid-base);
}

/* One irregular sheet rises through the clipped button and drains on leave. */
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
)::before {
  left: -28%;
  top: 94%;
  z-index: -1;
  width: 156%;
  height: 230%;
  border-radius: 46% 54% 8% 4% / 15% 19% 8% 5%;
  background: var(--liquid-fill);
  transform: translate3d(0, 0, 0) rotate(-4deg) scaleX(1.04);
  transform-origin: 50% 50%;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}

/* Outlined controls fill with wine and invert their labels. */
.text-link,
.chat-quick button {
  --liquid-base: transparent;
  --liquid-fill: var(--wine);
  --liquid-ink: var(--wine);
  --liquid-hover-ink: #fff;
}

/* The light CTA in the contact section stays legible throughout the rise. */
.contact .button {
  --liquid-base: var(--cream);
  --liquid-fill: var(--pink);
  --liquid-ink: var(--wine);
  --liquid-hover-ink: var(--wine);
}

:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
):is(:hover, :focus-visible, :active),
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
).is-liquid-touched {
  background: transparent;
  color: var(--liquid-hover-ink);
}

@media (hover: hover) {
  :is(
    .button,
    .topbar .nav-cta,
    .text-link,
    .review-head a,
    .chat-quick button,
    .chat-form button
  ):hover::before {
    transform: translate3d(0, -78%, 0) rotate(3deg) scaleX(1.04);
  }
}

:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
):is(:focus-visible, :active)::before,
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
).is-liquid-touched::before {
  transform: translate3d(0, -78%, 0) rotate(3deg) scaleX(1.04);
}

:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .review-head a,
  .chat-quick button,
  .chat-form button
):focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.button > span,
.review-head a > span,
.text-link > span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
  .button:hover > span,
  .review-head a:hover > span,
  .text-link:hover > span {
    transform: translateX(4px);
  }
}

.button.is-liquid-touched > span,
.review-head a.is-liquid-touched > span,
.text-link.is-liquid-touched > span {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .button,
    .topbar .nav-cta,
    .text-link,
    .review-head a,
    .chat-quick button,
    .chat-form button
  )::before,
  .button > span,
  .review-head a > span,
  .text-link > span {
    transition: none;
  }
}