/* LoanWick sign-in + setup motion. CSS only, presentation only: no selectors change layout,
   every entrance uses backwards fill (nothing stays transformed afterwards), and all of it is
   off under prefers-reduced-motion. Keyed to stable ids (#login, #obWrap, #ob_title). */
:root{--lwm-ease:cubic-bezier(.16,1,.3,1);--lwm-ease-io:cubic-bezier(.65,0,.35,1)}
@media screen and (prefers-reduced-motion:no-preference){
  /* Sign-in card rises in, then its parts follow */
  html body #login .lcard{animation:lwm-o .7s ease backwards,lwm-card 1s var(--lwm-ease) backwards}
  html body #login .lcard>*{animation:lwm-o .7s ease backwards,lwm-t 1s var(--lwm-ease) backwards;animation-delay:.12s}
  html body #login .lcard>:nth-child(2){animation-delay:.18s}
  html body #login .lcard>:nth-child(3){animation-delay:.24s}
  html body #login .lcard>:nth-child(4){animation-delay:.3s}
  html body #login .lcard>:nth-child(n+5){animation-delay:.36s}
  html body #login .auth-heading h1{animation:lwm-o .8s ease .16s backwards,lwm-t-blur 1s var(--lwm-ease) .16s backwards}
  /* Fields: label follows focus, ring eases in */
  html body #login label{transition:color .2s ease}
  html body #login .auth-field:focus-within label{color:var(--accent-d,#416b94)}
  html body #login input{transition:border-color .2s ease,box-shadow .35s var(--lwm-ease),background .2s ease}
  html body #login .auth-action,html body #login .auth-support a,html body #login .auth-legal a,html body #login .auth-visibility{transition:color .2s ease,background .2s ease,opacity .2s ease}
  /* Submit: light sweep on hover, press feedback */
  html body #login .auth-submit{position:relative;overflow:hidden;isolation:isolate;transition:background .2s ease,box-shadow .35s ease,transform .35s var(--lwm-ease)}
  html body #login .auth-submit::after{content:"";position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-110%)}
  html body #login .auth-submit:hover:not(:disabled)::after{transition:transform .9s var(--lwm-ease);transform:translateX(110%)}
  html body #login .auth-submit:hover:not(:disabled){box-shadow:0 10px 26px rgba(30,62,90,.22)}
  html body #login .auth-submit:active:not(:disabled){transform:scale(.98)}
  /* Messages (errors, reset notices) slide in when they appear */
  html body #login .auth-notice:not(:empty){animation:lwm-o .35s ease backwards,lwm-t-small .5s var(--lwm-ease) backwards}

  /* Setup (onboarding): each step card enters as it is rendered; its sections follow */
  html body #obWrap{animation:lwm-o .3s ease backwards}
  html body #obWrap>.card{animation:lwm-o .5s ease backwards,lwm-card .8s var(--lwm-ease) backwards}
  html body #obWrap>.card>*{animation:lwm-o .5s ease backwards,lwm-t-small .7s var(--lwm-ease) backwards;animation-delay:.08s}
  html body #obWrap>.card>:nth-child(3){animation-delay:.12s}
  html body #obWrap>.card>:nth-child(4){animation-delay:.16s}
  html body #obWrap>.card>:nth-child(5){animation-delay:.2s}
  html body #obWrap>.card>:nth-child(n+6){animation-delay:.24s}
  html body #obWrap #ob_title{animation:lwm-o .6s ease .1s backwards,lwm-t-blur .9s var(--lwm-ease) .1s backwards}
  html body #obWrap .btn{transition:transform .35s var(--lwm-ease),filter .2s ease,background .2s ease,box-shadow .3s ease}
  html body #obWrap .btn:active:not(:disabled){transform:scale(.98)}
  html body #obWrap input,html body #obWrap select,html body #obWrap textarea{transition:border-color .2s ease,box-shadow .35s var(--lwm-ease)}

  /* Page transitions to and from the public site (cross-document View Transitions) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:lwm-o-out .26s var(--lwm-ease-io) both}
  ::view-transition-new(root){animation:lwm-o .45s var(--lwm-ease) both}
}
@keyframes lwm-o{from{opacity:0}}
@keyframes lwm-o-out{to{opacity:0}}
@keyframes lwm-card{from{transform:translate3d(0,18px,0) scale(.985)}}
@keyframes lwm-t{from{transform:translate3d(0,12px,0)}}
@keyframes lwm-t-small{from{transform:translate3d(0,8px,0)}}
@keyframes lwm-t-blur{from{transform:translate3d(0,10px,0);filter:blur(4px)}}
