/* Motion is a progressive visual layer; all content remains usable without it. */
.motion-page-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--lime,#dcf391);z-index:120;transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.motion-panel{position:relative;isolation:isolate}
.motion-title{position:relative;isolation:isolate;width:fit-content;max-width:100%;padding-bottom:12px}
.motion-title:before{content:"";position:absolute;inset:auto -2px 18% -2px;height:24%;background:linear-gradient(90deg,#d4eb8d 0%,#d4eb8d70 100%);z-index:-1;transform:scaleX(var(--title-fill,0));transform-origin:left;transition:transform .08s linear;pointer-events:none}
.motion-title:after{content:"";position:absolute;left:0;bottom:0;width:min(160px,65%);height:3px;background:currentColor;transform:scaleX(var(--line-fill,0));transform-origin:left;pointer-events:none}
.motion-rail{position:absolute;top:40px;bottom:40px;left:clamp(8px,1.6vw,28px);width:2px;background:linear-gradient(#8da47738,#8da47708);pointer-events:none;z-index:-1;overflow:hidden}
.motion-rail:after{content:"";display:block;height:100%;background:#97b74e;transform:scaleY(var(--scene-progress,0));transform-origin:top}
.workflow-section .motion-title:before,.contact-section .motion-title:before{background:#cbe77a38}
.motion-card{position:relative;--motion-delay:0ms}
.motion-card:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#a0bc65,#d8eb9b,transparent);transform:scaleX(0);transform-origin:left;pointer-events:none;border-radius:0 0 8px 8px}
.motion-ready .motion-card.motion-entered{animation:motion-card-build .8s cubic-bezier(.2,.75,.2,1) var(--motion-delay) both}
.motion-ready .motion-card.motion-entered:after{animation:motion-rule-draw 1s cubic-bezier(.2,.75,.2,1) calc(var(--motion-delay) + .2s) both}
.motion-ready .pricing-card.motion-entered .price-line strong,.motion-ready .service-price-card.motion-entered strong{animation:motion-price-place .7s cubic-bezier(.16,.75,.2,1) calc(var(--motion-delay) + .12s) both}
.works-grid{perspective:1300px}
.motion-ready .motion-work .work-image{transform:perspective(1100px) rotateY(calc((.5 - var(--scene-progress,.5))*10deg)) rotateX(calc((.5 - var(--scene-progress,.5))*5deg));transform-origin:center;box-shadow:0 18px 38px #193c341a;transition:box-shadow .4s}
.motion-ready .motion-work:nth-child(2) .work-image{transform:perspective(1100px) rotateY(calc((var(--scene-progress,.5) - .5)*12deg)) rotateX(calc((.5 - var(--scene-progress,.5))*5deg))}
.motion-ready .motion-work .work-image img{transform:translateY(calc(-2% - var(--scene-progress,0)*6%)) scale(1.055);transition:transform .18s linear;will-change:transform}
.motion-ready .motion-work .work-image:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 32%,#fff7 49%,transparent 65%);transform:translateX(-150%);pointer-events:none}
.motion-ready .motion-work.motion-entered .work-image:before{animation:motion-work-shine 1.4s ease .3s both}
.motion-ready .motion-work .work-image:hover,.motion-ready .motion-work .work-image:focus-visible{box-shadow:0 23px 48px #193c342c}
.motion-ready .motion-work .work-image:hover img,.motion-ready .motion-work .work-image:focus-visible img{transform:translateY(-7%) scale(1.09)}
.motion-ready .service-board{animation:none;transform:perspective(1100px) rotateY(calc((.5 - var(--scene-progress,.5))*9deg)) rotateZ(calc(2deg - var(--scene-progress,.5)*3deg)) translateY(calc(10px - var(--scene-progress,.5)*20px));transition:transform .15s linear}
.motion-ready .board-steps{position:relative;padding-top:12px}
.motion-ready .board-steps:before,.motion-ready .board-steps:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:#dce7ca;pointer-events:none}
.motion-ready .board-steps:after{right:auto;width:100%;background:#829e43;transform:scaleX(var(--step-progress,.3333));transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.motion-ready .board-steps>span{animation:none;transition:background .4s,border-color .4s,box-shadow .4s,transform .4s}
.motion-ready .board-steps>span.is-motion-current{background:#d8ec9a;border-color:#a8c466;box-shadow:0 5px 12px #8ca65a24;transform:translateY(-4px)}
.motion-ready .service-board .sample-table>div{transition:background .45s,transform .45s}
.motion-ready .service-board .sample-table>div.is-motion-current{background:#edf5db;transform:translateX(4px)}
.motion-ready .service-board .sample-products i{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.motion-ready .service-board[data-motion-step="0"] .sample-products>div:first-child i{transform:rotate(-12deg) translateY(-8px);box-shadow:8px 12px 0 #d7dfc5}
.motion-ready .service-board[data-motion-step="1"] .sample-products>div:last-child i{transform:rotate(10deg) translateY(-8px);box-shadow:8px 12px 0 #e1c7b5}
.motion-ready .service-board .sample-receipt{transition:background .5s,border-color .5s}
.motion-ready .service-board[data-motion-step="2"] .sample-receipt{background:#eaf4d2;border-color:#a6be70}
.motion-ready .service-board .sample-member{transition:transform .8s cubic-bezier(.2,.75,.2,1),box-shadow .8s}
.motion-ready .service-board[data-motion-step="1"] .sample-member{transform:rotate(-1deg) translateY(-5px);box-shadow:0 18px 32px #193c3438}
.motion-ready .service-board .qr-art{transition:box-shadow .5s}
.motion-ready .service-board[data-motion-step="2"] .qr-art{box-shadow:0 0 0 6px #d8ed9c44,0 0 0 13px #d8ed9c15}
.motion-ready .sample-calendar .available{transition:background .4s,box-shadow .4s,transform .4s}
.motion-ready .sample-calendar .available.is-motion-current{background:#193c34;color:#edf5dc;transform:translateY(-3px);box-shadow:0 5px 10px #193c3422}
.motion-ready .sample-ai>div{transition:transform .5s,background .5s,border-color .5s,box-shadow .5s}
.motion-ready .sample-ai>div.is-motion-current{background:#d9ecad;border-color:#a1bb6d;transform:translateX(5px);box-shadow:-4px 0 0 #789345}
.motion-ready .sample-chart i{animation:none;transform:scaleY(.25);transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.motion-ready .service-board.motion-entered .sample-chart i{transform:scaleY(1);transition-delay:calc(var(--bar-index,0)*90ms)}
.motion-ready .service-board[data-motion-step="1"] .sample-chart i:nth-child(2n){transform:scaleY(.84)}
.motion-ready .service-board[data-motion-step="2"] .sample-chart i:nth-child(2n+1){transform:scaleY(.88)}
.motion-ready .button>span:last-child{display:inline-block;animation:motion-arrow-invite 4s ease-in-out infinite}
@keyframes motion-card-build{0%{transform:perspective(1000px) translateY(35px) rotateX(8deg);box-shadow:0 0 0 transparent}100%{transform:perspective(1000px) translateY(0) rotateX(0)}}
@keyframes motion-rule-draw{to{transform:scaleX(1)}}
@keyframes motion-price-place{0%{transform:translateY(13px);filter:blur(2px)}100%{transform:none;filter:none}}
@keyframes motion-work-shine{0%{transform:translateX(-150%)}100%{transform:translateX(150%)}}
@keyframes motion-arrow-invite{0%,70%,100%{transform:translate(0,0)}80%{transform:translate(4px,-4px)}90%{transform:translate(0,0)}}
@media(max-width:760px){.motion-ready .service-board{transform:none}.motion-ready .motion-work .work-image,.motion-ready .motion-work:nth-child(2) .work-image{transform:none}.motion-rail{left:8px;top:25px;bottom:25px}.motion-title:before{height:20%}.motion-ready .motion-card.motion-entered{animation-name:motion-card-build-mobile}@keyframes motion-card-build-mobile{from{transform:translateY(24px)}to{transform:none}}}
/* Pausing also freezes scroll-driven changes; content never depends on animation. */
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important}
.motion-paused .motion-card,.motion-paused .motion-card:after,.motion-paused .work-image:before,.motion-paused .button>span{animation:none!important}
.motion-paused [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.motion-paused .price-line strong,.motion-paused .service-price-card strong{opacity:1!important;transform:none!important;filter:none!important}
.motion-paused .motion-card:after{transform:scaleX(1)}
.motion-paused .motion-title:before,.motion-paused .motion-title:after{transform:scaleX(1)}
.motion-paused .motion-rail:after{transform:scaleY(1)}
.motion-paused .service-board,.motion-paused .motion-work .work-image,.motion-paused .motion-work .work-image img{transform:none!important;transition:none!important}
.motion-paused .board-steps>span,.motion-paused .sample-ai>div,.motion-paused .sample-calendar .available,.motion-paused .sample-member,.motion-paused .sample-products i,.motion-paused .sample-table>div{transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-page-progress{display:none}.motion-card,.motion-card:after,.work-image:before,.button>span{animation:none!important}.motion-title:before,.motion-title:after,.motion-card:after{transform:scaleX(1)!important}.motion-rail:after{transform:scaleY(1)!important}.motion-ready .service-board,.motion-ready .motion-work .work-image,.motion-ready .motion-work .work-image img,.motion-ready .sample-chart i{transform:none!important}.motion-ready .board-steps:after,.motion-ready .board-steps>span,.motion-ready .sample-ai>div,.motion-ready .sample-calendar .available,.motion-ready .sample-member,.motion-ready .sample-products i,.motion-ready .sample-table>div{transition:none!important}}
