/* Blitchka motion layer (v21). Only active when assets/blitchka-motion.js adds class "mo" to <html>
   (it skips that when the visitor prefers reduced motion), so with JS off or reduced motion everything is static and visible.
   Public pages only; the studio tools' working UI is not touched. Fast (200-700ms), RTL-mirrored. */
@keyframes mo-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-wipe-r{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-in-x{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes mo-in-x-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes mo-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mo-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes mo-pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes mo-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-pulse{from{box-shadow:0 0 0 0 rgba(228,59,64,.6)}to{box-shadow:0 0 0 14px rgba(228,59,64,0)}}

/* feedback banner slides down */
.mo .fb-banner .wrap{animation:mo-down .45s cubic-bezier(.2,.7,.2,1) .05s both}

/* hero: panel wipes in, lines slide in, ring draws itself, L bar + C dot arrive */
.mo .hero h1{animation:mo-wipe .55s cubic-bezier(.7,0,.2,1) .15s both}
.mo [dir=rtl] .hero h1,[dir=rtl].mo .hero h1{animation-name:mo-wipe-r}
.mo .hero h1 span{animation:mo-in-x .5s cubic-bezier(.2,.7,.2,1) both}
.mo [dir=rtl] .hero h1 span,[dir=rtl].mo .hero h1 span{animation-name:mo-in-x-r}
.mo .hero h1 span:nth-child(1){animation-delay:.3s}
.mo .hero h1 span:nth-child(2){animation-delay:.4s}
.mo .hero h1 span:nth-child(3){animation-delay:.5s}
.mo .hero h1::after{transform-origin:left center;animation:mo-bar .45s cubic-bezier(.2,.7,.2,1) .7s both}
.mo [dir=rtl] .hero h1::after,[dir=rtl].mo .hero h1::after{transform-origin:right center}
.mo .tag{animation:mo-up .4s ease-out .05s both}
.mo .tag i{animation:mo-pop .45s cubic-bezier(.3,1.4,.5,1) .3s both}
.mo .hero .sub{animation:mo-up .45s ease-out .6s both}
.mo .hero .ctas{animation:mo-up .45s ease-out .72s both}
.mo .wa-float{animation:mo-pop .45s cubic-bezier(.3,1.4,.5,1) 1s both}

/* hero wordmark: Sam's own logo animation, replayed 1:1 from his video by assets/blitchka-motion.js (WAAPI). The logo is
   fully visible from the first frame like in his video; nothing here moves it, so with JS off / reduced motion it is the still logo. */
.hero-mark{overflow:hidden}
.wm .wm-cdot{transform-box:fill-box;transform-origin:50% 50%}
/* inner pages: title slides in */
.mo .inner .quote-hero h1,.mo .inner .work-hero h1{animation:mo-in-x .5s cubic-bezier(.2,.7,.2,1) .1s both}
.mo [dir=rtl] .inner .quote-hero h1,.mo [dir=rtl] .inner .work-hero h1,[dir=rtl].mo .inner .quote-hero h1,[dir=rtl].mo .inner .work-hero h1{animation-name:mo-in-x-r}

/* scroll reveal (JS marks elements .mo-r, then .mo-in when they enter the screen) */
.mo .mo-r{opacity:0;transform:translateY(18px)}
.mo .mo-r.mo-in{opacity:1;transform:none;transition:opacity .5s ease-out,transform .55s cubic-bezier(.2,.7,.2,1)}

/* hover / press lift + red ring pulse on tap */
.mo .btn,.mo .tool,.mo .hub-tool,.mo .qbtn,.mo .main-nav a.talk{transition:transform .2s ease,box-shadow .2s ease,background-color .2s,color .2s}
@media (hover:hover){.mo .btn:hover,.mo .tool:hover,.mo .hub-tool:hover,.mo .qbtn:hover{transform:translateY(-3px)}}
.mo .btn:active,.mo .tool:active,.mo .hub-tool:active,.mo .qbtn:active{transform:translateY(1px) scale(.98)}
.mo .mo-tap{animation:mo-pulse .5s ease-out}
.mo .tool:hover .tic,.mo .tool:focus-visible .tic{transform:rotate(-6deg) scale(1.06)}
.mo .tool .tic{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
@media (prefers-reduced-motion:reduce){.mo *,.mo *::before,.mo *::after{animation:none!important;transition:none!important}.mo .mo-r{opacity:1;transform:none}}