/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL PRESS
   The button library. Every press the site will ever need, on four colours.
   One base (.wr-btn) + composable size / shape / motion modifiers.
   Sora · #0D0A07 #FFD800 #F04923 #F2F2F2 · gradient yellow→orange, never reversed.
   Built on Signal Core tokens in global.css.
   ============================================================================ */

/* Angle drivers for the conic edge effects (spin / spark). */
@property --wr-btn-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --wr-btn-arc  { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ----------------------------------------------------------------------------
   BASE — .wr-btn
   Inline-flex pill, Sora 600, broadcast-uppercase voice. Everything else is a
   modifier on top of this. --wr-btn-surface = the colour of the surface the
   button sits on (set by the host); used by hollow / edge variants.
   -------------------------------------------------------------------------- */
.wr-btn {
  --wr-btn-surface: var(--wr-white);
  --wr-btn-r: var(--wr-radius-pill);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: none;
  border-radius: var(--wr-btn-r);
  font-family: var(--wr-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wr-black);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.32s var(--wr-ease-spring),
              box-shadow 0.32s var(--wr-ease-out),
              color 0.3s var(--wr-ease-out),
              background-color 0.3s var(--wr-ease-out),
              border-color 0.3s var(--wr-ease-out);
}
.wr-btn__label { position: relative; z-index: 2; display: inline-block; }
.wr-btn__arrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  transition: transform 0.32s var(--wr-ease-spring);
}
.wr-btn__arrow svg { width: 17px; height: 17px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .wr-btn:hover .wr-btn__arrow { transform: translateX(4px); }
}
.wr-btn:focus-visible {
  outline: 2px solid var(--wr-orange);
  outline-offset: 3px;
}
.wr-btn:active { transform: translateY(1px) scale(0.985); }
.wr-btn[disabled], .wr-btn[aria-disabled="true"] {
  opacity: 0.38; pointer-events: none; filter: grayscale(0.4);
}

/* ── Sizes ── */
.wr-btn--sm  { padding: 9px 16px;  font-size: 11.5px; gap: 7px; }
.wr-btn--sm .wr-btn__arrow svg { width: 13px; height: 13px; }
.wr-btn--lg  { padding: 22px 44px; font-size: 17px; gap: 14px; letter-spacing: 0.06em; }
.wr-btn--lg .wr-btn__arrow svg { width: 22px; height: 22px; }
.wr-btn--block { display: flex; width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   01–03 · SOLID FILLS
   ════════════════════════════════════════════════════════════════════════ */

/* 01 · Gradient Primary — the hero CTA */
.wr-btn--gradient {
  color: var(--wr-black);
  background: var(--wr-grad-diag);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 30px #F0492359; }
}

/* 02 · Ink — solid black */
.wr-btn--ink {
  color: var(--wr-white);
  background: var(--wr-black);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--ink:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--wr-black-40); }
}

/* 03 · Beam — solid yellow */
.wr-btn--beam {
  color: var(--wr-black);
  background: var(--wr-yellow);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--beam:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #FFD80066; }
}

/* ════════════════════════════════════════════════════════════════════════
   04–07 · OUTLINE & TEXT
   ════════════════════════════════════════════════════════════════════════ */

/* 04 · Ghost — hollow on light */
.wr-btn--ghost {
  color: var(--wr-black);
  border: 1.5px solid var(--wr-black-15);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--ghost:hover { border-color: var(--wr-black); transform: translateY(-2px); }
}

/* 05 · Edge — gradient border + gradient text, hollow centre */
.wr-btn--edge {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--wr-btn-surface), var(--wr-btn-surface)) padding-box,
    var(--wr-grad-diag) border-box;
}
.wr-btn--edge .wr-btn__label,
.wr-btn--edge .wr-btn__arrow {
  background: var(--wr-grad-diag);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wr-btn--edge .wr-btn__arrow svg { stroke: var(--wr-orange); }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--edge:hover { transform: translateY(-2px); box-shadow: 0 10px 26px #F0492333; }
}

/* 06 · Link — text + arrow, no box */
.wr-btn--link {
  padding: 6px 2px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--wr-black);
  border-radius: 4px;
}
.wr-btn--link .wr-btn__arrow svg { stroke: var(--wr-orange); }

