/* AFEDDAS motion: paper movement, typographic emphasis and responsive feedback. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.business-card-scene{background:var(--blue);perspective:1000px;isolation:isolate}
.business-card{--card-angle:-7deg;--mx:0px;--my:0px;--rx:0deg;--ry:0deg;box-shadow:0 20px 28px rgb(0 0 70 / 27%);transform:translate3d(var(--mx),var(--my),0) rotate(var(--card-angle)) rotateX(var(--rx)) rotateY(var(--ry))}
.business-card.back{--card-angle:5deg}
.motion-ready .hero-copy{animation:none}.hero-line{display:inline-block}
.motion-ready:not(.motion-paused) .marked:after{transform-origin:left;animation:ink-stroke .75s var(--motion-ease) .25s both}
@keyframes ink-stroke{from{transform:rotate(-3deg) scaleX(.03)}to{transform:rotate(-3deg) scaleX(1)}}
.motion-ready .business-card{animation:paper-float 7s ease-in-out infinite;will-change:transform}
.motion-ready .business-card.back{animation-duration:8.5s;animation-delay:-2s}
@keyframes paper-float{0%,100%{transform:translate3d(var(--mx),var(--my),0) rotate(var(--card-angle)) rotateX(var(--rx)) rotateY(var(--ry))}50%{transform:translate3d(var(--mx),calc(var(--my) - 10px),0) rotate(calc(var(--card-angle) + 1.2deg)) rotateX(var(--rx)) rotateY(var(--ry))}}
.business-card-scene.scene-away .business-card{animation-play-state:paused;will-change:auto}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:44px;background:transparent;color:white;border:1px solid rgb(255 255 255 / 55%);border-radius:4px;padding:8px 12px;font-size:.8rem;white-space:nowrap}
.motion-toggle:hover{background:var(--yellow);color:var(--blue)}.motion-toggle:focus-visible{outline-color:var(--yellow)}
.motion-switch{display:block;width:28px;height:16px;border:1px solid currentColor;border-radius:20px;padding:3px}.motion-switch:after{content:"";display:block;width:8px;height:8px;border-radius:50%;background:currentColor;transform:translateX(12px)}
.motion-toggle[aria-pressed=true] .motion-switch:after{transform:none}.footer-bottom{align-items:center;flex-wrap:wrap}
.motion-ready .button,.motion-ready .header-quote{transition:transform .3s var(--motion-ease),box-shadow .3s var(--motion-ease),background .2s ease}
.motion-ready .button:hover{transform:translateY(-4px);box-shadow:0 7px 0 var(--ink)}
.motion-ready .button:active,.motion-ready .header-quote:active{transform:translateY(0) scale(.98);box-shadow:none}
.button>span,.header-quote>span,.text-link>span{display:inline-block;transition:transform .3s var(--motion-ease)}
.button:hover>span,.header-quote:hover>span,.text-link:hover>span{transform:translate(3px,-3px)}
.service-list article{position:relative;isolation:isolate;transition:color .3s ease}
.service-list article:before{content:"";position:absolute;inset:0 -18px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--motion-ease);z-index:-1}
.service-list article:hover:before,.service-list article:focus-within:before{transform:scaleX(1)}
.service-list article:hover h3,.service-list article:focus-within h3{color:var(--blue)}
.service-list article>a{transition:transform .3s var(--motion-ease),background .2s ease}
.service-list article:hover>a{transform:rotate(45deg);background:var(--blue);color:var(--yellow)}
.order-cards article{transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)}
.order-cards article:hover{transform:translateY(-7px);box-shadow:0 12px 0 rgb(8 24 255 / 9%)}
.card-image:hover img{transform:scale(1.05)}
.formula{transition:background .25s ease,border-color .25s ease,transform .25s var(--motion-ease)}
.formula:hover{transform:translateY(-4px)}
.formula:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.field input,.field textarea,.field select{transition:border-color .2s ease,box-shadow .2s ease}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 3px rgb(8 24 255 / 10%)}
.faq summary span{transition:transform .25s var(--motion-ease)}
.motion-ready .mobile-menu[open] nav{animation:menu-arrive .22s var(--motion-ease)}
@keyframes menu-arrive{from{opacity:.5;transform:translateY(-8px)}to{opacity:1;transform:none}}
.marquee-window{overflow:hidden;max-width:100%;width:100%}.marquee-track{display:flex;width:max-content;animation:print-belt 26s linear infinite}.marquee-group{display:flex;align-items:center;justify-content:space-around;gap:65px;min-width:100vw;padding-inline:32px;font-size:clamp(1.1rem,2vw,1.7rem);font-weight:650;white-space:nowrap}.marquee-group span[aria-hidden]{font-size:2rem}
@keyframes print-belt{to{transform:translateX(-50%)}}
.service-strip.strip-away .marquee-track{animation-play-state:paused}
.service-strip .strip-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.scroll-progress{position:absolute;left:0;bottom:-2px;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}
.motion-paused .button:hover,.motion-paused .order-cards article:hover,.motion-paused .formula:hover,.motion-paused .service-list article:hover>a{transform:none}
@media(hover:none){.service-list article:before{display:none}.order-cards article:hover,.formula:hover{transform:none}.motion-ready .button:hover{transform:none;box-shadow:none}.button:hover>span,.text-link:hover>span{transform:none}}
@media(max-width:900px){.header-row{gap:12px}.motion-toggle{order:2}.mobile-menu{order:3}.motion-toggle{margin-left:0}.marquee-group{min-width:880px;gap:40px;padding-inline:20px}.service-list article:before{inset-inline:-10px}}
@media(max-width:380px){.header-row{gap:8px}.mobile-menu>summary{min-width:44px}}
@media(prefers-reduced-motion:reduce){.business-card{animation:none!important;transform:rotate(var(--card-angle))!important;will-change:auto}.marquee-window{display:none}.service-strip .strip-accessible{position:static;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;margin-inline:auto;width:min(1280px,calc(100% - 40px))}.hero-line{transform:none!important}.motion-toggle{display:none}.scroll-progress{display:none}*,*:before,*:after{animation:none!important;transition:none!important}.order-cards article:hover,.formula:hover,.button:hover{transform:none!important}}
