/* r-1001-onb1 — sign-up onboarding (both doors) and the new-account skin picker (bullsi.fun).
   Presentation only. Layout numbers are measured on a 390x844 frame (docs/handoff/onboarding-prototype.dc.html);
   --ob-h is the stable screen height and --ob-k = min(1, height/844), both set by signup.js. */
#pvx.ob { position: fixed; inset: 0; z-index: 999; overflow: hidden; overscroll-behavior: none; background: #000; color: var(--text, #F2F4F8); -webkit-font-smoothing: antialiased; --ob-h: 100vh; --ob-k: 1; --ob-lift: 0px; }
#pvx.ob *, #pvx.ob *::before, #pvx.ob *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The bullsi.ai home background, copied verbatim from #aishell so the two doors are one family. */
.ob-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 130% 85% at 50% 32%, #0B0C11 0%, #050507 58%, #000 100%); }
.ob-col { position: absolute; left: 50%; top: 0; width: 100%; max-width: 480px; height: 100%; transform: translateX(-50%); }
.ob-word { position: absolute; left: 0; right: 0; top: min(60px, calc(var(--ob-h) * .0711)); z-index: 4; text-align: center; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .42em; text-indent: .42em; color: rgba(242,244,248,.45); pointer-events: none; transition: opacity .5s; }
.ob-lift { position: absolute; inset: 0; transform: translateY(calc(var(--ob-lift) * -1)); transition: transform .28s cubic-bezier(.22,1,.36,1); }

/* The Probe: the only thing that moves until the skin picker. */
.ob-probe { position: absolute; left: 50%; top: calc(var(--ob-h) * .1517); width: 160px; height: 160px; margin-left: -80px; transform: scale(calc(var(--ob-k) * .7)); transform-origin: 80px 0; pointer-events: none; transition: top .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), opacity .45s; }
#pvx[data-step="boot"] .ob-probe, #pvx[data-step="welcome"] .ob-probe { top: calc(var(--ob-h) * .199); transform: scale(var(--ob-k)); }
.ob-glow { width: 160px; height: 160px; }
.ob-glow svg { width: 100%; height: 100%; display: block; }
@keyframes obBreath { 0% { transform: scale(1); filter: drop-shadow(0 6px 26px rgba(91,140,255,0)); } 42% { transform: scale(1.05); filter: drop-shadow(0 12px 44px rgba(91,140,255,.35)); } 100% { transform: scale(1); filter: drop-shadow(0 6px 26px rgba(91,140,255,0)); } }
#pvx[data-busy] .ob-glow { animation: obBreath .78s cubic-bezier(.42,0,.28,1) infinite; } /* the bullsi.ai aiBreath pulse, looping while something loads; no glow at rest */

