/* Section entrance choreography. Applied only after JS adds motion-ready. */
.motion-ready .motion-target{--motion-delay:calc(var(--motion-order,0) * 70ms)}
.motion-ready .motion-copy{opacity:0;transform:translateY(32px);clip-path:inset(0 0 100% 0);transition:opacity .7s var(--motion-delay),transform .85s var(--motion-delay) cubic-bezier(.22,1,.36,1),clip-path .85s var(--motion-delay) cubic-bezier(.22,1,.36,1)}
.motion-ready .motion-copy.is-visible{opacity:1;transform:none;clip-path:inset(0)}
.motion-ready .motion-chip{opacity:0;transform:translateY(18px) scale(.92);transition:opacity .5s var(--motion-delay),transform .65s var(--motion-delay) cubic-bezier(.18,.9,.28,1.25)}
.motion-ready .motion-chip.is-visible{opacity:1;transform:none}
.motion-ready .motion-card{opacity:0;transform:translateY(55px) scale(.975);transition:opacity .7s var(--motion-delay),transform .95s var(--motion-delay) cubic-bezier(.22,1,.36,1)}
.motion-ready .motion-card.is-visible{opacity:1;transform:none}
.motion-ready .motion-frame{position:relative;opacity:0;transform:translateY(25px);clip-path:inset(0 0 35% 0 round 20px);transition:opacity .6s,transform .9s cubic-bezier(.22,1,.36,1),clip-path 1s cubic-bezier(.22,1,.36,1)}
.motion-ready .motion-frame.is-visible{opacity:1;transform:none;clip-path:inset(-2px round 20px)}
.motion-frame:after{content:'';position:absolute;z-index:20;inset:0;pointer-events:none;border-radius:inherit;background-image:linear-gradient(90deg,#ec6d32,#ec6d32),linear-gradient(180deg,#ec6d32,#ec6d32),linear-gradient(270deg,#ec6d32,#ec6d32),linear-gradient(0deg,#ec6d32,#ec6d32);background-position:left top,right top,right bottom,left bottom;background-repeat:no-repeat;background-size:0 2px,2px 0,0 2px,2px 0;opacity:.65}
.motion-ready .motion-frame.is-visible:after{animation:motionFrameDraw 1.25s .1s cubic-bezier(.65,0,.35,1) forwards}
.motion-ready .motion-rise{opacity:0;transform:translateY(24px);transition:opacity .65s var(--motion-delay),transform .8s var(--motion-delay) cubic-bezier(.22,1,.36,1)}
.motion-ready .motion-rise.is-visible{opacity:1;transform:none}
.motion-ready .modern-app,.motion-ready .project-window{will-change:transform}
.motion-ready .cap-demo.is-visible .cap-example{animation:motionInnerLeft .8s .45s both cubic-bezier(.22,1,.36,1)}
.motion-ready .cap-demo.is-visible .cap-console{animation:motionInnerRight .8s .55s both cubic-bezier(.22,1,.36,1)}
.motion-ready .diff-compare.is-visible .modern-app{animation:motionInterfaceBuild .9s .35s both cubic-bezier(.18,.9,.25,1.1)}
.motion-ready .proof-profile.is-visible .proof-avatar{animation:motionBadgeBuild .8s .35s both cubic-bezier(.18,.9,.25,1.3)}
.motion-ready .project-feature.is-visible .project-window{animation:motionProjectBuild 1.1s .35s both cubic-bezier(.22,1,.36,1),projectFloat 5s 1.5s ease-in-out infinite}
@keyframes motionFrameDraw{0%{background-size:0 2px,2px 0,0 2px,2px 0}25%{background-size:100% 2px,2px 0,0 2px,2px 0}50%{background-size:100% 2px,2px 100%,0 2px,2px 0}75%{background-size:100% 2px,2px 100%,100% 2px,2px 0}100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%;opacity:0}}
@keyframes motionInnerLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes motionInnerRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes motionInterfaceBuild{from{opacity:0;transform:perspective(800px) rotateX(8deg) translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes motionBadgeBuild{from{opacity:0;transform:scale(.35) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes motionProjectBuild{from{opacity:0;transform:perspective(1000px) rotateY(-16deg) translateX(60px) scale(.9)}to{opacity:1;transform:perspective(1000px) rotateY(-4deg) rotateX(2deg)}}
@media(max-width:680px){.motion-ready .motion-copy{transform:translateY(22px)}.motion-ready .motion-card{transform:translateY(34px)}.motion-ready .motion-frame{clip-path:inset(0 0 22% 0 round 16px)}.motion-ready .cap-demo.is-visible .cap-example,.motion-ready .cap-demo.is-visible .cap-console{animation-name:motionInnerUp}.motion-ready .project-feature.is-visible .project-window{animation:motionProjectMobile .9s .25s both cubic-bezier(.22,1,.36,1),projectFloatMobile 5s 1.3s ease-in-out infinite}@keyframes motionInnerUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes motionProjectMobile{from{opacity:0;transform:translateY(35px) scale(.94)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.motion-target{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}.motion-frame:after{display:none!important}}