/* Buttons: the pill (RELAUNCH.md section 13, the signed-off sketch). One
   primary navy pill that lifts with an orange bloom on hover, a loud
   orange variant for the closing asks, a ghost pill that fills with ink
   from the left. Class names unchanged so every surface inherits. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 1.6em;
  min-height: 3.375rem;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), color 200ms, background-color 200ms;
}

.btn:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

.btn .arr,
.btn .btn-arrow {
  flex: 0 0 auto;
  transition: transform 320ms var(--ease-out);
}

.btn:hover .arr,
.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--deep);
  color: var(--paper-card);
  box-shadow: 0 14px 30px -16px rgba(20, 32, 42, 0.6);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 110% at 50% 130%, rgba(255, 215, 194, 0.42), transparent 62%);
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}

.btn-primary:hover {
  color: var(--paper-card);
  background-image: radial-gradient(circle at 50% 38%, #26394b, var(--deep) 78%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover::after {
  opacity: 1;
}

.btn-loud {
  background: var(--accent);
  color: var(--paper-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(15, 20, 23, 0.2);
}

.btn-loud:hover {
  color: var(--paper-card);
  background-image: linear-gradient(180deg, var(--accent-hover), var(--accent));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(163, 54, 8, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 460ms var(--ease-out);
}

.btn-ghost:hover {
  color: var(--paper-card);
  box-shadow: 0 18px 34px -16px rgba(20, 32, 42, 0.55);
}

.btn-ghost:hover::before {
  transform: scaleX(1);
}

.btn-ghost.btn-inverse {
  color: var(--paper-card);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-ghost.btn-inverse::before {
  background: var(--paper-card);
}

.btn-ghost.btn-inverse:hover {
  color: var(--deep);
}

.btn-secondary {
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-secondary:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn-sm {
  font-size: var(--text-sm);
  min-height: 2.875rem;
  padding: 0 1.25em;
}

.btn-lg {
  font-size: var(--text-lg);
  min-height: 3.75rem;
  padding: 0 1.8em;
}

/* Disabled buttons must look disabled (owner bug report 2026-07-18: the
   inert "Pick a style" submit looked clickable). */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* [hidden] must beat the display rule above (same lesson as the style
   modal's filtered cards). */
.btn[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after,
  .btn .arr,
  .btn .btn-arrow {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* The light that grows out from under the pointer inside a loud pill
   (spark_controller sets --bx and --by; without it the light rises
   from the middle), and the halo outside a pill wrapped in .rl-halo:
   a blurred disc that swells on hover (the owner's reference of
   2026-09-15, in our colours). */
.btn-loud::after {
  content: "";
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 215, 194, 0.7), rgba(255, 215, 194, 0.18) 45%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 500ms ease;
}

.btn-loud:hover::after { transform: scale(26); opacity: 1; }
/* The press (spark_controller): the light and the halo fire on a tap, fast
   enough to show before the page moves on. */
.btn-loud.is-pressed::after { transform: scale(26); opacity: 1; transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease; }

.rl-halo { position: relative; display: inline-block; }

.rl-halo::before {
  content: "";
  position: absolute;
  inset: -34px -30px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(226, 90, 31, 0.45), rgba(226, 90, 31, 0.15) 55%, transparent 100%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 600ms ease, transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rl-halo:hover::before { opacity: 1; transform: scale(1.1); }
.rl-halo:has(> .is-pressed)::before { opacity: 1; transform: scale(1.1); transition: opacity 250ms ease, transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rl-halo > .btn { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-loud::after, .rl-halo::before { transition: none; }
}