/* 07 · Underline — grows a gradient rule on hover */
.wr-btn--underline {
  padding: 6px 2px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--wr-black);
  border-radius: 0;
  gap: 6px;
}
.wr-btn--underline .wr-btn__label::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--wr-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--wr-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--underline:hover .wr-btn__label::after { transform: scaleX(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   08–10 · SHAPE & SIZE  (sizes reuse .wr-btn--sm / --lg / --block)
   ════════════════════════════════════════════════════════════════════════ */

/* 08 · Icon — solid round icon key */
.wr-btn--icon {
  --wr-btn-r: 50%;
  width: 56px; height: 56px; padding: 0; gap: 0;
  color: var(--wr-white);
  background: var(--wr-black);
}
.wr-btn--icon .wr-btn__arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--icon:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px var(--wr-black-40); }
  .wr-btn--icon:hover .wr-btn__arrow { transform: none; }
}

/* 09 · Icon Ghost — round, hollow icon key (fills on hover) */
.wr-btn--icon-ghost {
  --wr-btn-r: 50%;
  width: 56px; height: 56px; padding: 0; gap: 0;
  color: var(--wr-black);
  border: 1.5px solid var(--wr-black-15);
  background: transparent;
}
.wr-btn--icon-ghost .wr-btn__arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--icon-ghost:hover { border-color: var(--wr-black); background: var(--wr-black); color: var(--wr-white); transform: translateY(-2px); }
  .wr-btn--icon-ghost:hover .wr-btn__arrow { transform: none; }
}

/* 10 · FAB — floating action, gradient disc */
.wr-btn--fab {
  --wr-btn-r: 50%;
  width: 72px; height: 72px; padding: 0; gap: 0;
  color: var(--wr-black);
  background: var(--wr-grad-diag);
  box-shadow: 0 12px 34px #F0492359;
}
.wr-btn--fab .wr-btn__arrow svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 44px #F0492373; }
  .wr-btn--fab:hover .wr-btn__arrow { transform: rotate(90deg); }
}

/* ════════════════════════════════════════════════════════════════════════
   11–19 · SIGNAL FX — motion presses
   ════════════════════════════════════════════════════════════════════════ */

/* 11 · Sweep — solid key with a drifting shine bar (the live site CTA) */
.wr-btn--sweep {
  color: var(--wr-white);
  background: var(--wr-black);
  overflow: hidden;
}
.wr-btn--sweep::after {
  content: ''; position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(120deg, transparent 0%, var(--wr-white-16) 50%, transparent 100%);
  transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--sweep:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--wr-black-40); }
  .wr-btn--sweep:hover::after { animation: wrSweep 0.9s var(--wr-ease-out); }
}
@keyframes wrSweep { to { transform: translateX(130%); } }

/* 12 · Drift — gradient fill that breathes left↔right */
.wr-btn--drift {
  color: var(--wr-black);
  background: linear-gradient(90deg, #FFD800, #F04923, #FFD800);
  background-size: 220% 100%;
  background-position: 0% center;
  animation: wrDrift 3.4s ease-in-out infinite alternate;
}
@keyframes wrDrift { to { background-position: 100% center; } }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--drift:hover { transform: translateY(-2px); box-shadow: 0 10px 30px #F0492359; }
}

/* 13 · Wipe — gradient floods in from the left, text inverts */
.wr-btn--wipe {
  color: var(--wr-black);
  border: 1.5px solid var(--wr-black);
  overflow: hidden;
}
.wr-btn--wipe::before {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background: var(--wr-grad-diag);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--wr-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--wipe:hover { color: var(--wr-black); border-color: transparent; }
  .wr-btn--wipe:hover::before { transform: scaleX(1); }
}

/* 14 · Iris — gradient blooms smoothly from the centre */
.wr-btn--iris {
  color: var(--wr-white);
  background: var(--wr-black);
  overflow: hidden;
}
.wr-btn--iris::before {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background: var(--wr-grad-diag);
  border-radius: inherit;
  transform: scale(0); transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.12, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--iris:hover { color: var(--wr-black); }
  .wr-btn--iris:hover::before { transform: scale(2); }
}

/* 15 · Glint — light catches two opposite corners */
.wr-btn--glint {
  color: var(--wr-black);
  border: 1.5px solid var(--wr-black-15);
  background: transparent;
}
.wr-btn--glint::before, .wr-btn--glint::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border-style: solid; border-color: var(--wr-orange);
  opacity: 0; transition: opacity 0.3s var(--wr-ease-out), transform 0.4s var(--wr-ease-out);
}
.wr-btn--glint::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
  border-top-left-radius: var(--wr-btn-r);
  transform: translate(6px, 6px);
}
.wr-btn--glint::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: var(--wr-btn-r);
  transform: translate(-6px, -6px);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glint:hover::before, .wr-btn--glint:hover::after { opacity: 1; transform: translate(0,0); }
}

