/* ==========================================================================
   Origin Button — cursor-origin ink fill
   Vanilla CSS/JS port of the React "OriginButton" (motion/react) component.
   The fill is a circle that grows from the exact point the cursor enters /
   presses, inverting the label colour — applied to every .theme-btn / .submit-btn.
   Driver: assets/js/origin-button.js  (sets --ic-ox / --ic-oy / --ic-cover)
   ========================================================================== */

:root {
  --ic-fill: #111111;        /* ink that floods the button            */
  --ic-fill-text: #ffffff;   /* label colour once the fill is active  */
  --ic-fill-duration: 0.5s;
  --ic-fill-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Establish a private stacking context so the ::before fill can sit ABOVE the
   button's own background but BELOW its text and icon (no DOM wrapping needed). */
.theme-btn.origin-btn,
.submit-btn.origin-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
}

.theme-btn.origin-btn::before,
.submit-btn.origin-btn::before {
  content: "";
  position: absolute;
  z-index: -1;                       /* above bg, below label + .icon */
  left: var(--ic-ox, 50%);
  top: var(--ic-oy, 50%);
  width: var(--ic-cover, 0px);
  height: var(--ic-cover, 0px);
  border-radius: 50%;
  background: var(--ic-fill);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--ic-fill-duration) var(--ic-fill-ease);
}

/* Active = hovered, pressed, or keyboard-focused (toggled from JS). */
.theme-btn.origin-btn[data-origin-active="true"]::before,
.submit-btn.origin-btn[data-origin-active="true"]::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Invert the label while the fill covers the button.
   Triple selector keeps specificity above the theme's existing :hover rules. */
.theme-btn.origin-btn[data-origin-active="true"],
.submit-btn.origin-btn[data-origin-active="true"] {
  color: var(--ic-fill-text);
  transition: color 0.3s var(--ic-fill-ease);
}

/* Subtle press feedback — mirrors the component's whileTap={{ scale: 0.985 }}. */
.theme-btn.origin-btn:active:not([aria-disabled="true"]),
.submit-btn.origin-btn:active:not([aria-disabled="true"]) {
  transform: scale(0.985);
}

/* Keyboard focus ring (component uses focus-visible:ring). */
.theme-btn.origin-btn:focus-visible,
.submit-btn.origin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ic-fill), 0 0 0 4px rgba(17, 17, 17, 0.16);
}

/* Don't animate disabled controls. */
.theme-btn.origin-btn[aria-disabled="true"]::before,
.theme-btn.origin-btn:disabled::before,
.submit-btn.origin-btn[aria-disabled="true"]::before,
.submit-btn.origin-btn:disabled::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-btn.origin-btn::before,
  .submit-btn.origin-btn::before {
    transition: none;
  }
  .theme-btn.origin-btn:active,
  .submit-btn.origin-btn:active {
    transform: none;
  }
}

/* ==========================================================================
   About page — give the bespoke .nkab-btn pills the SAME cursor-origin ink
   fill as the index .theme-btn buttons (driven by the same origin-button.js).
   ========================================================================== */
.nkab-btn.origin-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
}
.nkab-btn.origin-btn::before {
  content: "";
  position: absolute;
  z-index: -1;                       /* above the button bg, below its label */
  left: var(--ic-ox, 50%);
  top: var(--ic-oy, 50%);
  width: var(--ic-cover, 0px);
  height: var(--ic-cover, 0px);
  border-radius: 50%;
  background: var(--ic-fill);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--ic-fill-duration) var(--ic-fill-ease);
}
.nkab-btn.origin-btn[data-origin-active="true"]::before {
  transform: translate(-50%, -50%) scale(1);
}
.nkab-btn.origin-btn[data-origin-active="true"] {
  color: var(--ic-fill-text);
  transition: color 0.3s var(--ic-fill-ease);
}
.nkab-btn.origin-btn:active {
  transform: scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
  .nkab-btn.origin-btn::before { transition: none; }
  .nkab-btn.origin-btn:active { transform: none; }
}