/* v2-motion.css — motion layer for the Create tool (Oct 2026). One vocabulary, short and calm:
   ease = cubic-bezier(.2,.8,.2,1) · enter 280–420 ms · press 100 ms · stagger 35 ms (max 10 steps).
   Opacity/transform only (never layout) · no transforms on .screen itself (it holds position:fixed docks).
   Where: screen enter (title rise + fade) · card grids stagger in · picked card pops · popups open (desktop: scale-in, phone: sheet slides up)
   · floating Continue rises · photos fade in · press feedback on buttons/cards · step-bar chips cross-fade. Reduced motion: all off. */
:root{--mv-ease:cubic-bezier(.2,.8,.2,1);--mv-out:cubic-bezier(.4,0,.2,1)}
@keyframes mvFade{from{opacity:0}to{opacity:1}}
@keyframes mvRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mvRiseSm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mvScale{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes mvSheet{from{opacity:.4;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mvPick{0%{transform:scale(1)}35%{transform:scale(.97)}70%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes mvBadge{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mvImg{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
/* 1 · screen enter — whole screen fades, its heading block rises */
.screen.mvScr{animation:mvFade .32s var(--mv-ease) backwards}
.screen.mvScr :is(.hgroup,.pfHd,.lkHd,#lookLanes){animation:mvRiseSm .42s var(--mv-ease) backwards}
/* 2 · card grids stagger in (JS sets --i and .mvStag on the grid for one run) */
.mvStag>:is(.pcard,.mdC,.mCardIt,.pfC,.wdC){animation:mvRise .42s var(--mv-ease) both;animation-delay:calc(min(var(--i,0),10) * 35ms)}
/* 3 · picked card — tactile pop + the "Selected" badge springs in */
.mvPick{animation:mvPick .38s var(--mv-ease)}
.mvPick::after{animation:mvBadge .3s var(--mv-ease) backwards}
/* 4 · popups */
.mOv.open{animation:mvFade .22s var(--mv-out) both}
.mOv.open>:is(.mCard,.pfM){animation:mvScale .34s var(--mv-ease) backwards}
.lgModal:not([hidden]) .lgBack{animation:mvFade .22s var(--mv-out) both}
.lgModal:not([hidden]) .lgWin{animation:mvScale .34s var(--mv-ease) backwards}
.pfUpS .pfUpC,.wdDlg .wdDlgC{animation:mvScale .3s var(--mv-ease) backwards}
/* 5 · floating Continue / docks appear */
.mDock:not([hidden]) .cta{animation:mvRise .36s var(--mv-ease) backwards}
/* 6 · photos landing in slots / previews */
:is(.pfIm,.pfDrop.has,.olPrev,.ofPrev,.wrProd) img{animation:mvImg .42s var(--mv-ease) backwards}
/* 7 · press feedback */
:is(.cta,.backb,.pfB,.mSeg button,.lgExp,.smPill,.olOpt):active{transform:scale(.98);transition:transform .1s var(--mv-out)}
:is(.pcard,.mdC,.mCardIt,.wdC):active{transform:scale(.985);transition:transform .1s var(--mv-out)}
/* 8 · step bar chips cross-fade when the step changes */
:is(.jch,.stp,.laneStep){transition:background-color .25s var(--mv-ease),border-color .25s var(--mv-ease),color .25s var(--mv-ease),opacity .25s var(--mv-ease)}
@media (max-width:760px){
  .mOv.open>:is(.mCard,.pfM){animation:mvSheet .34s var(--mv-ease) backwards}
  .lgModal:not([hidden]) .lgWin{animation:mvSheet .34s var(--mv-ease) backwards}
  .mvStag>:is(.pcard,.mdC,.mCardIt,.pfC,.wdC){animation-duration:.36s;animation-delay:calc(min(var(--i,0),6) * 30ms)}
}
@media (prefers-reduced-motion:reduce){
  .screen.mvScr,.screen.mvScr *,.mvStag>*,.mvPick,.mvPick::after,.mOv.open,.mOv.open>*,.lgModal *,.pfUpS .pfUpC,.wdDlg .wdDlgC,.mDock .cta,:is(.pfIm,.pfDrop.has,.olPrev,.ofPrev,.wrProd) img{animation:none!important}
  :is(.cta,.backb,.pcard,.mdC,.mCardIt,.wdC):active{transform:none}
}