/* =====================================================================
   BUTTONS — the glowing arrow effect, site-wide
   Built from the Uiverse "Novaxlo" button, in the site's own colours: a warm
   white pill with navy type and, at its right end, a small glowing tile of
   slowly turning navy-and-gold light with an arrow in it. On hover the tile
   spreads across the whole button and the label slides out to the left;
   pressing it gives a little.

   js/buttons.js finds the buttons and adds the parts (.kx-btn__label,
   .kx-btn__glow). Nothing here applies until it has, so a page without the
   script keeps its buttons exactly as they were. Loaded last in the head so
   it wins over every section's own button rules.
   ===================================================================== */
.kx-btn {
  --kx-navy: #2e4755;      /* the label only */
  /* The glow's cool colour: #B9DDE5 and a deeper and a paler shade of it. */
  --kx-sky: #B9DDE5;
  --kx-sky-2: #8FC4D0;
  --kx-sky-3: #DDF0F4;
  --kx-gold: #BD830D;
  --kx-gold-2: #E3B04B;
  --kx-ground: #FAF8F3;
  --kx-inset: 5px;
  /* The tile's width at rest, from the button's own height (set by the
     script, in px). */
  --kx-tile: calc((var(--kx-h, 44px) - 2 * var(--kx-inset)) * 1.05);
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  padding-right: calc(var(--kx-tile) + var(--kx-inset) + 12px) !important;
  padding-left: max(16px, min(1.4em, 24px)) !important;
  justify-content: flex-start !important;
  border: 0 !important;
  background: var(--kx-ground) !important;
  background-image: none !important;
  color: var(--kx-navy) !important;
  box-shadow: 0 0 .25em 0 rgba(46, 71, 85, .28) !important;
  cursor: pointer;
  transform: none;
  filter: none !important;
  transition: transform .25s ease-in-out, box-shadow .25s ease-in-out !important;
}

.kx-btn__label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: inherit;
  white-space: nowrap;
  transition: transform .5s ease-in-out, opacity .4s ease-in-out, color .4s ease-in-out;
}
/* The button's own trailing arrow gives way to the tile's. */
.kx-btn__label > svg:last-child:not(:first-child),
.kx-btn__label > [class*="__ic"]:last-child:not(:first-child),
.kx-btn__label > [class*="icon"]:last-child:not(:first-child) { display: none; }

/* ---- the glowing tile ---- */
.kx-btn__glow {
  position: absolute;
  z-index: 2;
  top: var(--kx-inset);
  bottom: var(--kx-inset);
  right: var(--kx-inset);
  width: var(--kx-tile);
  overflow: hidden;
  border-radius: min(1em, calc((var(--kx-h, 44px) - 2 * var(--kx-inset)) / 2));
  background: var(--kx-sky);
  box-shadow: 0 0 .5em 0 rgba(46, 71, 85, .3), inset .25em 0 .25em var(--kx-gold-2);
  pointer-events: none;
  transition: width .5s ease-in-out, box-shadow .5s ease-in-out;
}
/* Four soft lights turning slowly inside the tile. */
.kx-btn__b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: kx-rotar 5s linear infinite;
  transition: filter .5s ease-in-out;
}
.kx-btn__b--1 { background: var(--kx-gold);   transform: translate(-50%, -50%) scale(1.6); filter: blur(.2em); }
.kx-btn__b--2 { background: var(--kx-sky-2); transform: translate(-5%, -5%) scale(1.2);  filter: blur(.4em); }
.kx-btn__b--3 { background: var(--kx-sky-3); transform: translate(-75%, -5%) scale(1.1); filter: blur(.25em); }
.kx-btn__b--4 { background: var(--kx-gold-2); transform: translate(-95%, -55%) scale(1.3); filter: blur(.25em); }
/* The sheen across the top. */
.kx-btn__shine {
  position: absolute;
  inset: 0 0 auto;
  height: 55%;
  background: rgba(255, 255, 255, .45);
  filter: blur(.5em);
}
.kx-btn__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: max(16px, calc((var(--kx-h, 44px) - 2 * var(--kx-inset)) * .5));
  height: max(16px, calc((var(--kx-h, 44px) - 2 * var(--kx-inset)) * .5));
  color: #FFFFFF;
  /* The glow is pale now, so the white arrow carries a soft shadow to stay
     legible over it. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transform: translate(-50%, -50%);
}
@keyframes kx-rotar { to { rotate: 360deg; } }

/* ---- hover: the tile fills the button, the label slides away ---- */
.kx-btn:hover .kx-btn__label,
.kx-btn:focus-visible .kx-btn__label {
  transform: translateX(-130%);
  opacity: 0;
  color: #FFFFFF;
}
.kx-btn:hover .kx-btn__glow,
.kx-btn:focus-visible .kx-btn__glow {
  width: calc(100% - 2 * var(--kx-inset));
  box-shadow: 0 0 .5em 0 rgba(46, 71, 85, .3), inset .5em 0 .5em var(--kx-gold-2);
}
.kx-btn:hover .kx-btn__b,
.kx-btn:focus-visible .kx-btn__b { filter: blur(.75em); }

.kx-btn:active { transform: scale(.95) !important; }
.kx-btn:active .kx-btn__glow { opacity: .75; filter: brightness(.75); }
.kx-btn:focus-visible { outline: 2px solid var(--kx-gold); outline-offset: 3px; }

.kx-btn[disabled],
.kx-btn[aria-disabled="true"] { cursor: default; opacity: .55; }
.kx-btn[disabled]:hover .kx-btn__label { transform: none; opacity: 1; color: inherit; }
.kx-btn[disabled]:hover .kx-btn__glow { width: var(--kx-tile); }

/* ---- dark theme: a navy pill with warm-white type ---- */
:root[data-theme="dark"] .kx-btn {
  --kx-ground: #223a48;
  color: #FAF8F3 !important;
  box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .5) !important;
}

@media (prefers-reduced-motion: reduce) {
  .kx-btn__b { animation: none; }
  .kx-btn__label, .kx-btn__glow { transition: none; }
}