/* 16 · Signal Edge — a conic signal laps the border continuously */
.wr-btn--spin {
  color: var(--wr-white);
  background: var(--wr-black);
}
.wr-btn--spin::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--wr-btn-spin), transparent 0%, var(--wr-yellow) 12%, var(--wr-orange) 24%, transparent 40%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wrSpin 2.6s linear infinite;
}
@keyframes wrSpin { to { --wr-btn-spin: 360deg; } }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--spin:hover { transform: translateY(-2px); }
}

/* 17 · Magnetic — a soft glow tracks the cursor (needs JS to set --mx/--my) */
.wr-btn--magnetic {
  --mx: 50%; --my: 50%;
  color: var(--wr-white);
  background: var(--wr-black);
  overflow: hidden;
}
.wr-btn--magnetic::before {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background: radial-gradient(160px circle at var(--mx) var(--my), #F0492366, transparent 60%);
  opacity: 0; transition: opacity 0.3s var(--wr-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--magnetic:hover::before { opacity: 1; }
}

/* 18 · Launch — the arrow flies off and a fresh one flies in */
.wr-btn--launch {
  color: var(--wr-white);
  background: var(--wr-black);
  overflow: hidden;
}
.wr-btn--launch .wr-btn__arrow { overflow: hidden; width: 17px; }
.wr-btn--launch .wr-btn__arrow svg { transition: transform 0.4s var(--wr-ease-spring); }
.wr-btn--launch .wr-btn__arrow svg + svg { position: absolute; left: 0; transform: translateX(-150%); }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--launch:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--wr-black-40); }
  .wr-btn--launch:hover .wr-btn__arrow { transform: none; }
  .wr-btn--launch:hover .wr-btn__arrow svg:first-child { transform: translateX(150%); }
  .wr-btn--launch:hover .wr-btn__arrow svg + svg { transform: translateX(0); }
}

