/* motion.css — the reactive layer. Loaded last on every surface (page, packet, proposal).
   Grammar borrowed from the light-glass B2B leaders (Stripe-class): one accent, glass
   surfaces with an inner highlight, spring easing, everything answers the cursor and the
   thumb. Tokens first, then ~12 components. Reduced motion respected throughout.
   No pills as decoration, no dots, no partial underlines: hierarchy still comes from type. */

:root{
  --ease-spring: cubic-bezier(.2,.9,.25,1.15);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms; --t-med: 260ms; --t-slow: 520ms;
  --glass-bg: color-mix(in oklab, var(--card, #fff) 72%, transparent);
  --glass-hi: inset 0 1px 0 color-mix(in oklab, #fff 70%, transparent);
  --glass-line: 1px solid color-mix(in oklab, var(--foreground, #111) 10%, transparent);
  --lift: 0 10px 30px -14px color-mix(in oklab, var(--foreground, #111) 40%, transparent);
  --lift-lg: 0 24px 60px -24px color-mix(in oklab, var(--foreground, #111) 45%, transparent);
  --focus: 0 0 0 3px color-mix(in oklab, var(--wood, #b5651d) 35%, transparent);
}

/* ── buttons: glass on press, magnetic on hover ─────────────────────────── */
.btn{ position:relative; isolation:isolate; overflow:hidden; transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); box-shadow: var(--glass-hi), 0 1px 2px color-mix(in oklab, var(--foreground,#111) 12%, transparent); will-change:transform; }
.btn::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in oklab,#fff 22%,transparent), transparent 55%); opacity:.9; pointer-events:none; }
.btn:hover{ transform:translateY(-1px); box-shadow: var(--glass-hi), var(--lift); }
.btn:active{ transform:translateY(0) scale(.985); box-shadow: var(--glass-hi), 0 1px 2px color-mix(in oklab, var(--foreground,#111) 12%, transparent); }
/* Focus is carried by `outline`, never box-shadow: the shadow ring loses to
   every later box-shadow rule, and on the charcoal sticky bar --focus composites
   to 1.48:1. This is the same defect design.css had. */
.btn:focus-visible{ outline:2px solid var(--copper, #8a5a3c); outline-offset:3px; box-shadow: var(--lift); }
.sticky-cta .btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.btn svg{ transition:transform var(--t-med) var(--ease-spring); }
.btn:hover svg{ transform:translateX(3px); }

/* ── segmented controls, chips, swatches: morph on select ───────────────── */
.cfg-seg button, .chip, .lot-btns button, .voice-btn{ transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.cfg-seg button:hover, .chip:not(.chip-blocked):hover, .lot-btns button:hover{ transform:translateY(-1px); box-shadow: var(--lift); }
.cfg-seg button:active, .chip:active{ transform:scale(.97); }
.chip[aria-pressed="true"]{ box-shadow: var(--glass-hi), 0 6px 18px -10px color-mix(in oklab, var(--primary,#111) 60%, transparent); }
.cfg-sw .sw{ transition: transform var(--t-fast) var(--ease-spring), outline-offset var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.cfg-sw .sw:hover{ transform:scale(1.08); box-shadow: var(--lift); }
.cfg-sw .sw[aria-pressed="true"]{ transform:scale(1.06); }

/* ── cards lift, panels breathe ─────────────────────────────────────────── */
.card, .plan-card, .mk-card, .mk-plan, .pk-share, .use-card, .range-card, .form-card{ transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); }
.card:hover, .plan-card:hover, .mk-card:hover, .mk-plan:hover{ transform:translateY(-3px); box-shadow: var(--lift-lg); border-color: color-mix(in oklab, var(--wood,#b5651d) 40%, var(--border,#ddd)); }
.plan-card img{ transition: transform var(--t-slow) var(--ease-out); }
.plan-card:hover img{ transform:scale(1.03); }

/* ── glass surfaces: sticky bar, voice dock, lot tools ───────────────────── */
.sticky-cta{ backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--charcoal, #1f1d1a) 86%, transparent); border-top: 1px solid color-mix(in oklab, #fff 12%, transparent); box-shadow: 0 -10px 30px -20px rgba(0,0,0,.5); }
.voice-launch, .voice-panel, .lot-tools .lot-btns{ backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.voice-launch{ background: var(--glass-bg); border: var(--glass-line); box-shadow: var(--glass-hi), var(--lift); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.voice-launch:hover{ transform:translateY(-1px); box-shadow: var(--glass-hi), var(--lift-lg); }

/* ── the step rail: the current step slides, done steps fill ─────────────── */
.steps li{ transition: color var(--t-med) var(--ease-out), font-weight var(--t-fast); }
.step-num{ transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring); }
.steps li.is-current .step-num{ transform:scale(1.15); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary,#111) 12%, transparent); }
.step-block{ transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.step-locked{ transform:translateY(6px); }

/* ── reveal on scroll (opt-in via data-reveal; JS adds .in) ─────────────── */
[data-reveal]{ opacity:0; transform:translateY(14px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }

/* ── verdict + range figure: settle in ──────────────────────────────────── */
.use-verdict, .range-figure{ animation: settle var(--t-slow) var(--ease-out) both; }
@keyframes settle{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ── inputs ─────────────────────────────────────────────────────────────── */
.range-form input, .lot-form input{ transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.range-form input:focus, .lot-form input:focus{ outline:none; box-shadow: var(--focus); border-color: var(--wood,#b5651d); }

/* ── proposal + decks ───────────────────────────────────────────────────── */
.mk-plan.is-on{ box-shadow: var(--glass-hi), var(--lift-lg); border-color: var(--wood,#b5651d); transform:translateY(-4px); }
.mk-cta{ transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out); box-shadow: var(--glass-hi), 0 1px 2px rgba(0,0,0,.12); }
.mk-cta:hover{ transform:translateY(-1px); box-shadow: var(--glass-hi), var(--lift); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}