/* A curved fill and a travelling arrow share one motion language.
   Surface pairs keep the same text colour throughout the wipe. */
.button,
.gamer-toggle,
.round-arrow,
.back-top,
.icon-button:not(.menu-close) {
  --button-surface: var(--paper);
  --button-ink: var(--ink);
  --button-fill: #efd0c7;
  --button-edge: #141c2355;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, box-shadow .3s, scale .2s;
}
.button,.gamer-toggle,.back-top { position: relative; }
:where(.icon-button:not(.menu-close)) { position: relative; }

.button::before,
.gamer-toggle::before,
.round-arrow::before,
.back-top::before,
.icon-button:not(.menu-close)::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -15%;
  background: var(--button-fill);
  border-radius: 50% 50% 0 0;
  transform: translate3d(0, 105%, 0);
  transition: transform .62s cubic-bezier(.22,1,.36,1), border-radius .62s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

.button-dark,
.button-red,
.plan-black .plan-button,
.input-row .icon-button,
.back-top,
.plan-dialog .dialog-close,
.mode-gamer .round-arrow,
.gamer-toggle[aria-pressed='true'] {
  --button-surface: var(--ink);
  --button-ink: #fff;
  --button-fill: #b7151c;
  --button-edge: #ffffff77;
}
.button-red,.plan-black .plan-button {
  --button-surface: #c9141a;
  --button-fill: #141c23;
}
.button-light,
.site-header.on-dark .button-dark,
.site-header.scrolled .button-dark {
  --button-surface: var(--paper);
  --button-ink: var(--ink);
  --button-fill: #efd0c7;
  --button-edge: #141c2355;
}
.plan-button { --button-surface: transparent; }
.mode-home .round-arrow { --button-surface: #f8f5ef; }

/* These rules also neutralize older translate-on-hover and colour swaps. */
.button,
.button:hover,
.plan-black .plan-button,
.plan-black .plan-button:hover,
.site-header.on-dark .button-dark,
.site-header.scrolled .button-dark,
.gamer-toggle,
.gamer-toggle[aria-pressed='true'],
.round-arrow,
.back-top,
.icon-button:not(.menu-close) {
  background: var(--button-surface);
  color: var(--button-ink);
  border-color: var(--button-edge);
  transform: none;
}
.button > span:last-child,
.plan-button > span,
.plan-button:hover > span,
.plan-button:focus-visible > span,
.gamer-toggle > span:last-child {
  display: inline-block;
  flex-shrink: 0;
  transform: none;
  transition: none;
}
.gamer-toggle .toggle-dot { transition: background .25s, box-shadow .35s; }
.gamer-toggle[aria-pressed='true'] .toggle-dot { background: #ff8d8d; box-shadow: 0 0 0 4px #ff8d8d22; }

@keyframes blackfi-arrow-pass {
  0% { transform: translate(0,0); opacity: 1; }
  42% { transform: translate(15px,-15px); opacity: 0; }
  43% { transform: translate(-15px,15px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 1; }
}

.button:focus-visible::before,
.gamer-toggle:focus-visible::before,
.round-arrow:focus-visible::before,
.back-top:focus-visible::before,
.icon-button:not(.menu-close):focus-visible::before {
  transform: translate3d(0,0,0);
  border-radius: 0;
}
.button:focus-visible > span:last-child,
.gamer-toggle:focus-visible > span:last-child { animation: blackfi-arrow-pass .56s cubic-bezier(.22,1,.36,1) both; }

@media (hover:hover) and (pointer:fine) {
  .button:hover::before,
  .gamer-toggle:hover::before,
  .round-arrow:hover::before,
  .back-top:hover::before,
  .icon-button:not(.menu-close):hover::before {
    transform: translate3d(0,0,0);
    border-radius: 0;
  }
  .button:hover > span:last-child,
  .gamer-toggle:hover > span:last-child { animation: blackfi-arrow-pass .56s cubic-bezier(.22,1,.36,1) both; }
  .button:hover,.gamer-toggle:hover { box-shadow: 0 5px 16px #141c2314; }
  .round-arrow:hover,.back-top:hover,.icon-button:not(.menu-close):hover { box-shadow: 0 0 0 5px #c9141a18; }
}

.button:active,.gamer-toggle:active,.round-arrow:active,.back-top:active,.icon-button:not(.menu-close):active {
  scale: .97;
  transition-duration: .12s;
}
/* Tapping receives a stable colour response without a delayed hover state. */
@media (hover:none), (pointer:coarse) {
  .button:active::before,.gamer-toggle:active::before,.round-arrow:active::before,.back-top:active::before,.icon-button:not(.menu-close):active::before {
    transform: none;
    border-radius: 0;
    transition: none;
  }
}
.reduce-motion .button,
.reduce-motion .gamer-toggle,
.reduce-motion .round-arrow,
.reduce-motion .back-top,
.reduce-motion .icon-button:not(.menu-close) { scale: 1; }
@media (prefers-reduced-motion:reduce) {
  .button,.gamer-toggle,.round-arrow,.back-top,.icon-button:not(.menu-close),
  .button::before,.gamer-toggle::before,.round-arrow::before,.back-top::before,.icon-button:not(.menu-close)::before { transition: none; scale: 1; }
  .button > span:last-child,.gamer-toggle > span:last-child { animation: none !important; }
}