/* =============================================================
   STEP 6 — DREAM MOTION LANGUAGE
   Purposeful motion communicates sequence, state, and confidence.
   ============================================================= */
:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-soft:cubic-bezier(.2,.8,.2,1);
  --motion-fast:180ms;
  --motion-medium:520ms;
  --motion-slow:820ms;
}

/* Page progress and navigation depth */
.motion-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--dream-cobalt,#155eef),#4b7bff,var(--dream-mint,#22c58b));transform:scaleX(0);transform-origin:left center;z-index:1200;pointer-events:none;will-change:transform}
.nav,.site-header{transition:box-shadow .28s ease,background-color .28s ease,border-color .28s ease,transform .28s ease}
.nav.is-scrolled,.site-header.is-scrolled{background:rgba(255,255,255,.94)!important;box-shadow:0 12px 32px rgba(7,25,57,.09);border-color:rgba(21,94,239,.10)!important;backdrop-filter:blur(18px) saturate(150%)}

/* First-frame entry: fast enough to feel responsive, slow enough to orient. */
html.motion-enabled .motion-enter{opacity:0;transform:translate3d(0,18px,0);filter:blur(5px)}
html.motion-enabled.motion-page-entered .motion-enter{opacity:1;transform:none;filter:none;transition:opacity .72s var(--motion-ease),transform .72s var(--motion-ease),filter .58s ease;transition-delay:var(--motion-delay,0ms)}
html.motion-enabled .motion-enter.motion-enter-right{transform:translate3d(24px,0,0) scale(.99)}
html.motion-enabled.motion-page-entered .motion-enter.motion-enter-right{transform:none}

/* Scroll reveal system */
html.motion-enabled [data-motion-reveal]{opacity:0;transform:translate3d(0,22px,0);filter:blur(4px);transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-slow) var(--motion-ease),filter var(--motion-medium) ease;transition-delay:var(--motion-delay,0ms);will-change:opacity,transform}
html.motion-enabled [data-motion-reveal="left"]{transform:translate3d(-24px,0,0)}
html.motion-enabled [data-motion-reveal="right"]{transform:translate3d(24px,0,0)}
html.motion-enabled [data-motion-reveal="scale"]{transform:scale(.965)}
html.motion-enabled [data-motion-reveal].is-visible{opacity:1;transform:none;filter:none}

