/* ═══════════════════════════════════════════════════════════
   unwind-button.css
   Warm border-light enhancement for .btn elements.
   Layers cleanly on top of style.css — no rules removed.
════════════════════════════════════════════════════════════ */

/*
  Technique: the ::before pseudo-element carries a radial gradient
  that follows the cursor (via --ub-x / --ub-y set by JS).
  CSS mask-composite clips the gradient to the border zone only,
  so the interior of the button is never affected.
  The ::after pseudo-element carries a very faint ambient glow on the
  border at rest — gives the button a tactile, paper-like quality.
*/

/* ── Base: position context + isolation ─────────────────── */
.btn {
  position: relative;
  isolation: isolate;
  /* Override style.css transition — include border-light opacity */
  transition:
    background-color  200ms var(--ease-soft),
    border-color      200ms var(--ease-soft),
    box-shadow        300ms var(--ease-soft),
    transform         220ms var(--ease-soft),
    opacity           200ms var(--ease-soft);
}

/* ── Ambient border at rest ──────────────────────────────── */
/*
  ::after provides the always-visible matte border.
  The actual border: 1px solid border-color in style.css stays,
  but ::after adds a very faint warm presence around the edge.
*/
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(240, 232, 224, 0.18) 0%,
    rgba(176, 88, 48, 0.06)   60%,
    transparent               100%
  );
  /* Clip to border zone only */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ── Cursor-following border light ───────────────────────── */
/*
  ::before overlays a radial gradient centred at --ub-x / --ub-y.
  It is invisible by default and fades in on hover.
  JS sets --ub-x and --ub-y as percentages from pointermove.
*/
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    circle 90px at var(--ub-x, 50%) var(--ub-y, 50%),
    /* warm off-white highlight at cursor — "sunlight on paper" */
    rgba(240, 232, 224, 0.55) 0%,
    /* terracotta glow in mid range */
    rgba(176, 88, 48, 0.28)   45%,
    /* fade to nothing at edges */
    transparent               80%
  );
  /* Clip to border zone only — same mask technique as ::after */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  /* Gentle fade in on hover, slightly slower fade out */
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 1;
}

/* Reveal light on hover */
.btn-primary:not(:disabled):hover::before,
.btn-primary:not(:disabled):focus-visible::before {
  opacity: 1;
}

/* ── Hover: lift 2px, restrained shadow ──────────────────── */
/* Overrides style.css translateY(-1px) → -2px */
.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(176, 88, 48, 0.12),
    0 1px  4px rgba(176, 88, 48, 0.08);
}

/* ── Active: natural press compression ───────────────────── */
.btn-primary:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Hide border light immediately on press */
.btn-primary:not(:disabled):active::before {
  opacity: 0;
  transition: opacity 80ms ease;
}

/* ── Focus ring ──────────────────────────────────────────── */
.btn:focus-visible {
  outline: 2px solid rgba(176, 88, 48, 0.45);
  outline-offset: 4px;
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-primary::after {
    display: none;
  }

  .btn-primary:not(:disabled):hover,
  .btn-primary:not(:disabled):focus-visible {
    transform: none;
    box-shadow: 0 0 0 2px rgba(176, 88, 48, 0.35);
  }

  .btn-primary:not(:disabled):active {
    transform: none;
  }
}