/* ═══════════════════════════════════════════════════════════════════════════
   ValWithProof — motion, founder and mentor side.

   Loaded LAST on the founder app, the Experts frame, the mentor console and
   the founder door, so the same motion reads across the whole product.

   Two kinds of motion only:
     1. an entrance, played once when a page / section / tab opens — driven
        by the `.vw-enter` class the three apps add on navigation (never on a
        repaint, so polling does not make things jump);
     2. responses to the pointer and keyboard — hover lift, press, focus.
   Every rule here is switched off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mo-ease:cubic-bezier(.2,.8,.2,1);
  --mo-spring:cubic-bezier(.2,.9,.3,1.35);
  --mo-fast:.16s; --mo-mid:.28s; --mo-slow:.5s;
}

/* ── 1. entrances ──────────────────────────────────────────────────────── */
@keyframes mo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mo-pop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:none}}

/* the page / tab that just opened: its blocks rise in one after another */
.vw-enter{animation:mo-fade .3s var(--mo-ease) both}
.vw-enter > *{animation:mo-rise .5s var(--mo-ease) both}
.vw-enter > *:nth-child(1){animation-delay:.02s}
.vw-enter > *:nth-child(2){animation-delay:.07s}
.vw-enter > *:nth-child(3){animation-delay:.12s}
.vw-enter > *:nth-child(4){animation-delay:.17s}
.vw-enter > *:nth-child(5){animation-delay:.22s}
.vw-enter > *:nth-child(6){animation-delay:.27s}
.vw-enter > *:nth-child(n+7){animation-delay:.3s}
/* After the entrance the node is marked .vw-settled rather than simply
   losing .vw-enter (Oct 2026). Dropping the class used to hand these
   containers back to brand.css's `:where(.view,.app,.content,.main) > *`
   fade — a DIFFERENT animation, so the browser started it from opacity 0 and
   the whole console / feature pane blinked out and back ~0.9 s after every
   tab change. Settled means: no animation at all until the next .vw-enter. */
.vw-settled,.vw-settled > *{animation:none}
/* the mentor console keeps its sidebar still; only the content moves */
.console.vw-enter{animation:none}
.console.vw-enter > .tabwrap{animation:none}
/* the founder app's framed features fade rather than rise (the frame is one block) */
.frame-wrap.vw-enter,#frameWrap.vw-enter{animation:mo-fade .35s var(--mo-ease) both}

/* grids of cards inside an opening page cascade too */
.vw-enter .grid > *,.vw-enter .browse-grid > *,.vw-enter .stats > *{animation:mo-rise .45s var(--mo-ease) both}
.vw-enter .grid > *:nth-child(2),.vw-enter .browse-grid > *:nth-child(2),.vw-enter .stats > *:nth-child(2){animation-delay:.06s}
.vw-enter .grid > *:nth-child(3),.vw-enter .browse-grid > *:nth-child(3),.vw-enter .stats > *:nth-child(3){animation-delay:.12s}
.vw-enter .grid > *:nth-child(4),.vw-enter .browse-grid > *:nth-child(4),.vw-enter .stats > *:nth-child(4){animation-delay:.18s}
.vw-enter .grid > *:nth-child(n+5),.vw-enter .browse-grid > *:nth-child(n+5),.vw-enter .stats > *:nth-child(n+5){animation-delay:.22s}

/* things that appear on their own */
.banner{animation:mo-drop .4s var(--mo-ease) both}
.mwrap,.modal-bg,.scrim{animation:mo-fade .2s ease both}
.menu,.acct-menu,.dropdown,[role="menu"]{animation:mo-pop .16s var(--mo-ease) both;transform-origin:top right}

/* ── 2. responses ──────────────────────────────────────────────────────── */

/* buttons: lift a pixel, press in */
.btn,button.go,.jy-mini,.pj-join,.nextmt-go,.sr-act button,.ring-yes,.ring-no{
  transition:transform var(--mo-fast) var(--mo-ease),box-shadow var(--mo-mid) var(--mo-ease),
    background-color var(--mo-fast) ease,border-color var(--mo-fast) ease,color var(--mo-fast) ease,opacity var(--mo-fast) ease}
