/* MyLex motion layer, 28.10.2026.
   Harvey's motion language, measured on harvey.ai (21.10 and 28.10):
   reveal = fade + rise 32px; hero media = rise 32px + scale .8 -> 1; easing --ease-out cubic-bezier(0,.7,.3,1),
   crossfades and accordions .3-.5s cubic-bezier(.7,0,.3,1); scenario tabs advance with a 7.5s linear progress bar.
   Everything here is off under prefers-reduced-motion: the .motion class is never set then. */
:root{--ease-out:cubic-bezier(0,.7,.3,1);--ease-in-out:cubic-bezier(.7,0,.3,1);--ease-soft:cubic-bezier(.3,.3,.3,1)}

/* Page shell: main stays hidden only until app.js has tagged the reveals (fallback: 2.5s, set in <head>). */
.motion:not(.motion-ready) main{opacity:0}

/* Scroll reveals (Harvey motion-safe:opacity-0 + translateY(32px)). */
.motion [data-reveal]{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
.motion [data-reveal=media]{transform:translate3d(0,40px,0) scale(.94)}
.motion [data-reveal=hero-media]{transform:translate3d(0,32px,0) scale(.8);transform-origin:50% 0;transition-duration:1s,1.4s}
.motion [data-reveal=fade]{transform:none}
.motion [data-reveal].is-in{opacity:1;transform:none}

/* Brand hero (home) and company photo band: slow settle of the photograph, parallax via the separate translate property. */
.motion .brand-hero-photo,.motion .co-first .firm-background{animation:photo-settle 2.4s var(--ease-out) both;will-change:translate}
.motion .co-first .firm-background{animation-name:photo-settle-dim}
@keyframes photo-settle{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
@keyframes photo-settle-dim{from{opacity:0;scale:1.08}to{opacity:.62;scale:1}}

/* Scroll-linked product frames: grow into place as they enter (Harvey platform frames). Values come from app.js. */
.motion .brand-hero{overflow:hidden}
.motion [data-scrub]{transform-origin:50% 100%;will-change:transform}

/* Header: hairline once the page moves; menus open with Harvey's .3s in-out. */
.header{transition:background .3s var(--ease-soft),color .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.header.is-scrolled[data-theme=light]{box-shadow:0 1px 0 var(--line)}
.motion .mega:not([hidden]){animation:menu-in .32s var(--ease-in-out) both}
.motion .mega:not([hidden]) .mega-link{animation:rise-sm .55s var(--ease-out) both}
.motion .mega:not([hidden]) .mega-link:nth-child(2){animation-delay:.05s}
.motion .mega:not([hidden]) .mega-link:nth-child(3){animation-delay:.1s}
.motion .mega:not([hidden]) .mega-link:nth-child(4){animation-delay:.15s}
.motion .mobile-menu:not([hidden]){animation:menu-in .3s var(--ease-in-out) both}
.nav-trigger svg{transition:transform .3s var(--ease-in-out)}.nav-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes rise-sm{from{opacity:0;transform:translateY(10px)}}

/* Arrows travel on hover (Harvey links and mega menu). */
.text-button span[aria-hidden],.mega-link b span,.hero-product-link span,.deployment-copy a span,.pp-points a span,.solution-copy a span{display:inline-block;transition:transform .4s var(--ease-out)}
.text-button:hover span[aria-hidden],.mega-link:hover b span,.deployment-copy a:hover span,.pp-points a:hover span,.solution-copy a:hover span{transform:translateX(4px)}
a:hover span[data-arrow=ne],button:hover span[data-arrow=ne]{transform:translate(3px,-3px)}
.hero-product-link:hover span{transform:translateY(4px)}
.button{transition:background .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft),transform .3s var(--ease-out)}
.button:active{transform:scale(.98)}

/* Product frames: a gentle zoom of the screen inside its clipped frame. */
.product-preview img,.pp-frame-button img,.wide-media img,.firm-feature .firm-background{transition:filter .2s,transform 1.2s var(--ease-out)}
.product-preview:hover img,.pp-frame-button:hover img,.wide-media button:hover img{transform:scale(1.015)}
.co-team li>img{transition:transform 1s var(--ease-out),filter .4s}
.co-team li:hover>img{transform:translateY(-4px)}

/* Scenario tabs: full-width track with Harvey's autoplay progress; panels cross in. */
.scenario-tab[aria-selected=true]:before{width:100%;background:var(--dark-line)}
.scenario-tab:after{content:'';position:absolute;left:0;top:-1px;width:100%;height:2px;background:#fff;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.scenario-tab[aria-selected=true]:after{transform:scaleX(1);transition:transform .6s var(--ease-out)}
.scenario-tabs.is-autoplay .scenario-tab[aria-selected=true]:after{transition:none;animation:tab-progress 7.5s linear both}
.scenario-tabs.is-autoplay.is-paused .scenario-tab[aria-selected=true]:after{animation-play-state:paused}
@keyframes tab-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scenario-tab-title{transition:color .3s var(--ease-soft)}
.motion .scenario-tab[aria-selected=true] .scenario-description{animation:rise-sm .5s var(--ease-out) both}
.motion .scenario-panel.is-entering{animation:panel-in .7s var(--ease-out) both}
@keyframes panel-in{from{opacity:0;transform:translateY(16px) scale(.985)}}

/* FAQ: height is animated by app.js (Harvey accordion .3s in-out); the chevron follows. */
.sec-faq-item summary svg{transition:transform .3s var(--ease-in-out)}
.sec-faq-answer{overflow:hidden}

/* Interface fragments play like Harvey's product demos: sequence, typing, highlights. */
.motion [data-ui] .ui-seq{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * var(--step,.12s) + var(--base,0s))}
.motion [data-ui].ui-play .ui-seq{opacity:1;transform:none}
.motion [data-ui] .ui-pop{opacity:0;transform:scale(.9);transition:opacity .4s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * .08s + var(--base,0s))}
.motion [data-ui].ui-play .ui-pop{opacity:1;transform:none}
.motion [data-ui] .role-menu{opacity:0;transform:translateY(-6px) scale(.96);transform-origin:100% 0;transition:opacity .4s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--base,1s)}
.motion [data-ui].ui-play .role-menu{opacity:1;transform:none}
.motion [data-ui] mark{background:linear-gradient(#f3e6c8,#f3e6c8) no-repeat 0 0/0% 100%;transition:background-size 1.1s var(--ease-in-out) var(--base,.5s)}
.motion [data-ui].ui-play mark{background-size:100% 100%}
.motion [data-ui] .pd{background:linear-gradient(#f6e3e1,#f6e3e1) no-repeat 0 0/0% 100%;transition:background-size .8s var(--ease-in-out);transition-delay:calc(var(--i,0) * .15s + var(--base,.3s))}
.motion [data-ui].ui-play .pd{background-size:100% 100%}
.motion [data-ui] .mask-arrow:before{transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-in-out);transition-delay:inherit}
.motion [data-ui].ui-play .mask-arrow:before{transform:none}
.motion [data-ui].ui-play .ui-btn-dark{animation:press 1.2s var(--ease-in-out) var(--base,2s) both}
@keyframes press{0%,100%{box-shadow:0 0 0 0 #0e294400}40%{box-shadow:0 0 0 6px #0e294424}}
.typing-ghost{opacity:0}
.typing-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* Page transitions: cross-document View Transitions for the multipage site; the single file uses the same names. */
@view-transition{navigation:auto}
.header{view-transition-name:site-header}
::view-transition-old(root){animation:page-out .28s var(--ease-in-out) both}
::view-transition-new(root){animation:page-in .6s var(--ease-out) both}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(24px)}}

@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .scenario-tab[aria-selected=true]:after,.nav-trigger svg,.button,.product-preview img,.pp-frame-button img,.wide-media img{transition:none}
}