/* 19 · Swap — the label slides up, the answer slides in */
.wr-btn--swap {
  color: var(--wr-black);
  background: var(--wr-yellow);
  overflow: hidden;
}
.wr-btn--swap .wr-btn__label { display: inline-grid; overflow: hidden; }
.wr-btn--swap .wr-btn__label span {
  grid-area: 1 / 1;
  transition: transform 0.4s var(--wr-ease-spring), opacity 0.3s var(--wr-ease-out);
}
.wr-btn--swap .wr-btn__label span:last-child { transform: translateY(120%); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--swap:hover .wr-btn__label span:first-child { transform: translateY(-120%); opacity: 0; }
  .wr-btn--swap:hover .wr-btn__label span:last-child { transform: translateY(0); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   20–24 · GLASS — frosted controls for dark / image surfaces
   ════════════════════════════════════════════════════════════════════════ */

/* 20 · Glass — frosted control */
.wr-btn--glass {
  color: var(--wr-white);
  background: var(--wr-glass-08);
  border: 1px solid var(--wr-glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glass:hover { background: var(--wr-glass-16); border-color: var(--wr-white); transform: translateY(-2px); }
}

/* 21 · Glass Tint — frosted with a warm brand wash */
.wr-btn--glass-tint {
  color: var(--wr-white);
  background:
    linear-gradient(120deg, #FFD80024, #F0492320),
    var(--wr-glass-08);
  border: 1px solid var(--wr-glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glass-tint:hover { border-color: var(--wr-yellow); transform: translateY(-2px); box-shadow: 0 10px 30px #F0492333; }
}

/* 22 · Glass Edge — frosted with a gradient hairline border */
.wr-btn--glass-edge {
  color: var(--wr-white);
  border: 1.5px solid transparent;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  background:
    linear-gradient(var(--wr-glass-08), var(--wr-glass-08)) padding-box,
    var(--wr-grad-diag) border-box;
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glass-edge:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #F0492333; }
}

/* 23 · Glass Spark — frosted glass carrying the running edge spark */
.wr-btn--glass-spark {
  position: relative;
  color: var(--wr-white);
  background: var(--wr-glass-08);
  border: 1px solid var(--wr-glass-16);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.wr-btn--glass-spark::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--wr-btn-arc),
    transparent 0 56%, var(--wr-yellow) 72%, #FFF1B8 79%, var(--wr-orange) 87%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wrArc 3.4s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glass-spark:hover { transform: translateY(-2px); background: var(--wr-glass-16); }
}

/* 24 · Glass Beam — frosted with a sheen highlight + yellow glow on hover */
.wr-btn--glass-beam {
  color: var(--wr-white);
  background:
    linear-gradient(180deg, var(--wr-glass-16), transparent 60%),
    var(--wr-glass-08);
  border: 1px solid var(--wr-glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--glass-beam:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #FFD80055, 0 12px 32px #FFD80022; }
}

/* ════════════════════════════════════════════════════════════════════════
   25–27 · EDGE SPARK — the logo shimmer, lapping a button edge
   A bright brand arc runs the perimeter with a white-hot core, backed by a
   static glow halo. Derived from the well.run mark's running-light treatment.
   Works on fill, ghost and glass.
   ════════════════════════════════════════════════════════════════════════ */
.wr-btn--spark, .wr-btn--spark-ghost, .wr-btn--spark-fill {
  position: relative;
}
/* the lapping arc (masked to a hairline ring so it rides the edge) */
.wr-btn--spark::before, .wr-btn--spark-ghost::before, .wr-btn--spark-fill::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--wr-btn-arc),
    transparent 0 56%, var(--wr-yellow) 72%, #FFF1B8 79%, var(--wr-orange) 87%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wrArc 3s linear infinite;
}
/* the soft glow halo just outside (static ring — the bright arc travels on top) */
.wr-btn--spark::after, .wr-btn--spark-ghost::after, .wr-btn--spark-fill::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 22px -4px #F0492366, 0 0 11px -3px #FFD80055;
}
@keyframes wrArc { to { --wr-btn-arc: 360deg; } }
@media (hover: hover) and (pointer: fine) {
  .wr-btn--spark:hover, .wr-btn--spark-ghost:hover, .wr-btn--spark-fill:hover { transform: translateY(-2px); }
}
/* 25 · on Ink */
.wr-btn--spark { color: var(--wr-white); background: var(--wr-black); }
/* 26 · on a transparent ghost (dark surface) */
.wr-btn--spark-ghost { color: var(--wr-white); background: var(--wr-glass-08); border: 1px solid var(--wr-glass-border); }
/* 27 · on the gradient fill — white-hot lap over colour */
.wr-btn--spark-fill { color: var(--wr-black); background: var(--wr-grad-diag); }
.wr-btn--spark-fill::before {
  background: conic-gradient(from var(--wr-btn-arc),
    transparent 0 60%, #FFFFFF 75%, #FFF1B8 82%, transparent 92%);
}

/* ════════════════════════════════════════════════════════════════════════
   28–29 · SPECIAL
   ════════════════════════════════════════════════════════════════════════ */

/* 28 · REC — broadcast capture key with a live pulsing dot */
.wr-btn--rec {
  color: var(--wr-white);
  background: var(--wr-black);
  gap: 11px;
}
.wr-btn--rec .wr-btn__dot {
  position: relative; z-index: 2;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--wr-orange);
  box-shadow: 0 0 0 0 #F0492399;
  animation: wrRec 1.6s var(--wr-ease-out) infinite;
}
@keyframes wrRec {
  0%   { box-shadow: 0 0 0 0 #F0492399; }
  70%  { box-shadow: 0 0 0 9px #F0492300; }
  100% { box-shadow: 0 0 0 0 #F0492300; }
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--rec:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--wr-black-40); }
}

/* 29 · Plasma — living brand-gradient blobs drift under a dark key */
.wr-btn--plasma {
  color: var(--wr-white);
  background: var(--wr-black);
  overflow: hidden;
}
.wr-btn--plasma::before {
  content: ''; position: absolute; inset: -40%; z-index: 0;
  background:
    radial-gradient(40% 60% at 30% 40%, #FFD80088, transparent 60%),
    radial-gradient(45% 55% at 70% 60%, #F0492388, transparent 60%),
    radial-gradient(35% 50% at 50% 80%, #FF8A3A66, transparent 60%);
  filter: blur(10px); opacity: 0.55;
  animation: wrPlasma 7s ease-in-out infinite alternate;
}
@keyframes wrPlasma {
  0%   { transform: translate(-6%, -4%) rotate(0deg) scale(1.05); }
  50%  { transform: translate( 6%,  5%) rotate(8deg)  scale(1.18); }
  100% { transform: translate(-4%,  6%) rotate(-6deg) scale(1.08); }
}
@media (hover: hover) and (pointer: fine) {
  .wr-btn--plasma:hover { transform: translateY(-2px); }
  .wr-btn--plasma:hover::before { opacity: 0.85; }
}

/* ── Reduced motion: keep state legible, drop the loops ── */
@media (prefers-reduced-motion: reduce) {
  .wr-btn--drift, .wr-btn--spin::before, .wr-btn--rec .wr-btn__dot,
  .wr-btn--spark::before,
  .wr-btn--spark-ghost::before,
  .wr-btn--spark-fill::before,
  .wr-btn--glass-spark::before,
  .wr-btn--plasma::before { animation: none !important; }
  .wr-btn { transition-duration: 0.001s; }
}