/* Motion layer: Emil Kowalski principles (fast, ease-out, purposeful, interruptible, reduced-motion aware). Loaded last on every page. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}

/* Scroll reveal: seen once per visit, so it may exist, but short travel and under half a second */
.reveal{opacity:0;transform:translateY(8px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}
/* Stagger card grids 50ms apart; grid fades as one (hairline background never shows through), cards settle in sequence */
.reveal.stagger{transform:none}
.reveal.stagger>*{transform:translateY(10px);transition:transform 420ms var(--ease-out)}
.reveal.stagger.in>*{transform:none}
.reveal.stagger.in>*:nth-child(2){transition-delay:50ms}
.reveal.stagger.in>*:nth-child(3){transition-delay:100ms}
.reveal.stagger.in>*:nth-child(4){transition-delay:150ms}
.reveal.stagger.in>*:nth-child(5){transition-delay:200ms}
.reveal.stagger.in>*:nth-child(n+6){transition-delay:240ms}

/* Dropdowns: origin-aware, enter 180ms ease-out, exit faster at 120ms, never from nothing */
.nav-menu{transform-origin:top left;transform:translateY(-4px) scale(.98);transition:opacity 120ms ease-out,transform 120ms ease-out}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{transform:none;transition-duration:180ms;transition-timing-function:var(--ease-out)}
/* Invisible bridge across the 6px gap so the menu does not close while the pointer travels to it */
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-group>button svg{transition:transform 180ms var(--ease-out)}
.nav-group:hover>button svg,.nav-group:focus-within>button svg{transform:rotate(180deg)}

/* Press feedback on every primary and secondary action */
a.bg-accent,a.bg-ink,button.bg-accent,button.bg-ink,button[type="submit"],.elig-q-btn,#mobile-nav-toggle{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
a.bg-accent:active,a.bg-ink:active,button.bg-accent:active,button.bg-ink:active,button[type="submit"]:active,.elig-q-btn:active,#mobile-nav-toggle:active{transform:scale(.97)}

/* Accordions: chevron rotates fast, answer fades in from just above */
.chev{transition:transform 200ms var(--ease-out)}
details[open]>summary~*{animation:h2-in 220ms var(--ease-out)}

/* State changes that should not be jarring */
.elig-result.show,[data-result]:not(.hidden),#contact-result:not(.hidden),#chat-status:not(.hidden){animation:h2-in 240ms var(--ease-out)}
#mobile-nav:not(.hidden){animation:h2-in 200ms var(--ease-out)}
.prog{transition:background-color 200ms ease,box-shadow 200ms ease}

/* Rotating alert: crossfade with a 2px blur to bridge the two messages */
.alert-msg{transition:opacity 300ms ease,filter 300ms ease,visibility 300ms ease}
.alert-msg:not(.active){filter:blur(2px)}

/* Sticky CTA: specific properties only, enter on the strong ease-out */
#sticky-cta{transition-property:transform,opacity;transition-duration:260ms;transition-timing-function:var(--ease-out)}
#sticky-cta.opacity-0{transition-duration:180ms}

@keyframes h2-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes h2-fade{from{opacity:0}}

/* Hover-only motion stays off touch devices */
@media (hover:none){.group:hover .group-hover\:translate-x-0\.5{transform:none}}

/* Reduced motion: keep opacity, drop movement */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
.reveal,.reveal.stagger>*,.nav-menu,#sticky-cta{transform:none!important}
.reveal{transition:opacity 200ms ease!important}
.reveal.stagger>*{transition:none!important}
a.bg-accent:active,a.bg-ink:active,button:active{transform:none!important}
details[open]>summary~*,.elig-result.show,[data-result]:not(.hidden),#contact-result:not(.hidden),#mobile-nav:not(.hidden){animation-name:h2-fade!important}
.alert-msg:not(.active){filter:none}
}