/* welcome-motion.css: right-panel motion for the sign-up card (lane ONB, 2026-10-30). Clean and short: 150–350 ms, ease-out.
   Patterns from Blake's AffectUI library (/Volumes/T7/export/AffectUI Library (Oct 25)/), restyled to SubHub tokens:
   motion/blur-crossfade (height morph + soft blur swap), components/stepper-form-clean (bar fill, pane enter, radio dot, check draw),
   components/progress-tracker-clean (check pop), components/button-clean (press scale, loading sweep), motion/shimmer-loader (skeleton). */
:root { --wm-ease: cubic-bezier(.22, 1, .36, 1); }

/* step bars: the orange fill grows into each bar (stepper-form-clean .ui-sfc__bar) */
.wl-steps li { transition: color .25s ease; }
.wl-steps li::after { transition: transform .36s var(--wm-ease); }
.wl-steps li.is-on::after { transition-delay: .08s; }

/* card: height morph between steps (blur-crossfade); the old content leaves on top, the new one rises in, staggered */
html.wm-on .wl-card { animation: none; position: relative; }
.wl-card.wm-morph { overflow: hidden; }
.wm-leave { position: absolute; left: 0; right: 0; top: 0; padding: inherit; pointer-events: none; }
.wm-in { animation: wm-rise .32s var(--wm-ease) both; animation-delay: calc(var(--wm-i, 0) * 35ms + 60ms); }
@keyframes wm-rise { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* inputs: calm focus, the label lifts to full ink */
.wl-card label { transition: color .18s ease; }
.wl-card label:focus-within { color: var(--ink); }
input:not([type=radio]):not([type=file]) { transition: border-color .18s ease, box-shadow .24s var(--wm-ease), background-color .18s ease; }
input:not([type=radio]):not([type=file]):hover:not(:focus) { border-color: rgba(255, 255, 255, .22); }
input:not([type=radio]):not([type=file]):focus-visible { background-color: #0e0f14; }

/* role: a pill glides to the chosen option, the dot scales in (stepper-form-clean .ui-sfc__radio, segmented-control) */
.wl-seg { position: relative; }
.wl-seg label { position: relative; z-index: 1; transition: border-color .2s ease, background-color .2s ease; }
.wl-seg input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; border: 1.5px solid #5d616c; display: grid; place-items: center; transition: border-color .2s ease; cursor: pointer; }
.wl-seg input[type=radio]::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .24s var(--wm-ease); }
.wl-seg input[type=radio]:checked { border-color: var(--accent); }
.wl-seg input[type=radio]:checked::after { transform: scale(1); }
.wl-seg input[type=radio]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-seg label:hover:not(:has(input:checked)) { border-color: rgba(255, 255, 255, .22); }
.wm-pill { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border: 1px solid var(--accent); border-radius: 10px; background: rgba(255, 90, 31, .08); pointer-events: none;
  transition: transform .28s var(--wm-ease), height .28s var(--wm-ease); animation: wm-fade .3s ease .28s both; }
.wl-seg.has-pill label:has(input:checked) { border-color: transparent; background: transparent; }
@keyframes wm-fade { from { opacity: 0; } }

/* password meter: five segments that fill as it gets stronger */
.wl-meter { height: 4px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
.wl-meter i { transition: width .32s var(--wm-ease), background-color .25s ease; }

/* buttons: a small press, and a busy state drawn as a shape (button-clean loading sweep), never text */
.wl-btn { transition: background-color .15s ease, transform .14s var(--wm-ease), border-color .15s ease; }
.wl-btn:active:not(:disabled) { transform: scale(.98); }
.wl-btn.is-busy, .wl-btn.is-busy:disabled { opacity: 1; cursor: progress; color: transparent; position: relative; overflow: hidden;
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%); background-size: 250% 100%; animation: wm-sweep 1.3s linear infinite; }
.wl-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 4px; margin: -2px 0 0 -22px; border: 0; border-radius: 4px; background: rgba(26, 7, 0, .22); animation: none; }
.wl-btn.is-busy::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 16px; height: 4px; margin: -2px 0 0 -22px; border-radius: 4px; background: var(--accent-ink); animation: wm-indet 1s var(--wm-ease) infinite alternate; }
.wl-btn-ghost.is-busy::after { background: rgba(255, 255, 255, .12); }
.wl-btn-ghost.is-busy::before { background: var(--ink); }
@keyframes wm-sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes wm-indet { from { transform: translateX(0); } to { transform: translateX(28px); } }

/* "Check your inbox": the tile settles and the envelope draws itself (progress-tracker-clean check pop + stepper-form-clean draw) */
.wl-icon { animation: wm-pop .42s var(--wm-ease) both; }
.wl-icon path { stroke-dasharray: 1; animation: wm-draw .62s var(--wm-ease) .16s both; }
.wl-icon path + path { animation-delay: .4s; }
@keyframes wm-pop { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes wm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* workspace build list: rows rise in, each finished step pops and its check wipes in */
.wl-build li { animation: wm-rise .32s var(--wm-ease) both; }
.wl-build li:nth-child(2) { animation-delay: 50ms; } .wl-build li:nth-child(3) { animation-delay: 100ms; }
.wl-build li:nth-child(4) { animation-delay: 150ms; } .wl-build li:nth-child(5) { animation-delay: 200ms; }
.wl-build li.is-ok::before { animation: wm-pop .42s var(--wm-ease); }
.wl-build li.is-ok::after { animation: wm-wipe .34s var(--wm-ease) .12s both; }
@keyframes wm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* errors arrive calmly (otp-input-clean: no harsh shake) */
.wl-err:not([hidden]) { animation: wm-rise .24s var(--wm-ease) both; }

/* lists that arrive after the card: files, projects */
.wl-file, .wl-project { animation: wm-rise .3s var(--wm-ease) both; }
.wl-projects li:nth-child(2) { animation-delay: 50ms; } .wl-projects li:nth-child(3) { animation-delay: 100ms; } .wl-projects li:nth-child(n+4) { animation-delay: 150ms; }
.wl-bar i { transition: width .3s var(--wm-ease), background-color .2s ease; }

/* skeleton while the first card loads (shimmer-loader) */
.wl-loading i { animation: wm-shimmer 1.4s linear infinite; }
@keyframes wm-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

@media (prefers-reduced-motion: reduce) {
  .wm-leave { display: none; }
  .wl-icon path { stroke-dasharray: none; }
  .wm-pill { transition: none; }
}