/* =============================================================================
   Buttons / CTAs — shared invert sweep
   Fine pointer: fill sweeps in/out. Touch: simple color invert, no sweep.
   ============================================================================= */

.btn,
.emergence__cta,
.possibility__cta,
.work-world__cta,
.story-hero__cta,
.story-close__cta,
.story-explore__enter {
  --sweep-fill: var(--color-fg);
  --sweep-ink: var(--color-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  font-size: var(--text-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-fg);
  background: transparent;
  color: var(--color-fg);
  padding: 0.95rem 1.4rem;
  transition:
    color 0.45s var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    letter-spacing var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.btn::before,
.emergence__cta::before,
.possibility__cta::before,
.work-world__cta::before,
.story-hero__cta::before,
.story-close__cta::before,
.story-explore__enter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sweep-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-reveal);
  pointer-events: none;
}

/* Solid rest = fill already in (sweeps out on hover) */
.btn--solid,
.emergence__cta,
.possibility__cta {
  color: var(--sweep-ink);
}

.btn--solid::before,
.emergence__cta::before,
.possibility__cta::before {
  transform: scaleX(1);
}

.btn--ghost {
  color: var(--color-quiet-strong);
  border-color: var(--color-hairline-strong);
}

.btn--text {
  border-color: transparent;
  border-bottom-color: var(--color-hairline);
  border-radius: 0;
  color: var(--color-quiet);
  padding: 0.55rem 0.85rem;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:focus-visible,
.emergence__cta:focus-visible,
.possibility__cta:focus-visible,
.work-world__cta:focus-visible,
.story-hero__cta:focus-visible,
.story-close__cta:focus-visible,
.story-explore__enter:focus-visible {
  outline-offset: 4px;
}

/* Fine pointer: sweep */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled),
  .emergence__cta:hover,
  .possibility__cta:hover,
  .work-world__cta:hover,
  .story-hero__cta:hover,
  .story-close__cta:hover,
  .story-explore__enter:hover {
    color: var(--sweep-ink);
    border-color: var(--color-fg);
    letter-spacing: 0.18em;
  }

  .btn:hover:not(:disabled)::before,
  .emergence__cta:hover::before,
  .possibility__cta:hover::before,
  .work-world__cta:hover::before,
  .story-hero__cta:hover::before,
  .story-close__cta:hover::before,
  .story-explore__enter:hover::before {
    transform: scaleX(1);
  }

  /* Solid: sweep out → outline */
  .btn--solid:hover:not(:disabled),
  .emergence__cta:hover,
  .possibility__cta:hover {
    color: var(--color-fg);
  }

  .btn--solid:hover:not(:disabled)::before,
  .emergence__cta:hover::before,
  .possibility__cta:hover::before {
    transform: scaleX(0);
  }

  .btn--ghost:hover:not(:disabled) {
    color: var(--sweep-ink);
    border-color: var(--color-fg);
  }

  .btn--text:hover:not(:disabled) {
    color: var(--sweep-ink);
    border-color: var(--color-fg);
    border-bottom-color: var(--color-fg);
  }
}

/* Touch / coarse: instant invert, no sweep motion */
@media (hover: none), (pointer: coarse) {
  .btn::before,
  .emergence__cta::before,
  .possibility__cta::before,
  .work-world__cta::before,
  .story-hero__cta::before,
  .story-close__cta::before,
  .story-explore__enter::before {
    transition: none;
  }

  .btn:active:not(:disabled),
  .emergence__cta:active,
  .possibility__cta:active,
  .work-world__cta:active,
  .story-hero__cta:active,
  .story-close__cta:active,
  .story-explore__enter:active {
    color: var(--sweep-ink);
    border-color: var(--color-fg);
    background: var(--sweep-fill);
  }

  .btn--solid:active:not(:disabled),
  .emergence__cta:active,
  .possibility__cta:active {
    color: var(--color-fg);
    background: transparent;
  }

  .btn--solid:active:not(:disabled)::before,
  .emergence__cta:active::before,
  .possibility__cta:active::before {
    transform: scaleX(0);
  }
}