.btn:not(:disabled):hover,.jy-mini:not(:disabled):hover,.pj-join:hover,.ring-yes:hover{transform:translateY(-1px)}
.btn:not(:disabled):active,.jy-mini:not(:disabled):active,.pj-join:active,.nextmt-go:active,
.ring-yes:active,.ring-no:active,.sr-act button:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn.p:not(:disabled):hover,.btn.primary:not(:disabled):hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.55)}

/* arrows inside buttons and links nudge forward */
.btn svg:last-child,.jy-link,.link-arrow{transition:transform var(--mo-mid) var(--mo-ease)}
.btn:hover svg:last-child:not(:first-child){transform:translateX(3px)}

/* cards that open something lift; plain cards just firm up their edge */
.card{transition:border-color var(--mo-mid) ease,box-shadow var(--mo-mid) var(--mo-ease),transform var(--mo-mid) var(--mo-ease)}
.card:hover{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px -18px rgba(0,0,0,.28)}
a.card:hover,button.card:hover,.card.click:hover,.browse-card:hover,.nowcard:hover,
.idea-row:hover,.pj-row:hover,.rq-row:hover,.bkrow:hover,.acct-item:hover{transform:translateY(-2px)}
.browse-card,.nowcard,.idea-row,.pj-row,.rq-row,.bkrow,.acct-item,.nextmt,.jy-box,.stat{
  transition:transform var(--mo-mid) var(--mo-ease),box-shadow var(--mo-mid) var(--mo-ease),border-color var(--mo-mid) ease,background-color var(--mo-fast) ease}
.browse-card:hover,.nowcard:hover,.idea-row:hover{box-shadow:0 2px 4px rgba(0,0,0,.04),0 14px 30px -18px rgba(0,0,0,.3)}
.nextmt:hover{box-shadow:0 2px 4px rgba(0,0,0,.04),0 12px 28px -18px rgba(0,0,0,.3)}
.stat:hover{transform:translateY(-2px)}

/* inputs: the focus ring grows in rather than snapping on */
.inp,input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="tel"],
input[type="number"],input[type="search"],textarea,select{
  transition:border-color var(--mo-fast) ease,box-shadow var(--mo-mid) var(--mo-ease),background-color var(--mo-fast) ease}

/* tabs, chips, pills */
.tabs button,.chip,.fchip,.jy-chip,.tag{transition:color var(--mo-fast) ease,background-color var(--mo-fast) ease,border-color var(--mo-fast) ease,transform var(--mo-fast) var(--mo-ease)}
.chip:active,.fchip:active{transform:scale(.96)}

/* links */
a{transition:color var(--mo-fast) ease,opacity var(--mo-fast) ease}

/* the Experts frame's tab row: the active tab's underline grows in */
.tabs button.on::after,.tabs a.on::after{animation:mo-underline .3s var(--mo-ease) both;transform-origin:left}
@keyframes mo-underline{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}

/* toasts slide up */
.toast.show,.toast.on,.sr-toast{animation:mo-toast .32s var(--mo-spring) both}
@keyframes mo-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* loaders breathe */
.spin{animation:mo-spin .8s linear infinite}
@keyframes mo-spin{to{transform:rotate(360deg)}}

/* ── off for anyone who asked for less motion ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .vw-enter,.vw-enter *,.banner,.mwrap,.modal-bg,.scrim,.menu,.acct-menu,.dropdown,[role="menu"],
  .toast.show,.toast.on,.sr-toast,.tabs button.on::after,.tabs a.on::after{animation:none !important}
  .btn,.card,.browse-card,.nowcard,.idea-row,.pj-row,.rq-row,.bkrow,.acct-item,.nextmt,.stat,.jy-mini,.pj-join{transition:none !important}
  .btn:hover,.btn:active,.card:hover,.browse-card:hover,.nowcard:hover,.idea-row:hover,.pj-row:hover,.rq-row:hover,
  .bkrow:hover,.acct-item:hover,.stat:hover,a.card:hover{transform:none !important}
}