/* LoanWick site motion (shared by public pages). Progressive enhancement only:
   - first-paint hero entrances are pure CSS with backwards fill (no JS gate, nothing waits on JS);
   - scroll reveals hide only elements that site-motion.js marked while they were below the fold;
   - transform/opacity only; the large-text LCP element moves but is never hidden;
   - everything is off under prefers-reduced-motion and when the homepage motion toggle is paused. */
:root{--lwm-ease:cubic-bezier(.16,1,.3,1);--lwm-ease-io:cubic-bezier(.65,0,.35,1);--lwm-accent:#638bb2;--lwm-glow:rgba(99,139,178,.16)}

/* Existing marketing.js/.reveal and homepage entry animation are superseded by the system below. */
.reveal{opacity:1;transform:none}
html[data-lw-motion=on] .lo-home [data-lw-entered=true]{animation:none}

/* Split-word headings. Padding/negative margin keeps glyphs unclipped with no layout change. */
.lwm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .18em;margin:-.1em -.05em -.18em}
.lwm-wi{display:inline-block;transform-origin:0 100%}

@media screen and (prefers-reduced-motion:no-preference){
  /* ---------- Hero entrance (first paint) ---------- */
  html:not([data-lw-motion=paused]) [data-lwm-hero] .lwm-wi{animation:lwm-word 1.05s var(--lwm-ease) backwards;animation-delay:calc(.05s + var(--i,0) * .055s)}
  html:not([data-lw-motion=paused]) :is(.hero,.page-hero,.lab-hero,.lwm-404) :is(.breadcrumbs,.eyebrow){animation:lwm-o .8s ease backwards,lwm-t-blur 1s var(--lwm-ease) backwards}
  html:not([data-lw-motion=paused]) :is(.hero,.page-hero,.lab-hero,.lwm-404) .eyebrow{animation-delay:.06s}
  /* LCP-sized copy slides but is never transparent */
  html:not([data-lw-motion=paused]) :is(.hero .lede,.page-hero .lede,.lab-hero-inner>p,main>div.hero p.hero-copy,.lwm-404 .lede){animation:lwm-lift 1.1s var(--lwm-ease) .12s backwards}
  html:not([data-lw-motion=paused]) :is(.hero-actions,.page-hero-actions,.lab-hero-actions,.lwm-404-actions){animation:lwm-o .8s ease .4s backwards,lwm-t-blur 1.1s var(--lwm-ease) .4s backwards}
  html:not([data-lw-motion=paused]) :is(.lo-reassurance,.hero-price,.hero-proof,.lab-proof,main>div.hero .meta,.lw-motion-control,.lwm-404-links){animation:lwm-o .8s ease .52s backwards,lwm-t-blur 1.1s var(--lwm-ease) .52s backwards}
  html:not([data-lw-motion=paused]) .hero-price{animation-delay:.5s}
  html:not([data-lw-motion=paused]) .hero-proof{animation-delay:.6s}
  html:not([data-lw-motion=paused]) .lw-motion-control{animation-delay:.7s}
  html:not([data-lw-motion=paused]) .pricing-facts>article{animation:lwm-o .8s ease backwards,lwm-t 1.1s var(--lwm-ease) backwards;animation-delay:.34s}
  html:not([data-lw-motion=paused]) .pricing-facts>article:nth-child(2){animation-delay:.42s}
  html:not([data-lw-motion=paused]) .pricing-facts>article:nth-child(3){animation-delay:.5s}
  html:not([data-lw-motion=paused]) .hero .product-window{animation:lwm-o 1s ease .22s backwards,lwm-window 1.3s var(--lwm-ease) .22s backwards}

  /* ---------- Scroll reveals (marked by JS while below the fold) ---------- */
  [data-lwm=r]:not(.lwm-in){opacity:0}
  html:root body [data-lwm=r].lwm-in{animation:lwm-o .9s ease var(--lwm-d,0s) backwards,lwm-t 1.1s var(--lwm-ease) var(--lwm-d,0s) backwards}
  [data-lwm-split]:not(.lwm-in) .lwm-wi{transform:translate3d(0,108%,0) rotate(4deg)}
  [data-lwm-split] .lwm-wi{transition:transform 1s var(--lwm-ease);transition-delay:calc(.08s + var(--i,0) * .045s)}

  /* Closing statement lit word by word while scrolling */
  [data-lwm-scrub] .lwm-sw{transition:opacity .4s ease}
  [data-lwm-scrub] .lwm-sw:not(.is-lit){opacity:.26}

  /* Process: the step nearest the middle of the screen is emphasised */
  .process-list>.process-step{transition:border-color .4s ease,box-shadow .6s var(--lwm-ease),background .4s ease}
  .process-list>.process-step::before{transition:transform .6s var(--lwm-ease),box-shadow .6s ease}
  .process-list>.process-step.lwm-active{border-color:rgba(99,139,178,.45);box-shadow:0 18px 44px rgba(45,64,78,.10)}
  .process-list>.process-step.lwm-active::before{transform:scale(1.07);box-shadow:0 10px 26px rgba(70,111,151,.32)}

  /* Home setup steps: number rises after its card */
  .lo-steps>li.lwm-in .lo-step-number{display:inline-block;animation:lwm-o .7s ease backwards,lwm-t .9s var(--lwm-ease) backwards;animation-delay:calc(var(--lwm-d,0s) + .18s)}

  /* Pricing calculator result swap */
  .lwm-swap{animation:lwm-swap .55s var(--lwm-ease)}

  /* Mobile navigation items cascade in */
  .mobile-nav.open .container>*{animation:lwm-o .4s ease backwards,lwm-down .5s var(--lwm-ease) backwards}
  .mobile-nav.open .container>:nth-child(2){animation-delay:.03s}.mobile-nav.open .container>:nth-child(3){animation-delay:.06s}
  .mobile-nav.open .container>:nth-child(4){animation-delay:.09s}.mobile-nav.open .container>:nth-child(5){animation-delay:.12s}
  .mobile-nav.open .container>:nth-child(6){animation-delay:.15s}.mobile-nav.open .container>:nth-child(n+7){animation-delay:.18s}

  /* FAQ plus sign turns into a minus */
  .faq summary::after{display:inline-block;transition:transform .45s var(--lwm-ease)}
  .faq details[open] summary::after{transform:rotate(180deg)}

  /* Ambient light in page heroes (injected after fonts load; positions don't depend on hero height) */
  .lwm-has-ambient{position:relative;isolation:isolate}
  .lwm-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;opacity:0;transition:opacity 1.6s ease}
  .lwm-ambient.is-on{opacity:1}
  .lwm-ambient i{position:absolute;display:block;border-radius:50%;will-change:transform}
  .lwm-ambient .a1{width:min(64vw,780px);height:min(64vw,780px);right:max(-16vw,-200px);top:-300px;background:radial-gradient(closest-side,rgba(123,168,202,.26),rgba(156,187,213,.08) 55%,transparent);animation:lwm-drift1 22s var(--lwm-ease-io) infinite alternate}
  .lwm-ambient .a2{width:min(46vw,560px);height:min(46vw,560px);left:max(-14vw,-170px);top:120px;background:radial-gradient(closest-side,rgba(205,164,111,.18),rgba(230,200,153,.05) 55%,transparent);animation:lwm-drift2 26s var(--lwm-ease-io) infinite alternate}
  .lwm-ambient .a3{width:min(36vw,440px);height:min(36vw,440px);right:18vw;top:160px;background:radial-gradient(closest-side,rgba(122,165,150,.15),transparent 70%);animation:lwm-drift3 30s var(--lwm-ease-io) infinite alternate}
  .lwm-off .lwm-ambient i,.lwm-off .lw-ambient span{animation-play-state:paused!important}
  html[data-lw-motion=paused] .lwm-ambient i{animation:none!important}
  /* Homepage: anchor the blue light in px so font swap can't move it (was a CLS source on mobile) */
  @media(max-width:820px){.lo-home .lw-ambient-blue{top:340px}}

  /* ---------- Page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:lwm-vt-out .26s var(--lwm-ease-io) both}
  ::view-transition-new(root){animation:lwm-vt-in .52s var(--lwm-ease) both}
  .site-header,.site-head{view-transition-name:lw-header}
  ::view-transition-group(lw-header){animation:none}
}

/* ---------- Micro-interactions ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .35s var(--lwm-ease),filter .2s ease,background .2s ease,border-color .2s ease,box-shadow .35s ease}
  .btn:active{transform:scale(.97)!important;transition-duration:.12s}
  .btn span[aria-hidden=true]:not(.lw-call-wave),.text-link span[aria-hidden=true]{display:inline-block;transition:transform .35s var(--lwm-ease)}
  .btn:is(:hover,:focus-visible) span[aria-hidden=true]:not(.lw-call-wave),.text-link:is(:hover,:focus-visible) span[aria-hidden=true]{transform:translateX(3px)}
  .text-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--lwm-ease),color .2s ease}
  .text-link:is(:hover,:focus-visible){background-size:100% 1.5px;text-decoration:none}
  .nav-link{transition:color .2s ease,background .25s ease,transform .35s var(--lwm-ease)}
  .footer-col a,.foot nav a,.nav-links a{transition:color .2s ease,transform .35s var(--lwm-ease),background .2s ease}
  .footer-col a:hover{transform:translateX(3px)}
  input,select,textarea{transition:border-color .2s ease,box-shadow .35s var(--lwm-ease),background .2s ease}
  details>summary{transition:color .2s ease}
  .toc a{transition:background .25s ease,color .2s ease,box-shadow .35s var(--lwm-ease)}
  .toc a.lwm-active{background:#f1eae2;color:var(--accent,#416b94);box-shadow:inset 2px 0 0 var(--accent,#416b94)}
  .lwm-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
  .lwm-progress i{display:block;height:100%;background:linear-gradient(90deg,#638bb2,#86a9ca 60%,#a87543);transform-origin:0 50%;transform:scaleX(var(--p,0));will-change:transform}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* primary buttons: cursor-following shine; hero/CTA buttons are also gently magnetic (JS) */
  .btn-primary,.btn-accent{position:relative;isolation:isolate;overflow:hidden}
  .btn-primary::before,.btn-accent::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.34),transparent 62%);opacity:0;transition:opacity .25s ease}
  .btn-primary:hover::before,.btn-accent:hover::before{opacity:1}
  .lwm-magnetic{transition:transform .5s var(--lwm-ease),filter .2s ease,background .2s ease,border-color .2s ease,box-shadow .35s ease}
  /* spotlight cards */
  .lwm-spot{isolation:isolate;transition:transform .5s var(--lwm-ease),box-shadow .5s var(--lwm-ease),border-color .3s ease,background .3s ease}
  .lwm-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--lwm-glow),transparent 60%);opacity:0;transition:opacity .35s ease}
  .lwm-spot:hover{transform:translate3d(0,-4px,0);border-color:rgba(99,139,178,.4);box-shadow:0 22px 50px rgba(45,64,78,.12)}
  .lwm-spot:hover::before{opacity:1}
  .trust-strip .lwm-spot::before,.metric-card-featured.lwm-spot::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 60%)}
  .nav-link:active,.footer-col a:active{transform:scale(.97)}
  /* hero cursor glow */
  .lwm-cursor{position:absolute;left:0;top:0;width:620px;height:620px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(99,139,178,.15),transparent 70%);transform:translate3d(var(--gx,50vw),var(--gy,30vh),0) translate(-50%,-50%);opacity:0;transition:opacity .6s ease;will-change:transform}
  .lwm-glow-on .lwm-cursor{opacity:1}
}
html[data-lw-motion=paused] :is([data-lwm],[data-lwm-split],.lwm-wi,.lwm-spot,.lwm-magnetic,.lwm-cursor){animation:none!important;transition:none!important}
html[data-lw-motion=paused] [data-lwm]{opacity:1!important}
html[data-lw-motion=paused] .lwm-wi{transform:none!important}
@media print{[data-lwm],.lwm-wi,.lwm-sw{opacity:1!important;transform:none!important;animation:none!important}.lwm-progress,.lwm-ambient{display:none}}

@keyframes lwm-word{from{transform:translate3d(0,108%,0) rotate(4deg)}}
@keyframes lwm-o{from{opacity:0}}
@keyframes lwm-t{from{transform:translate3d(var(--lwm-x,0),var(--lwm-y,32px),0)}}
@keyframes lwm-t-blur{from{transform:translate3d(0,16px,0);filter:blur(5px)}}
@keyframes lwm-lift{from{transform:translate3d(0,14px,0)}}
@keyframes lwm-window{from{transform:translate3d(0,34px,0) scale(.965)}}
@keyframes lwm-down{from{transform:translate3d(0,-8px,0)}}
@keyframes lwm-swap{from{opacity:.2;transform:translate3d(0,10px,0);filter:blur(3px)}}
@keyframes lwm-drift1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,4vw,0) scale(1.1)}100%{transform:translate3d(-2vw,8vw,0) scale(.95)}}
@keyframes lwm-drift2{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vw,-3vw,0) scale(1.12)}}
@keyframes lwm-drift3{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-7vw,-4vw,0) scale(.92)}}
@keyframes lwm-vt-out{to{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes lwm-vt-in{from{opacity:0;transform:translate3d(0,12px,0)}}