/* United Flex premium motion: the Fund VI grammar of Melissa (facility-premium.*) and the homepage
   (home-premium.*) on every other page family. Saqib, 2026-09-29: every page gets Melissa's
   animation feel; the visual design stays Mart's.

   Unlayered and loaded after site-consistency.css (and bay-hero.css) through the `late` slot in
   scripts/build.py on every family except facility and home, which run their own engines. The hooks
   are data attributes written at build time by scripts/premium_motion.py (data-mx="<tokens>"; the
   vocabulary is documented there).

   Start states exist only under html.mx-js, which an inline head script adds unless reduced motion is
   requested and removes 2.4s after navigation start if premium-motion.js never starts; they sit inside
   prefers-reduced-motion:no-preference, carry no !important (GSAP's inline styles must always win)
   and stop applying once the engine marks an element [data-mx-done]. Offsets use the CSS translate
   and scale properties, so hover, press and the shared `transform:none` rules never fight the engine.
   Start states are scoped `html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=token]`
   (0,5,2 or more), so they beat the shared (0,3,0) finish rules without !important; the measuring pass
   (html.mx-measure) lifts them for one synchronous read of the authored styles. */

body.uf-site[data-page-family]{--mx-ease:cubic-bezier(.22,1,.36,1);--mx-ease-io:cubic-bezier(.65,0,.35,1)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ---------- header: sticky, glass after 40px, tucks away scrolling down past 600px (Fund VI) ---------- */
body.uf-site[data-page-family] .uf-header{position:sticky;top:0;transition:transform .55s var(--mx-ease),background-color .4s ease;will-change:transform}
body.uf-site[data-page-family] .uf-header.mx-hdr-scrolled{background:rgba(1,20,30,.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
body.uf-site[data-page-family] .uf-header.mx-hdr-hide{transform:translateY(-100%)}
body.uf-site[data-page-family] .uf-header:focus-within{transform:none}

/* ---------- interaction states in Melissa's timing; Mart's colours and shapes are unchanged ---------- */
@media (prefers-reduced-motion:no-preference){
  /* press confirm (Fund VI .btn:active) on the shared actions */
  body.uf-site[data-page-family] main :is(.btn,.uf-button){transition:background-color .2s,border-color .2s,color .2s,transform .16s ease-out}
  body.uf-site[data-page-family] main :is(.btn,.uf-button):active{transform:scale(.98)}
  /* the shared question groups open and close on the Melissa accordion curve */
  body.uf-site[data-page-family] :is(.uf-site[data-page=faq] .qa .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it .bd{transition:grid-template-rows .5s var(--mx-ease),opacity .35s ease}
  body.uf-site[data-page-family] :is(.uf-site[data-page=faq] .qa .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it{transition:background-color .4s var(--mx-ease),border-radius .4s var(--mx-ease),margin .4s var(--mx-ease)}
  body.uf-site[data-page-family] :is(.uf-site[data-page=faq] .qa .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q h3{transition:color .35s ease}
  body.uf-site[data-page-family] :is(.uf-site[data-page=faq] .qa .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl{transition:background-color .4s var(--mx-ease)}
  body.uf-site[data-page-family] :is(.uf-site[data-page=faq] .qa .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::after{transition:transform .45s var(--mx-ease),opacity .35s ease}
}

/* ---------- counters: the markup carries the final value; digits keep one width while they count ---------- */
body.uf-site[data-page-family] [data-mx~=count]{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- line masks: room for descenders without changing the heading's height ---------- */
body.uf-site[data-page-family] .mx-line-mask{padding-bottom:.06em;margin-bottom:-.06em}

/* ---------- motion start states (only while the engine runs; reduced motion never hides) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=lines]:not([data-mx-done]){visibility:hidden}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=in]:not([data-mx-done]){opacity:0;translate:0 24px}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=rise]:not([data-mx-done]){opacity:0;translate:0 45px}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=stagger]>:not([data-mx-done]){opacity:0;translate:0 22px}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=rows]>:not([data-mx-done]){opacity:0;translate:0 18px}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=steps]>:not([data-mx-done]){opacity:0;translate:0 30px}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=steps] [data-mx~=track]:not([data-mx-done]){scale:var(--mx-settle,0) 1;transform-origin:0 50%}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=clip]:not([data-mx-done]){clip-path:inset(0 0 100% 0)}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=clip][data-mx-from=left]:not([data-mx-done]){clip-path:inset(0 100% 0 0)}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=clip]:not([data-mx~=still]):not([data-mx-done])>img{scale:var(--mx-settle,1.12)}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=settle]:not([data-mx-done]){scale:var(--mx-settle,1.1)}
  html.mx-js:not(.mx-measure) body.uf-site[data-page-family] [data-mx~=draw]:not([data-mx-done]) :is(path,line,polyline,polygon){stroke-dasharray:100 100;stroke-dashoffset:100}
  /* Rows that rise inside a scrollable table region must not flash a vertical scrollbar. */
  html.mx-js body.uf-site[data-page-family] .uf-table-scroll:has(> table > [data-mx~=rows]){overflow-y:hidden}
}

/* Until an element finishes, it carries no CSS transition on the properties the engine drives: a
   stylesheet transition must never smooth or delay GSAP's frames, and when the head guard gives up
   (engine blocked) the start states must drop at once rather than fade out on a source delay.
   Colour and border hovers keep their transitions; finished elements get all of theirs back. */
body.uf-site[data-page-family] :is([data-mx~=in],[data-mx~=rise],[data-mx~=stagger]>*,[data-mx~=rows]>*,[data-mx~=steps]>*,[data-mx~=clip],[data-mx~=settle]):not([data-mx-done]),
body.uf-site[data-page-family] [data-mx~=parallax]{transition-property:color,background-color,border-color,box-shadow,filter,outline-color,text-decoration-color}

/* Measuring pass: layout and authored clip shapes without any motion offsets (added and removed
   inside one task, so it is never painted). */
html.mx-measure body.uf-site[data-page-family] :is([data-mx~=in],[data-mx~=rise],[data-mx~=stagger]>*,[data-mx~=rows]>*,[data-mx~=steps]>*,[data-mx~=settle],[data-mx~=parallax],[data-mx~=band] :is(img,video),.mx-line){transform:none!important;translate:none!important;scale:none!important}

/* ---------- paused (WCAG 2.2.2 control, body[data-uf-motion-paused=true]): the finished page ---------- */
body.uf-site[data-page-family][data-uf-motion-paused=true] :is([data-mx~=in],[data-mx~=rise],[data-mx~=stagger]>*,[data-mx~=rows]>*,[data-mx~=steps]>*,.mx-line){opacity:1!important;translate:none!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] .mx-line{transform:none!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] [data-mx~=lines]{visibility:visible!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] [data-mx~=clip]:not([data-mx-done]){clip-path:none!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] :is([data-mx~=settle],[data-mx~=clip]>img,[data-mx~=steps] [data-mx~=track]){scale:none!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] [data-mx~=draw] :is(path,line,polyline,polygon){stroke-dashoffset:0!important}
body.uf-site[data-page-family][data-uf-motion-paused=true] :is([data-mx~=parallax],[data-mx~=band] :is(img,video)){transform:none!important}

@media (prefers-reduced-motion:reduce){
  body.uf-site[data-page-family] .uf-header{transition-duration:.01ms}
}