/* Ambient motion tells the visual story; interactions acknowledge intent. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--motion-fast:160ms;--motion-ui:240ms}
.button,.nav-cta,.circle-button{transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) ease}
.button span,.nav-cta span,.text-link span{display:inline-block;transition:transform var(--motion-ui) var(--ease-out)}
nav a,.text-link{position:relative}nav a:after,.text-link:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--motion-ui) var(--ease-out)}
.underlined:after{transform-origin:left;transition:transform var(--motion-ui) var(--ease-out)}
.hero-art img{animation:glass-drift 16s ease-in-out infinite alternate;transform-origin:55% 60%}
@keyframes glass-drift{from{transform:scale(1.015) translateY(0)}to{transform:scale(1.055) translateY(-5px)}}
.shape-motif{position:relative;display:inline-block;width:23px;height:23px;flex:0 0 23px}.shape-motif i{position:absolute;inset:3px;border:1px solid #526a3a;border-radius:50%;animation:shape-resolve 9s var(--ease-in-out) infinite;transform-origin:center}.shape-motif i:nth-child(2){animation-delay:-3s;opacity:.65}.shape-motif i:nth-child(3){animation-delay:-6s;opacity:.4}
@keyframes shape-resolve{0%,100%{transform:rotate(0deg) scaleX(.5) scaleY(1)}35%{transform:rotate(60deg) scaleX(1) scaleY(.75)}65%{transform:rotate(120deg) scaleX(.55) scaleY(1)}}
.terminal-cursor{display:inline-block;height:9px;width:4px;background:currentColor;margin-left:5px;vertical-align:-1px;animation:cursor-blink 1.6s steps(1,end) infinite}@keyframes cursor-blink{0%,55%,100%{opacity:.7}56%,99%{opacity:0}}
.live-dot{position:relative}.live-dot:after{content:'';position:absolute;inset:-3px;border:1px solid #65843f;border-radius:50%;animation:status-breathe 4.5s ease-in-out infinite}@keyframes status-breathe{0%,100%{transform:scale(.8);opacity:0}35%{opacity:.4}75%{transform:scale(1.4);opacity:0}}
.demo-status{display:flex;align-items:center;gap:7px}.terminal-dots{display:inline-flex;gap:3px}.terminal-dots i{width:3px;height:3px;border-radius:50%;background:#71855b;animation:dot-sequence 3.6s ease-in-out infinite}.terminal-dots i:nth-child(2){animation-delay:.2s}.terminal-dots i:nth-child(3){animation-delay:.4s}@keyframes dot-sequence{0%,65%,100%{opacity:.3}25%,40%{opacity:1}}
.report{transition:transform var(--motion-ui) var(--ease-out)}.metric i{transform-origin:left;transition:transform 750ms var(--ease-out)}.report:not(.bars-ready) .metric i{transform:scaleX(.04)}.metric:nth-child(2) i{transition-delay:50ms}.metric:nth-child(3) i{transition-delay:100ms}.metric:nth-child(4) i{transition-delay:150ms}
.role-tabs button,.report-tabs button{transition:background var(--motion-fast) ease,transform var(--motion-fast) var(--ease-out)}.role-tabs button:active,.report-tabs button:active,.circle-button:active,.nav-cta:active{transform:scale(.97)}
.principle-symbol{transition:transform var(--motion-ui) var(--ease-out);transform-origin:left center}.faq summary span{transition:transform var(--motion-ui) var(--ease-out)}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:8px 0;font-size:9px;white-space:nowrap;color:var(--muted)}.motion-toggle span{width:9px;color:var(--ink)}
.reveal{transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.motion-paused *, .motion-paused *:before,.motion-paused *:after,.page-away *, .page-away *:before,.page-away *:after{animation-play-state:paused!important}.offscreen,.offscreen:after,.offscreen i,.offscreen img,.offscreen .terminal-cursor{animation-play-state:paused!important}
.motion-paused .reveal.pending{opacity:1;transform:none}.motion-paused .metric i{transform:none!important}.motion-paused *{transition-duration:0ms!important}.motion-paused .terminal-cursor{opacity:.6;animation:none}
@media(hover:hover) and (pointer:fine){.button:hover,.nav-cta:hover{transform:translateY(-2px)}.button:hover span,.nav-cta:hover span{transform:translate(3px,-3px)}nav a:hover:after,.text-link:hover:after{transform:scaleX(1);transform-origin:left}.text-link:hover span{transform:translate(2px,2px)}.underlined:hover:after{transform:rotate(0deg) scaleX(1.03) scaleY(1.7)}.report:hover{transform:rotate(0deg) translateY(-3px)}.circle-button:hover{transform:rotate(45deg)}.principles>div:hover .principle-symbol{transform:rotate(-12deg) translateY(-2px)}}
@media(hover:none){.button:hover{transform:none}}
@media(max-width:767px){.demo-status{gap:4px}.terminal-dots{gap:2px}.terminal-dots i{width:2px;height:2px}footer .motion-toggle{grid-column:1;grid-row:3;justify-self:start}footer>a:last-child{grid-column:2;grid-row:3}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hero-art img,.metric i{transform:none!important}.terminal-cursor{opacity:.6}.report:hover{transform:rotate(-1.5deg)}.button:hover,.nav-cta:hover,.button:hover span,.nav-cta:hover span,.text-link:hover span,.circle-button:hover,.principles>div:hover .principle-symbol{transform:none}.report:not(.bars-ready) .metric i{transform:none}}