/* Action zone: the first control of every step starts at the same height (400 of 844). */
.ob-zone { position: absolute; left: 32px; right: 32px; top: calc(var(--ob-h) * .474); transition: opacity .35s; }
.ob-head { position: absolute; left: 0; right: 0; top: -110px; }
.ob-head.solo { top: -86px; }
.ob-h1 { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; text-align: center; color: var(--text, #F2F4F8); }
.ob-sub { margin: 8px 0 0; font-weight: 500; font-size: 14px; line-height: 1.4; text-align: center; color: rgba(242,244,248,.6); overflow-wrap: anywhere; }
.ob-form { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
@keyframes obEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ob-zone.ob-in > * { animation: obEnter .55s cubic-bezier(.22,1,.36,1) both; }
.ob-zone.ob-in > *:nth-child(2) { animation-delay: .07s; }
.ob-zone.ob-in > .ob-form.stagger > * { animation: obEnter .5s cubic-bezier(.22,1,.36,1) both; }
.ob-zone.ob-in > .ob-form.stagger { animation: none; }
.ob-form.stagger > *:nth-child(1) { animation-delay: .12s; } .ob-form.stagger > *:nth-child(2) { animation-delay: .19s; } .ob-form.stagger > *:nth-child(3) { animation-delay: .26s; }

/* Components: production Liquid Glass on the existing tokens. */
.ob-btn { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-inset); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; color: var(--text, #F2F4F8); cursor: pointer; transition: transform .12s ease, opacity .2s ease, border-color .2s ease; }
.ob-btn:active { transform: scale(.97); }
.ob-btn.primary { background: var(--cta); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--cta-ink); }
.ob-btn svg { flex-shrink: 0; }
.ob-idle, .ob-busy { align-items: center; justify-content: center; gap: 10px; }
.ob-idle { display: flex; } .ob-busy { display: none; }
.is-busy > .ob-idle { display: none; } .is-busy > .ob-busy { display: flex; }
.ob-btn.is-busy:not(.primary) { border-color: rgba(91,140,255,.7); }
#pvx[data-busy] .ob-btn:not(.is-busy) { opacity: .45; pointer-events: none; }
@keyframes obSpin { to { transform: rotate(360deg); } }
.ob-spin { animation: obSpin .8s linear infinite; }
.ob-field { width: 100%; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 22px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-inset); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transition: border-color .2s ease, box-shadow .2s ease; }
.ob-field:focus-within { border-color: rgba(91,140,255,.65); box-shadow: var(--glass-inset), 0 0 0 3px rgba(91,140,255,.25); }
.ob-field input { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-weight: 500; font-size: 17px; line-height: 1; color: var(--text, #F2F4F8); text-align: center; }
.ob-field.pre input { text-align: left; }
.ob-field input::placeholder { color: rgba(242,244,248,.42); }
.ob-pre { font-weight: 600; font-size: 16px; line-height: 1; color: #A8B0C0; padding-right: 10px; border-right: 1px solid rgba(255,255,255,.14); }
.ob-field.own-code .ob-pre { display: none; } /* the user typed their own "+" country code */
.ob-at { font-weight: 600; font-size: 17px; line-height: 1; color: #A8B0C0; }
.ob-code { position: relative; width: 100%; height: 56px; }
.ob-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 56px; }
.ob-box { display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-inset); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); font-weight: 600; font-size: 24px; line-height: 1; color: var(--text, #F2F4F8); transition: border-color .2s ease, box-shadow .2s ease; }
.ob-box.on { border-color: rgba(91,140,255,.7); box-shadow: 0 0 0 3px rgba(91,140,255,.25); }
.ob-code.err .ob-box { border-color: rgba(255,91,103,.8); box-shadow: 0 0 0 3px rgba(255,91,103,.22); }
.ob-code input { position: absolute; left: 0; top: 0; width: 100%; height: 56px; opacity: 0; border: 0; padding: 0; font-size: 16px; background: transparent; color: transparent; caret-color: transparent; }
.ob-row { width: 100%; min-height: 40px; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
.ob-links { display: flex; gap: 8px; justify-content: center; }
.ob-text { min-height: 44px; padding: 12px 16px; border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; color: rgba(242,244,248,.66); cursor: pointer; transition: transform .12s ease, opacity .2s ease; }
.ob-text:active { transform: scale(.97); }
.ob-text:disabled { opacity: .4; cursor: default; }
.ob-err { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 13.5px; line-height: 1.35; color: #FF8A94; text-align: left; }
.ob-err::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: #FF5B67; flex-shrink: 0; }
.ob-err:empty { display: none; }
.ob-err:not(:empty) + .ob-hint { display: none; } /* while an error shows it replaces the hint */
.ob-hint { margin: 0; font-weight: 500; font-size: 12.5px; line-height: 1.35; color: rgba(242,244,248,.56); text-align: center; }
.ob-note { margin: 0; font-weight: 500; font-size: 14px; line-height: 1; color: rgba(242,244,248,.66); }
.ob-note:empty { display: none; }
.ob-status { margin: 0 0 8px; font-weight: 500; font-size: 15px; line-height: 1.5; text-align: center; color: rgba(242,244,248,.78); }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-foot { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 24px; font-weight: 500; font-size: 12px; line-height: 1.4; text-align: center; color: rgba(242,244,248,.62); transition: opacity .3s; }
.ob-foot a { color: #F2F4F8; font-weight: 600; text-decoration: none; }
#pvx:not([data-step="welcome"]):not([data-step="email"]):not([data-step="phone"]) .ob-foot { opacity: 0; pointer-events: none; }

/* ---------- Skin picker (new accounts, bullsi.fun) ---------- */
/* r-1001-onb2: once faded, the Probe and the form stop being drawn and stop animating, so the picker owns every frame. */
#pvx[data-step="skin"] .ob-probe, #pvx[data-step="land"] .ob-probe { opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s linear .45s; }
#pvx[data-step="skin"] .ob-probe *, #pvx[data-step="land"] .ob-probe * { animation-play-state: paused !important; }
#pvx[data-step="skin"] .ob-zone, #pvx[data-step="land"] .ob-zone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s linear .35s; }
#pvx[data-step="land"] .ob-word { opacity: 0; }
.ob-pick { position: absolute; left: 50%; top: var(--pk-y, 0px); width: var(--pk-w, 390px); height: 612px; z-index: 3; transform: translateX(-50%) scale(var(--pk-k, 1)); transform-origin: 50% 0; pointer-events: none; }
#pvx[data-step="land"] .ob-pick { z-index: 6; }
.ob-stage { position: absolute; left: 0; top: 150px; width: 100%; height: 450px; pointer-events: auto; }
/* r-1001-onb3: the finger owns the row. No browser panning, text selection, callout or image drag may take the swipe, on the stage or anything inside it. */
.ob-stage, .ob-stage * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
/* r-1001-onb5: a card's layer is laid out at --f of the 380x730 design card (0.58 on phones, 0.66 on desktop) and its
   content is scaled into it by .ob-fit, so the layer Safari keeps is small and every card can stay drawn at all times.
   The stand's transform origin stays at the same point of the stage (x centre, y 360px) whatever --f is. */
.ob-stand { position: absolute; left: calc(50% - 190px * var(--f, 1)); top: calc(360px - 640px * var(--f, 1)); width: calc(380px * var(--f, 1)); height: calc(730px * var(--f, 1)); transform-origin: calc(190px * var(--f, 1)) calc(640px * var(--f, 1)); will-change: transform, opacity; }
.ob-fit { position: absolute; left: 0; top: 0; width: 380px; height: 0; transform: scale(var(--f, 1)); transform-origin: 0 0; }
.ob-shadow { position: absolute; left: 12px; top: 694px; width: 356px; height: 76px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,.32) 55%, rgba(0,0,0,0)); transition: opacity .5s; } /* a soft gradient, no filter: nothing is blurred while the cards move */
/* r-1001-onb6: the reflection is one pre-made image per skin (flipped, rounded and faded to transparent in the file itself). No mask, no clip, no layer of its own. */
.ob-refl { position: absolute; left: 0; top: 736px; width: 380px; height: 200px; background: center / 100% 100% no-repeat; pointer-events: none; transition: opacity .5s; }
.ob-card { position: absolute; left: 0; top: 0; width: 380px; height: 730px; border-radius: 44px; overflow: hidden; box-shadow: 0 40px 60px -30px rgba(0,0,0,.8); } /* no blue glow around the selected card. r-1001-onb4: the 1px inset white ring is gone — on Original's flat dark sky it read as a light line around the card */
.ob-skin-original { background: radial-gradient(420px 420px at 8% 18%, rgba(91,140,255,.16), transparent 70%), radial-gradient(360px 360px at 96% 45%, rgba(91,140,255,.12), transparent 70%), radial-gradient(300px 300px at 30% 88%, rgba(52,224,161,.10), transparent 70%), radial-gradient(220px 220px at 90% 100%, rgba(255,216,77,.10), transparent 70%), #111216; }
.ob-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* The four drifting orbs of the Original sky, drawn as soft gradients (no filter): only their transform animates. */
.ob-sky .orb2 { position: absolute; border-radius: 50%; opacity: .4; --orb: #5B8CFF; background: radial-gradient(closest-side, var(--orb) 0%, var(--orb) 38%, transparent 100%) !important; }
.ob-sky .orb2 i { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent); }
.ob-sky .k1 { width: 460px; height: 460px; left: -180px; top: -120px; animation: obSky1 24s ease-in-out infinite alternate; }
.ob-sky .k2 { width: 410px; height: 410px; right: -185px; top: 145px; animation: obSky2 29s ease-in-out infinite alternate; }
.ob-sky .k3 { width: 360px; height: 360px; left: -10px; bottom: 10px; --orb: #34E0A1; opacity: .22; animation: obSky3 33s ease-in-out infinite alternate; }
.ob-sky .k4 { width: 260px; height: 260px; right: -20px; bottom: -80px; --orb: #FFD84D; opacity: .24; animation: obSky4 22s ease-in-out infinite alternate; }
.ob-sky .grain2 { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.2px); background-size: 26px 26px; opacity: .35; }
@keyframes obSky1 { to { transform: translate(40px,30px); } } @keyframes obSky2 { to { transform: translate(-35px,-45px); } }
@keyframes obSky3 { to { transform: translate(30px,-30px); } } @keyframes obSky4 { to { transform: translate(-25px,20px); } }
/* The card face: a static, non-interactive replica of the Wallet home. */
.ob-pad { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 22px 16px 14px; transition: padding .75s cubic-bezier(.22,1,.36,1); }
.ob-stand.landed .ob-pad { padding: 58px 16px 12px; }
.ob-hdr { display: flex; align-items: center; gap: 8px; }
.ob-hdr-probe { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.ob-pill { height: 36px; min-width: 36px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgba(17,18,22,.62); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); color: #C9CFDA; font-weight: 500; font-size: 12px; line-height: 1; }
.ob-pill.candi { padding: 0 12px; } .ob-pill.candi span { color: #F2F4F8; }
.ob-user { margin-top: 14px; display: flex; justify-content: center; }
.ob-user > div { max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(17,18,22,.62); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-weight: 500; font-size: 13px; line-height: 1; color: #F2F4F8; }
.ob-user i { width: 24px; height: 24px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, #FFA02E, #FF5B67 55%, #5B8CFF); }
.ob-vault { position: relative; margin-top: 12px; height: 132px; flex-shrink: 0; border-radius: 22px; overflow: hidden; background: rgba(17,18,22,.62); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } /* r-1001-onb2: no backdrop blur on picker cards — a blur inside a moving 3D card is redone every frame */
.ob-range { position: absolute; right: 12px; top: 12px; padding: 3px; border-radius: 999px; display: flex; gap: 2px; background: rgba(255,255,255,.06); font-size: 11px; line-height: 1; }
.ob-range b { padding: 5px 10px; border-radius: 999px; background: #5B8CFF; font-weight: 600; color: #0B1A3A; }
.ob-range span { padding: 5px 9px; font-weight: 500; color: #8A93A6; }
.ob-bal { position: absolute; left: 0; top: 50px; width: 100%; text-align: center; font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: #F2F4F8; font-variant-numeric: tabular-nums; }
.ob-acts { margin-top: 10px; display: flex; gap: 8px; }
.ob-acts > div { flex: 1 1 0; min-height: 44px; padding: 12px 0 10px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(17,18,22,.62); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-weight: 600; font-size: 12px; line-height: 1; color: #F2F4F8; }
.ob-grow { flex: 1 1 0; }
.ob-tabs { display: flex; padding: 5px; border-radius: 999px; background: rgba(22,23,28,.72); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.ob-tabs > div { flex: 1 1 0; padding: 8px 0 5px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #A5ADBE; font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: .1px; }
.ob-tabs > div.on { background: rgba(255,255,255,.07); color: #5B8CFF; font-weight: 600; }
.ob-hit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; border: 0; padding: 0; background: transparent; cursor: pointer; }
/* Under the cards: real pixels, never scaled, so the buttons keep their tap size on small phones. */
.ob-under { position: absolute; left: 0; right: 0; top: var(--pk-u, 612px); z-index: 5; width: min(326px, calc(100% - 64px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; animation: obEnter .55s cubic-bezier(.22,1,.36,1) both; transition: opacity .4s; }
#pvx[data-step="land"] .ob-under { opacity: 0; pointer-events: none; }
.ob-titles { position: relative; width: 100%; height: 48px; }
/* Every skin's title is rendered once; the nearest one is shown by opacity alone. */
.ob-title { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .12s linear; will-change: opacity; pointer-events: none; }
.ob-title.on { opacity: 1; }
.ob-skin-name { white-space: nowrap; margin: 0; font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; text-align: center; color: var(--text, #F2F4F8); }
.ob-skin-sub { margin: 6px 0 0; text-align: center; white-space: nowrap; font-weight: 500; font-size: 13px; line-height: 1.2; letter-spacing: .02em; color: rgba(242,244,248,.58); }
.ob-dots { margin-top: 8px; display: flex; gap: 2px; }
.ob-dots button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ob-dots button { position: relative; }
/* The active dot grows with transform and opacity only (a 22px pill scaled from dot width), never by changing a width. */
.ob-dots i, .ob-dots b { position: absolute; left: 50%; top: 50%; height: 8px; border-radius: 4px; transition: opacity .3s, transform .3s; will-change: transform, opacity; }
.ob-dots i { width: 8px; margin: -4px 0 0 -4px; background: rgba(242,244,248,.22); }
.ob-dots b { width: 22px; margin: -4px 0 0 -11px; background: #F2F4F8; opacity: 0; transform: scaleX(.364); }
.ob-dots button.on i { opacity: 0; }
.ob-dots button.on b { opacity: 1; transform: none; }
.ob-under .ob-btn { margin-top: 8px; }
.ob-under .ob-text { margin-top: 4px; }
.ob-under .ob-err { margin-top: 8px; }
.ob-under.locked .ob-btn, .ob-under.locked .ob-text { pointer-events: none; }
.ob-under.waiting .ob-btn, .ob-under.waiting .ob-text { opacity: .45; pointer-events: none; }

/* Phones: the Original sky's orbs hold still, so they are drawn into the card's own layer instead of four moving layers. */
@media (pointer: coarse) { .ob-sky .orb2 { animation: none !important; } }

/* Reduced motion: no tilt, rise, stagger or breathing; simple 200ms crossfades. The Probe holds its resting pose. */
@media (prefers-reduced-motion: reduce) {
  #pvx.ob, #pvx.ob *, #pvx.ob *::before, #pvx.ob *::after { animation: none !important; transition: opacity .2s linear !important; }
}