/* Screen fidelity layer for the development reference. The motion router stays outside it. */
body { font-family: 'Clash Display', 'Outfit', 'Instrument Sans', system-ui, sans-serif; background:#14181c; padding:12px 40px; }
.stage { top:0; }
.phone,
.phone.lt { width:430px; height:min(932px, calc(100vh - 24px)); border-radius:44px; border:1.5px solid rgba(255,255,255,.55); background:linear-gradient(165deg,#f7fafa 0%,#e9eff1 20%,#d3dfe2 42%,#b9cacf 60%,#93aab2 75%,#617d88 88%,#37505b 100%); box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 4px rgba(255,255,255,.25); }
.phone .bg-layer { background:transparent; }
.statusbar-fixed { display:none; }
.phone .status { position:absolute; inset:0 0 auto; z-index:60; height:49px; }
.viewport { inset:0; }
#sc-home > :not(.src-content),
#sc-cards > :not(.src-content),
#sc-fiat > :not(.src-content),
#sc-crypto > :not(.src-content),
#sc-btc > :not(.src-content) { display:none!important; }
.scr .src-content.screen { position:absolute; inset:49px 0 0; width:100%; height:calc(100% - 49px); display:flex!important; min-height:0; z-index:1; }
.scr .src-content .scroll { position:relative; inset:auto; width:100%; height:auto; flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:100px; z-index:1; }
.scr .src-content .scroll::-webkit-scrollbar { display:none; }
.nav-wrap,
.lt .nav-wrap { position:absolute; left:50%; bottom:0; width:min(402px,100%); height:100px; z-index:30; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:0; transform:translateX(-50%); }
.nav-inner { position:relative; width:100%; height:79px; flex:none; }
.nav-pill,
.lt .nav-pill { position:absolute; left:22px; top:5px; width:calc(100% - 114px); height:69px; padding:0 6px; display:flex; border:0; border-radius:200px; background:linear-gradient(0deg,rgba(255,255,255,.52),rgba(255,255,255,.52)),linear-gradient(180deg,rgba(64,101,111,0) 0%,#40656F 100%); box-shadow:inset 0 4px 4px rgba(255,255,255,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.nav-item,
.lt .nav-item { position:relative; height:69px; gap:3px; color:#4D5E70; font-size:10px; font-weight:400; transform:none; }
.nav-pill .nav-item svg { width:22px; height:22px; stroke:#4D5E70; stroke-width:1.5; }
.nav-item.active,
.lt .nav-item.active { color:#0E2129; font-size:12px; font-weight:500; transform:none; }
.nav-pill .nav-item.active svg { stroke:#0E2129; stroke-width:1.6; }
.nav-item.active::before { display:none; }
.nav-item > svg,.nav-item > span { position:relative; z-index:1; }
.nav-item .nav-dot { display:none!important; }
.home-indicator { display:block!important; width:134px; height:5px; margin-top:8px; background:#9DB4C4; border-radius:100px; }
#fab { left:auto; right:22px; top:6px; width:67px; height:67px; }
@keyframes flowArrowRight {
  0%,12%,75%,100% { transform:translateX(0); }
  30% { transform:translateX(2.4px); }
  44% { transform:translateX(-.55px); }
  56% { transform:translateX(.3px); }
  68% { transform:translateX(0); }
}
@keyframes flowArrowLeft {
  0%,12%,75%,100% { transform:translateX(0); }
  30% { transform:translateX(-2.4px); }
  44% { transform:translateX(.55px); }
  56% { transform:translateX(-.3px); }
  68% { transform:translateX(0); }
}
#fab .flow-arrow-right { animation:flowArrowRight 2.2s ease-in-out infinite; }
#fab .flow-arrow-left { animation:flowArrowLeft 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { #fab .flow-arrow-right,#fab .flow-arrow-left { animation:none; } }
.reduced #fab .flow-arrow-right,.reduced #fab .flow-arrow-left { animation:none; }
/* Keep the original app's content visible under the shared navigation surface. */
@media(max-width:520px) {
  body { padding:0; justify-content:flex-start; }
  .stage { top:0; width:100%; }
  .phone,.phone.lt { width:100vw; height:100dvh; border:0; border-radius:0; box-shadow:none; }
  .controls { display:none; }
}
/* The owner's own DOM drives every animated home element. These rules only
   fit those existing elements into the development reference's geometry. */
#s-home .lh-hi.greeting { margin-top:2px; font-size:17px; line-height:normal; color:#132128; }
#s-home .lh-lbl.balance-label { margin-top:12px; font-size:15px; line-height:normal; color:#22323a; }
#s-home #balance.lh-bal { margin-top:6px; height:44px; font-size:36px; line-height:1; letter-spacing:-1.6px; color:#132128; }
#s-home #balance.lh-bal { opacity:0; }
#s-home #balance .reel.cents,#s-home #balance .sep.cents { color:#5f747d; }
#s-stocks [data-flow-key="balance"],#cx-bal-amt,#cx-bal-dec { white-space:nowrap; }
#s-stocks [data-flow-key="balance"] .reel.cents,
#s-stocks [data-flow-key="balance"] .sep.cents { font-size:14px; color:#5f747d; vertical-align:bottom; }
#cx-bal-dec .reel,#cx-bal-dec .sep { color:inherit; vertical-align:bottom; }
#s-home #delta.lh-chg { margin-top:8px; font-size:14px; font-weight:500; color:#3f9862; }
#s-home #delta.lh-chg.neg { color:#c65548; }
#s-home .lh-hd { transition:backdrop-filter var(--d-base) linear,background var(--d-base) linear; }
#s-home .lh-hd.scrolled { background:rgba(243,247,248,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
#s-home #lh-mixbar { overflow:visible!important; }
#s-home #allocRow.aligned-alloc-row { width:224px; height:4px; display:block; transform:scaleX(.5); transform-origin:left top; }
#s-home #allocBars { width:224px; gap:4px; }
#s-home #allocBars .alloc-seg { gap:0; }
#s-home #allocBars .alloc-pct,#s-home #allocBars .alloc-name { display:none!important; }
#s-home #allocBars .alloc-track { height:6px; }
#s-home #periodChip { display:none!important; }
#s-home #fiatValue.kchip-amt,#s-home #cryptoValue.kchip-amt { font-size:26px; font-weight:400; line-height:1; letter-spacing:-.6px; color:#132128; }
#s-home .kchip-amt .cents { font-size:17px; color:#5f747d; letter-spacing:0; }
#s-home #cryptoValue.tick-up,#s-home #cryptoValue.tick-down { animation:none; background:transparent; }
#s-home #fiatDelta.kchip-chg,#s-home #cryptoDelta.kchip-chg { font-size:11.5px; margin-top:5px; color:#3f9862; letter-spacing:.2px; }
#s-home .kchip-spark.spark { top:auto;right:0;bottom:0;width:56%;height:70px;overflow:hidden; }
#s-home .kchip-spark.spark svg { width:100%; height:100%; overflow:visible; }
#s-home .kchip-ico.asset-actions { position:absolute;top:14px;right:14px;display:flex;gap:6px; }
#s-home .kchip-ico.asset-actions .pill { position:relative;top:auto;right:auto;min-width:44px;height:34px;padding:0 10px;border-radius:70px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; }
#s-home .kchip-ico.asset-actions .pill svg { width:16px;height:16px; }
#s-home .lh-mini.lh-mini-pop { animation-name:home-mini-pop; }
#s-home .lh-mini[hidden] { display:none; }
#s-home .lh-oncard2[data-card-count="1"] .lh-mini.m3 { top:16.35px; }
#s-home .lh-oncard2[data-card-count="2"] .lh-mini.m2 { top:16.35px; }
#s-home .lh-oncard2[data-card-count="2"] .lh-mini.m3 { top:32.98px; }
#s-home .lh-mini.m4 { right:43px;top:7px;width:110px;height:55px;border-radius:5.5px;background:#8FB3B8;box-shadow:inset 0 1px 6px rgba(255,255,255,.45); }
#s-home .lh-mini.m5 { right:51px;top:0;width:95px;height:47.5px;border-radius:4.8px;background:#DCE8EA;box-shadow:inset 0 1px 5px rgba(255,255,255,.5); }
#s-home .lh-mini.m4 > *,#s-home .lh-mini.m5 > * { display:none; }
@keyframes home-mini-pop {
  0% { transform:translateY(0) scale(1); }
  35% { transform:translateY(-5px) scale(1.04); animation-timing-function:cubic-bezier(.28,.7,.33,1); }
  100% { transform:translateY(0) scale(1); }
}
#hm-sec-kai #kai.hm-kai { margin:0 20px;background:rgba(83,74,183,.08);border:1px solid rgba(83,74,183,.25);border-radius:16px;padding:12px 14px;display:flex;gap:9px;align-items:flex-start; }
#hm-sec-kai #kai .sparkle { width:16px;height:16px; }
#hm-sec-kai #kai .kai-title { font-size:12px;font-weight:500;color:#534AB7; }
#hm-sec-kai #kai .kai-title b { font-weight:500;opacity:1; }
#hm-sec-kai #kai .kai-list { gap:7px; }
#hm-sec-kai #kai .kai-list li { font-size:12.5px;color:#3C3489;line-height:1.45; }
#hm-sec-kai #kai .kai-list em { font-style:normal;font-weight:600; }
#hm-sec-kai #kai .kai-cta { background:rgba(255,255,255,.5);border:1px solid rgba(83,74,183,.2);border-radius:100px;color:#3C3489;font-size:11.5px; }
#s-home .tx-section { margin-top:20px; }
.src-content .fab:not(#fab) { position:absolute!important;left:auto!important;top:auto!important;right:14px!important;bottom:96px!important;width:48px!important;height:48px!important;border:0!important;border-radius:50%!important;background:radial-gradient(circle,rgba(83,74,183,.75) 0%,rgba(83,74,183,.45) 45%,rgba(83,74,183,0) 74%)!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;z-index:6; }
.src-content .fab:not(#fab) svg { width:21px;height:21px;filter:none; }
#s-cards.selected #cd-insight,#s-cards.selected #card-topup { display:flex!important; }
#cd-main-insight { box-sizing:border-box;display:flex;align-items:flex-start;gap:8px;width:min(362px,calc(100% - 40px));min-height:93px;margin:0 auto 14px;padding:14px;background:linear-gradient(0deg,rgba(90,78,203,.5) -163.16%,rgba(90,78,203,0) 107.89%),rgba(255,255,255,.8);border:1px solid rgba(90,78,203,.3);border-radius:10px;color:#5A4ECB; }
#cd-main-insight .cd-main-insight-icon { flex:none;margin-top:1px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1)); }
#cd-main-insight .cd-main-insight-copy { min-width:0;flex:1;font-family:'Clash Display',sans-serif;font-weight:400; }
#cd-main-insight .cd-main-insight-title { margin:0 0 6px;font-size:14px;line-height:1.2; }
#cd-main-insight p { margin:0;font-size:12px;line-height:1.2;color:#5A4ECB; }
#cd-main-insight .kai-word-mark { color:inherit;font-weight:inherit;background:transparent; }
#s-cards.selected #cd-main-insight { display:none; }
#cd-selected-summary { display:none!important; }
#cd-selected-summary .cd-summary-item { display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0; }
#cd-selected-summary .cd-summary-label { color:#5f747d;font-size:16px;font-weight:400;line-height:1.2; }
#cd-selected-summary strong { color:#132128;font-family:'Instrument Sans',system-ui,sans-serif;font-size:56px;font-weight:500;line-height:1;letter-spacing:-.045em; }
@media (max-height:800px) { #cd-selected-summary { gap:12px; } #cd-selected-summary strong { font-size:44px; } }
#s-cards.selected #cd-selected-summary { display:none; }
#cd-insight,#card-topup { display:none!important; }
#s-cards.selected #card-detail { display:block!important; }
#s-cards:not(.selected) #cd-stack { perspective:800px!important; }
#s-cards:not(.selected) #cd-stack > button.cd-front-card { touch-action:none; }
#s-cards:not(.selected) #cd-stack > button:not(.cd-front-card) { cursor:default!important; }
#s-cards #cd-stack .cd-promoted-face { position:absolute;inset:0;color:#213640;opacity:0;pointer-events:none;transition:opacity 180ms ease; }
#s-cards #cd-stack > button.cd-front-card .cd-promoted-face { opacity:1; }
#s-cards #cd-stack > button.cd-front-card:not(#card-1) .card-flip-front > span:nth-child(2),
#s-cards #cd-stack > button.cd-front-card:not(#card-1) .card-flip-front > span:last-of-type { opacity:0; }
#s-cards .cd-promoted-top { position:absolute;top:16px;left:18px;right:18px;display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.02em; }
#s-cards .cd-promoted-top b { font-size:14px;font-weight:600; }
#s-cards .cd-promoted-amount { margin-left:auto; }
#s-cards .cd-promoted-chip { position:absolute;top:78px;left:18px;width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#ece7d8,#cfc5ab);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
#s-cards .cd-promoted-number { position:absolute;bottom:40px;left:18px;font-size:15px;letter-spacing:3px; }
#s-cards .cd-promoted-name { position:absolute;bottom:20px;left:18px;font-size:11px;opacity:.65; }
#s-cards.selected #cd-stack { height:220px!important; }
#s-cards.selected #cd-stack button { top:0!important; }
#s-cards #cd-stack > button[hidden] { display:none!important; }
#s-cards #cd-stack > button.card-flip-ready { overflow:visible!important;transform-style:preserve-3d;transition:transform 760ms cubic-bezier(.35,.08,.2,1),top .3s!important; }
#s-cards.selected #cd-stack > button.card-flip-ready { filter:none!important; }
#s-cards.selected #cd-stack > button.card-flip-ready.is-flipped { transform:rotateY(180deg)!important; }
#s-cards #cd-stack > button.card-flip-ready.instant-reset { transition:none!important; }
.reduced #s-cards #cd-stack > button.card-flip-ready { transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  #s-cards #cd-stack > button.card-flip-ready { transition:none!important; }
}
#s-cards .card-flip-front,#s-cards .card-flip-back { position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden; }
#s-cards .card-flip-front { transform:translateZ(1px); }
#s-cards .card-flip-back { transform:rotateY(180deg) translateZ(1px);display:block;text-align:left;color:#f4fafc; }
#s-cards .card-flip-back.light { color:#132128; }
#s-cards .card-back-stripe { position:absolute;top:27px;left:0;right:0;height:34px;background:rgba(8,25,31,.78); }
#s-cards .card-back-number { position:absolute;top:78px;left:18px;font-size:15px;letter-spacing:2px;font-weight:500;white-space:nowrap; }
#s-cards .card-back-meta { position:absolute;left:18px;right:18px;bottom:17px;display:flex;gap:24px;align-items:flex-end; }
#s-cards .card-back-meta span { display:flex;flex-direction:column;gap:3px;font-size:9px;letter-spacing:.08em;opacity:.86; }
#s-cards .card-back-meta b { font-size:13px;letter-spacing:.02em;font-weight:600;opacity:1; }
#s-cards.selected.flipped #card-topup { display:none!important; }
#cd-insight .kai-word-mark { color:inherit;font-weight:inherit;background:transparent; }
/* Reference layout inside the owner's original sheet and step animation. */
#sh-move { height:625px;box-sizing:border-box;padding:16px 16px 20px; background:linear-gradient(139deg,#f6f9fa 10%,#dde6e9 70%);max-height:88%;overflow-y:auto;scrollbar-width:none; }
.phone.sheet-up .nav-wrap { opacity:0;pointer-events:none; }
#sh-move .sht-grip,#sh-move .step-bar { display:none; }
#sh-move .owner-move-tabs { display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.35);border-radius:40px;padding:2px;margin-bottom:10px; }
#sh-move .owner-move-tabs span { flex:1;min-width:0;height:38px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#22323a;white-space:nowrap;overflow:hidden; }
#sh-move .owner-move-tabs span.on { background:rgba(255,255,255,.88);box-shadow:0 2px 6px rgba(19,33,40,.12);font-weight:600; }
#sh-move .owner-move-tabs span:last-child { flex:0 0 28px;font-size:18px;cursor:pointer; }
#sh-move .owner-move-note { border-radius:12px;padding:10px 12px;background:rgba(83,74,183,.08);border:1px solid rgba(83,74,183,.16);color:#3C3489;font-size:12px; }
#sh-move .owner-move-pair { margin:10px 0 5px;gap:18px; }
#sh-move .owner-move-side { min-height:62px;padding:10px 13px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.85);border-radius:14px; }
#sh-move .owner-move-side:first-child { outline:1px solid rgba(83,74,183,.35); }
#sh-move .owner-move-icon { width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:600; }
#sh-move .owner-move-icon.eur { background:#2b775f; }
#sh-move .owner-move-icon.gbp { background:#416ba4; }
#sh-move .owner-move-name { flex:1;display:flex;flex-direction:column;gap:2px; }
#sh-move .owner-move-name small,#sh-move .owner-move-amount small { font-size:10.5px;color:#5f747d;font-weight:400; }
#sh-move .owner-move-name strong { font-size:14px;color:#132128;font-weight:500; }
#sh-move .owner-move-amount { display:flex;flex-direction:column;align-items:flex-end;gap:2px; }
#sh-move .owner-move-amount strong { color:#132128;font-size:17px;font-weight:600; }
#sh-move .owner-move-amount small { white-space:nowrap; }
#sh-move .owner-move-side:first-child .owner-move-amount small { color:#8a6b0f;background:rgba(196,154,26,.14);border-radius:70px;padding:2px 7px;font-size:10px; }
#sh-move .owner-move-chevron { color:#8e9faa;font-size:14px; }
#sh-move .owner-move-arrow { left:50%;right:auto;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);background:transparent;box-shadow:none;color:#8e9faa;font-size:16px;transition:transform calc(420ms * var(--speed)) var(--ease-ios); }
#sh-move .owner-move-arrow.flipped { transform:translate(-50%,-50%) rotate(180deg); }
#sh-move .owner-move-denoms { display:flex;justify-content:center;gap:5px;margin:6px 0 8px; }
#sh-move .owner-move-denoms span { padding:4px 11px;border-radius:70px;font-size:11px;color:#132128;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);cursor:pointer; }
#sh-move .owner-move-pad .pad { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;border-radius:14px;overflow:hidden;background:rgba(19,33,40,.12); }
#sh-move .owner-move-pad .pad-key { height:44px;border-radius:0;background:rgba(19,33,40,.06);font-size:19px; }
#sh-move .owner-move-slider { text-align:center;font-size:12px;color:#C49A1A;font-weight:500;margin:9px 0; }
#sh-move .owner-move-confirm { width:100%;height:50px;padding:0;border-radius:70px;background:#fff;color:#000;font-size:15px;font-weight:500; }
#sh-move .owner-move-recent { text-align:center;font-size:12.5px;color:#5f747d;font-weight:500;margin-top:9px; }

/* ── Crypto → Wallet tab (Figma spec) ─────────────────────────────────────
   This tab ships empty/unwired in the dev build (cxWswPaint/cxRenderWalletAssets
   in alignment.js fill it in). Entrance here is independent of the home
   screen's .playing/coldOpen() system — reached by tab click, not cold-open,
   so it gets its own scoped replay trigger (cxPlayFundingEntrance). */
#s-crypto-x .cx-in { opacity:0; }
#s-crypto-x .cx-in.cx-in-play {
  animation: enter-block var(--d-slow) var(--ease-settle) both;
  animation-delay: calc(var(--at,0ms) * var(--tscale) * var(--speed));
}
#cx-wsw-chips { display:flex; }
#cx-wsw-chips .cx-chip { transition: transform var(--d-instant) var(--ease-state); }
#cx-wsw-chips .cx-chip:active { transform: scale(.96); }
#cx-wallet-acts .cx-act-btn > div:first-child { transition: transform var(--d-instant) var(--ease-state); }
#cx-wallet-acts .cx-act-btn:active > div:first-child { transform: scale(.92); }
#cx-wallet-assets > div { transition: background var(--d-fast) var(--ease-state); }
#cx-wallet-assets > div:active { background: rgba(255,255,255,.5); }

/* Allocation bar — segments rest fully grown; .cx-bar-play (added only on
   Wallet-tab entrance) replays a left-anchored scaleX reveal, staggered. */
#cx-alloc-bar .cx-bar-seg { transform: scaleX(1); transform-origin: left; }
#cx-alloc-bar.cx-bar-play .cx-bar-seg {
  animation: cx-bar-grow calc(650ms * var(--tscale) * var(--speed)) var(--ease-settle) both;
}
#cx-alloc-bar.cx-bar-play .cx-bar-seg:nth-child(2) { animation-delay: calc(70ms  * var(--tscale) * var(--speed)); }
#cx-alloc-bar.cx-bar-play .cx-bar-seg:nth-child(3) { animation-delay: calc(140ms * var(--tscale) * var(--speed)); }
#cx-alloc-bar.cx-bar-play .cx-bar-seg:nth-child(4) { animation-delay: calc(210ms * var(--tscale) * var(--speed)); }
#cx-alloc-bar.cx-bar-play .cx-bar-seg:nth-child(5) { animation-delay: calc(280ms * var(--tscale) * var(--speed)); }
@keyframes cx-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reduced #s-crypto-x .cx-in.cx-in-play,
.reduced #cx-alloc-bar.cx-bar-play .cx-bar-seg { animation: none !important; opacity:1 !important; transform: scaleX(1) !important; }

/* Wallet asset logos — periodic coin flip, per reference (Logos/Cards - 1.mp4):
   a squash through zero width that mirrors the glyph on the back half, not a
   true 3D rotation (cheaper, and it's what the reference actually shows).
   Each row carries its own --coin-period/--coin-delay (set inline from
   CX_WALLET_ASSETS in alignment.js) so the three coins drift in and out of
   phase rather than ever reading as spinning "together".

   The curve itself is scaleX = cos(theta), with theta eased through a
   smoothstep (not linear) — exactly how a physically spun coin looks: slow
   leaving rest, fastest crossing edge-on, slow again at the mirrored back,
   fastest crossing the second edge, slow settling back to rest. 80%-94% is
   one full 360° turn; 94%-100% is a small 90° overshoot that springs back,
   so it doesn't just stop dead. animation-timing-function is linear because
   the easing is already baked into the keyframe values, not left to CSS's
   interpolation. */
#cx-wallet-assets .cx-coin {
  transform-origin: 50% 50%;
  animation: cx-coin-flip calc(var(--coin-period, 4.4s) * var(--speed, 1)) linear infinite;
  animation-delay: calc(var(--coin-delay, 0s) * var(--speed, 1));
}
@keyframes cx-coin-flip {
  0%, 80%     { transform: scaleX(1); }
  80.875%     { transform: scaleX(0.9975); }
  81.750%     { transform: scaleX(0.9638); }
  82.625%     { transform: scaleX(0.8365); }
  83.500%     { transform: scaleX(0.5556); }
  84.375%     { transform: scaleX(0.1133); }
  85.250%     { transform: scaleX(-0.4052); }
  86.125%     { transform: scaleX(-0.8332); }
  87%         { transform: scaleX(-1); }
  87.875%     { transform: scaleX(-0.8332); }
  88.750%     { transform: scaleX(-0.4052); }
  89.625%     { transform: scaleX(0.1133); }
  90.500%     { transform: scaleX(0.5556); }
  91.375%     { transform: scaleX(0.8365); }
  92.250%     { transform: scaleX(0.9638); }
  93.125%     { transform: scaleX(0.9975); }
  94%         { transform: scaleX(1); }
  94.750%     { transform: scaleX(0.9700); }
  95.500%     { transform: scaleX(0.7071); }
  96.250%     { transform: scaleX(0.2430); }
  97%         { transform: scaleX(0); }
  97.750%     { transform: scaleX(0.2430); }
  98.500%     { transform: scaleX(0.7071); }
  99.250%     { transform: scaleX(0.9700); }
  100%        { transform: scaleX(1); }
}
.reduced #cx-wallet-assets .cx-coin { animation: none !important; transform: scaleX(1) !important; }
@media (prefers-reduced-motion: reduce) {
  #cx-wallet-assets .cx-coin { animation: none !important; transform: scaleX(1) !important; }
}

/* The source screens already have translucent fills over a smooth gradient.
   Live backdrop sampling makes Chrome repaint those panels during screen
   travel, card entrances and the money-flow confirmation. Keep the fills,
   borders and shadows, but use their static glass appearance. */
.phone .src-content,
.phone .src-content *,
.phone .nav-pill,
.phone #fab {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The dimmed screen is already visually softened by the scrim colour.
   Sampling another live blur behind the confirmation bubble is costly. */
.phone.sheet-up .scrim {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   SPLASH — plays the real Splash.lottie export (splash-lottie/)
   via lottie-web, instead of a hand-reconstructed approximation.
   The comp itself ends on a dark backdrop + a circle grown large
   enough to cover the frame; we remove this div once it finishes
   to reveal the real .phone content, which has been rendering
   underneath the whole time.
   ============================================================ */
.splash {
  position: absolute; inset: 0; z-index: 9999;
  background: #0A2326;
  overflow: hidden;
  border-radius: inherit;
}
.splash.splash-done { display: none; }
.splash-lottie { position: absolute; inset: 0; }
.splash-lottie svg { display: block; }