/* Buttons and links feel responsive without becoming playful. */
.btn,.watch,.btn-link,.text-link{transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.btn:hover,.watch:hover{transform:translateY(-2px)}
.btn:active,.watch:active{transform:translateY(0) scale(.985)}
.btn span[aria-hidden="true"],.btn>span:last-child,.btn-link{transition:transform var(--motion-fast) ease}
.btn:hover span[aria-hidden="true"],.btn:hover>span:last-child{transform:translateX(3px)}

/* Hero: sequence and state, not decoration. */
.hero-visual{perspective:1400px}
.sender-card.is-focus,.recipient-card.is-focus{transform:translateY(-5px) scale(1.006)!important;box-shadow:0 30px 78px rgba(6,22,47,.20),0 0 0 7px rgba(21,94,239,.06)!important}
.recipient-card.is-fallback .choice[data-recipient-method="ACH"]{border-color:#155eef;box-shadow:0 0 0 4px rgba(21,94,239,.09);background:#f4f8ff}
.recipient-card.is-fallback .choice[data-recipient-method="ACH"] .radio{background:#155eef;border-color:#155eef;box-shadow:inset 0 0 0 3px #fff}
.fake-input.is-typing{box-shadow:0 0 0 4px rgba(21,94,239,.08);border-color:#5c8aff!important}
.delivery-chip.is-fallback{background:#14366f!important;box-shadow:0 0 0 5px rgba(21,94,239,.08),0 16px 34px rgba(8,41,99,.17)}
.choice,.method,.pt-method-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
.choice:hover,.method:hover,.pt-method-card:hover{transform:translateY(-2px)}
.choice.is-tapped,.method.is-tapped{animation:motionChoice .35s var(--motion-ease)}
@keyframes motionChoice{0%{transform:scale(1)}45%{transform:scale(.975)}100%{transform:scale(1)}}

/* Status progression draws forward rather than blinking between states. */
.status-line{--status-progress:34%}
.status-line::after{content:"";position:absolute;left:10%;top:12px;width:calc(var(--status-progress) * .8);max-width:80%;border-top:2px solid var(--success,#16a34a);transition:width .62s var(--motion-ease);z-index:0}
.status-node i{transition:background-color .32s ease,border-color .32s ease,color .32s ease,transform .42s var(--motion-ease),box-shadow .32s ease}
.status-node.done i{transform:scale(1.04);box-shadow:0 0 0 5px rgba(22,163,74,.08)}

/* Product truth UI transitions */
.pt-product-viewer{transition:transform .4s var(--motion-ease),box-shadow .4s ease}
.pt-product-viewer.is-switching{transform:translateY(4px) scale(.993);box-shadow:0 18px 45px rgba(6,22,47,.11)}
.pt-product-tab{position:relative;overflow:hidden;transition:transform .25s var(--motion-ease),box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
.pt-product-tab:hover{transform:translateX(4px)}
.pt-product-tab::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#155eef,#4b7bff,#22c58b);transition:width .55s var(--motion-ease)}
.pt-product-tab.active::after{width:100%}
.pt-product-panel.active .pt-viewer-stage img{animation:motionProductReveal .58s var(--motion-ease) both}
@keyframes motionProductReveal{from{opacity:.4;transform:scale(.992) translateY(5px)}to{opacity:1;transform:none}}

/* Wallet: movement comes in and goes out, but balance remains factual and still. */
.wallet-surface{transition:box-shadow .4s ease,transform .5s var(--motion-ease)}
.wallet-story.is-motion-active .wallet-surface{box-shadow:0 28px 72px rgba(6,22,47,.16);transform:translateY(-3px)}
.money-flow-card{transition:transform .48s var(--motion-ease),box-shadow .38s ease,border-color .38s ease,background-color .38s ease}
.money-flow-card.is-active{transform:translateY(-5px);border-color:rgba(21,94,239,.32);box-shadow:0 18px 40px rgba(8,41,99,.10);background:#fff}
.money-flow-card.in.is-active{border-color:rgba(34,197,139,.40)}
.money-flow-card .flow-label span:last-child{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;transition:transform .45s var(--motion-ease),background-color .3s ease}
.money-flow-card.is-active .flow-label span:last-child{transform:translateY(3px);background:rgba(21,94,239,.08)}
.money-flow-card.in.is-active .flow-label span:last-child{transform:translateY(3px);background:rgba(34,197,139,.10)}
.flow-methods span{transition:transform .25s var(--motion-ease),background-color .25s ease,color .25s ease}
.money-flow-card.is-active .flow-methods span{animation:motionMethodPulse .55s var(--motion-ease) both;animation-delay:calc(var(--method-index,0) * 90ms)}
@keyframes motionMethodPulse{50%{transform:translateY(-3px);background:#edf4ff;color:#155eef}}

/* Dedicated RTP → ACH fallback story */
.fallback-demo{display:grid!important;grid-template-columns:minmax(230px,.78fr) minmax(0,1.5fr);gap:24px;align-items:center;padding:22px 24px!important;border-radius:18px!important;background:linear-gradient(135deg,#f6f9ff,#fff)!important;border:1px solid rgba(21,94,239,.16)!important}
.fallback-copy{font-size:13px;color:var(--body,#42526a)}
.fallback-copy b{display:block;color:var(--ink,#071a3d);font-size:17px;margin:4px 0 6px}
.fallback-copy p{margin:0 0 12px}
.fallback-kicker{display:inline-flex;align-items:center;gap:6px;color:#155eef;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.fallback-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#155eef;box-shadow:0 0 0 4px rgba(21,94,239,.09)}
.fallback-replay{border:0;background:transparent;color:#155eef;font:inherit;font-weight:850;padding:0;cursor:pointer}
.fallback-flow{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr;align-items:center;gap:8px}
.fallback-node{min-height:102px;padding:14px;border:1px solid var(--line,#dce5f0);border-radius:13px;background:#fff;display:flex;gap:10px;align-items:flex-start;opacity:.48;transform:scale(.97);transition:opacity .36s ease,transform .55s var(--motion-ease),border-color .36s ease,box-shadow .36s ease}
.fallback-node>i{width:27px;height:27px;border-radius:9px;background:#edf3ff;color:#155eef;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;flex:none}
.fallback-node b{display:block;font-size:11px;color:var(--ink,#071a3d)}
.fallback-node small{display:block;margin-top:4px;font-size:9px;color:var(--muted,#718097);line-height:1.35}
.fallback-node.is-active,.fallback-node.is-complete{opacity:1;transform:none}
.fallback-node.is-active{border-color:#5b8cff;box-shadow:0 12px 30px rgba(21,94,239,.11)}
.fallback-node.is-complete>i{background:#e8f8f1;color:#078150}
.fallback-node[data-fallback-step="delivered"].is-active,.fallback-node[data-fallback-step="delivered"].is-complete{border-color:rgba(34,197,139,.45)}
.fallback-connector{height:2px;background:#dce5f0;position:relative;overflow:visible}
.fallback-connector::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-right:2px solid #9bb1cd;border-top:2px solid #9bb1cd;transform:rotate(45deg)}
.fallback-connector i{display:block;height:2px;width:0;background:linear-gradient(90deg,#155eef,#22c58b);transition:width .55s var(--motion-ease)}
.fallback-connector.is-complete i{width:100%}

/* Sequential journey cards on secondary pages */
.journey-grid.motion-flow-group>* ,.step-grid.motion-flow-group>*{transition:opacity .4s ease,transform .55s var(--motion-ease),box-shadow .35s ease,border-color .35s ease}
.journey-grid.motion-flow-group>*.is-flow-active,.step-grid.motion-flow-group>*.is-flow-active{transform:translateY(-5px);border-color:rgba(21,94,239,.28);box-shadow:0 16px 38px rgba(8,41,99,.09)}
.journey-grid.motion-flow-group>*.is-flow-complete,.step-grid.motion-flow-group>*.is-flow-complete{opacity:1}

/* Editorial images get a barely perceptible depth cue. */
.motion-parallax-wrap{overflow:hidden}
.motion-parallax{transform:translate3d(0,var(--motion-parallax-y,0),0) scale(1.025);will-change:transform;transition:transform .12s linear}

/* Motion reference page */
.motion-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.motion-demo-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:22px;min-height:180px}
.motion-demo-card h3{font-size:18px}
.motion-demo-card p{color:var(--body);font-size:13px}
.motion-token{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}

@media(max-width:900px){.fallback-demo{grid-template-columns:1fr}.fallback-flow{grid-template-columns:1fr 30px 1fr 30px 1fr}.motion-principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .fallback-flow{grid-template-columns:1fr;gap:8px}.fallback-connector{width:2px;height:28px;margin:auto}.fallback-connector::after{right:-3px;top:auto;bottom:-1px;transform:rotate(135deg)}.fallback-connector i{width:2px;height:0}.fallback-connector.is-complete i{width:2px;height:100%}
  .motion-principles{grid-template-columns:1fr}
  html.motion-enabled [data-motion-reveal]{transform:translate3d(0,14px,0);filter:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-scroll-progress{display:none}
  html.motion-enabled .motion-enter,html.motion-enabled [data-motion-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .motion-page-entered .sender-card,.motion-page-entered .recipient-card,.journey-live i,.delivery-chip.is-routing span,.money-flow-card.is-active .flow-methods span{animation:none!important}
  .motion-parallax{transform:none!important}
}