/* Motion layer shared by the four service pages. Geometry and copy stay in the base styles. */
.m-enhanced{--m-ease:cubic-bezier(.16,1,.3,1)}
.motion-on.m-enhanced .s-hero-copy>*:not(.s-breadcrumb),
.motion-on.m-enhanced .v-hero-copy>*:not(.v-breadcrumb){animation:m-copy-in .95s var(--m-ease) both;animation-delay:var(--m-order,0ms)}
@keyframes m-copy-in{from{opacity:0;translate:0 32px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(-10% -10% -10% -10%)}}
.motion-on.m-enhanced .s-reveal,.motion-on.m-enhanced .v-reveal{transition-duration:.85s;transition-delay:var(--m-delay,0ms)}
.motion-on.m-enhanced :is(.s-work,.a-expression-grid article,.t-value-grid article):not(.is-seen){transform:translateY(52px) rotate(1.5deg)}
.motion-on.m-enhanced .m-unveil.m-entered{animation:m-heading-in .95s var(--m-ease) both}
@keyframes m-heading-in{from{clip-path:inset(0 0 100% 0);translate:0 22px}to{clip-path:inset(-10% -10% -10% -10%);translate:0 0}}
.motion-on.m-enhanced .m-picture.m-entered{animation:m-image-in 1.05s var(--m-ease) both;animation-delay:var(--m-delay,0ms)}
@keyframes m-image-in{from{clip-path:inset(0 100% 0 0 round 12px);translate:0 20px}to{clip-path:inset(0 0 0 0 round 12px);translate:0 0}}
/* A film deck opens, then breathes gently at different speeds. */
.motion-on.m-enhanced .a-film-deck.m-entered .a-back-one{animation:m-film-left 1.35s var(--m-ease) both,m-float-a 7s 1.35s ease-in-out infinite}
.motion-on.m-enhanced .a-film-deck.m-entered .a-back-two{animation:m-film-right 1.5s .08s var(--m-ease) both,m-float-b 8s 1.6s ease-in-out infinite}
.motion-on.m-enhanced .a-film-deck.m-entered .a-main-film{animation:m-player-in 1.2s .2s var(--m-ease) both}
@keyframes m-film-left{from{opacity:0;translate:70px 95px;rotate:8deg;scale:.82}to{opacity:1;translate:0 0;rotate:-12deg;scale:1}}
@keyframes m-film-right{from{opacity:0;translate:-65px 100px;rotate:-7deg;scale:.8}to{opacity:1;translate:0 0;rotate:11deg;scale:1}}
@keyframes m-player-in{from{opacity:0;translate:0 14px;scale:.88}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-float-a{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes m-float-b{0%,100%{translate:0 0}50%{translate:0 10px}}
.motion-on.m-enhanced .a-main-film{transform:rotate(var(--m-film-turn,0deg));transition:transform .45s linear}
.motion-on.m-enhanced .a-film-deck:has(button:hover) .a-back-film{animation-play-state:paused}
/* Vuddy: assemble the player, then let the two routes visibly travel onward. */
.motion-on.m-enhanced .v-hero-art.m-entered .v-film-sticker-a{animation:m-vuddy-card-a 1.25s var(--m-ease) both,m-float-a 6s 1.25s ease-in-out infinite}
.motion-on.m-enhanced .v-hero-art.m-entered .v-film-sticker-b{animation:m-vuddy-card-b 1.4s .1s var(--m-ease) both,m-float-b 7s 1.5s ease-in-out infinite}
.motion-on.m-enhanced .v-hero-art.m-entered .v-demo-player{animation:m-player-in 1s .15s var(--m-ease) both}
.motion-on.m-enhanced .v-hero-art.m-entered .v-choice-note{animation:m-note-in .8s .8s var(--m-ease) both}
@keyframes m-vuddy-card-a{from{opacity:0;translate:50px 80px;scale:.8}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-vuddy-card-b{from{opacity:0;translate:-45px 65px;scale:.8}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-note-in{from{opacity:0;scale:.3}60%{opacity:1;scale:1.09}to{opacity:1;scale:1}}
.motion-on.m-enhanced .v-wordmark-dot{animation:m-dot 3.6s 1.3s ease-in-out infinite}
@keyframes m-dot{0%,65%,100%{scale:1}78%{scale:1.4}90%{scale:.92}}
.m-route-packet{stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-dasharray:.035 .965;stroke-dashoffset:1;opacity:0}
.m-route-packet:nth-last-child(1){stroke:var(--pink)}
.motion-on.m-enhanced .v-journey-visual.m-entered .m-route-packet{opacity:1;animation:m-route-travel 4.7s linear infinite}
.motion-on.m-enhanced .v-journey-visual.m-entered .m-route-packet:nth-last-child(1){animation-delay:-2.35s}
@keyframes m-route-travel{0%,12%{stroke-dashoffset:1;opacity:0}20%{opacity:1}82%{opacity:1}95%,100%{stroke-dashoffset:-.04;opacity:0}}
.motion-on.m-enhanced .v-journey-visual.m-entered .v-node{animation:m-node-in .9s var(--m-ease) both;animation-delay:var(--m-delay,0ms)}
@keyframes m-node-in{from{opacity:0;scale:.7;translate:0 35px}to{opacity:1;scale:1;translate:0 0}}
.motion-on.m-enhanced .v-use-illustration.m-entered .v-use-question>span{animation:m-answer-pop .8s .2s var(--m-ease) both}
.motion-on.m-enhanced .v-use-illustration.m-entered .v-use-question>span:last-child{animation-delay:.38s}
@keyframes m-answer-pop{from{opacity:0;translate:12px 0;scale:.92}to{opacity:1;translate:0 0;scale:1}}
.motion-on.m-enhanced .v-live-demo.m-entered:not(.is-playing){animation:m-player-in 1s var(--m-ease) both}
.motion-on.m-enhanced .v-hello-sticker{animation:m-float-b 6s ease-in-out infinite}
/* A system becomes an orderly workflow without changing the user's selected state. */
.motion-on.m-enhanced .d-workspace.m-entered .d-app{animation:m-player-in 1s var(--m-ease) both}
.motion-on.m-enhanced .d-workspace.m-entered[data-mode=after] .d-task{animation:m-organize 1.55s var(--m-delay,.2s) var(--m-ease) both}
.d-task-one{--m-start-x:30px;--m-start-y:35px;--m-start-angle:-17deg;--m-end-y:0px;--m-delay:.2s}
.d-task-two{--m-start-x:-15px;--m-start-y:-20px;--m-start-angle:13deg;--m-end-y:13px;--m-delay:.38s}
.d-task-three{--m-start-x:-35px;--m-start-y:55px;--m-start-angle:-9deg;--m-end-y:27px;--m-delay:.56s}
@keyframes m-organize{from{opacity:0;transform:translate(var(--m-start-x),var(--m-start-y)) rotate(var(--m-start-angle))}20%{opacity:1}to{opacity:1;transform:translateY(var(--m-end-y)) rotate(0deg)}}
.motion-on.m-enhanced .d-floating-label{animation:m-float-a 6.5s ease-in-out infinite}
.motion-on.m-enhanced .d-workspace.m-live[data-mode=after] .d-task i{animation:m-task-signal 4.8s 1.8s ease-in-out infinite}
.motion-on.m-enhanced .d-workspace.m-live[data-mode=after] .d-task-two i{animation-delay:2.5s}
.motion-on.m-enhanced .d-workspace.m-live[data-mode=after] .d-task-three i{animation-delay:3.2s}
@keyframes m-task-signal{0%,12%,55%,100%{scale:1;opacity:1}30%{scale:1.25;opacity:.55}}
.motion-on.m-enhanced .d-mini-browser.m-entered{animation:m-player-in .95s var(--m-ease) both}
.motion-on.m-enhanced .d-mini-browser.m-live .d-mini-shape i{animation:m-shape-float 6s ease-in-out infinite}
.motion-on.m-enhanced .d-mini-browser.m-live .d-mini-shape i:nth-child(2){animation-delay:-2s}
.motion-on.m-enhanced .d-mini-browser.m-live .d-mini-shape i:nth-child(3){animation-delay:-4s}
@keyframes m-shape-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* Torudake: cut, caption, finish. The illustration runs once when first seen. */
.motion-on.m-enhanced .t-editor-stage.m-entered .t-editor{animation:m-player-in 1s var(--m-ease) both}
.motion-on.m-enhanced .t-editor-sticker{animation:m-float-b 6.5s ease-in-out infinite}
.motion-on.m-enhanced .t-editor-stage[data-edit=edit] .t-track i{animation:m-clip-in .6s var(--m-ease) both;transform-origin:left center}
.motion-on.m-enhanced .t-editor-stage[data-edit=edit] .t-track i:nth-of-type(2){animation-delay:.12s}
.motion-on.m-enhanced .t-editor-stage[data-edit=edit] .t-track i:nth-of-type(3){animation-delay:.24s}
@keyframes m-clip-in{from{scale:.2 1;opacity:0}to{scale:1;opacity:1}}
.motion-on.m-enhanced .t-editor-stage[data-edit=finish] .t-caption strong{animation:m-caption-stamp .65s var(--m-ease) both}
@keyframes m-caption-stamp{from{scale:1.18;opacity:0}to{scale:1;opacity:1}}
.motion-on.m-enhanced .t-style.m-entered>i{animation:m-color-in .75s var(--m-delay,0ms) var(--m-ease) both}
@keyframes m-color-in{from{opacity:0;translate:0 -60px;scale:.3}65%{opacity:1;translate:0 5px;scale:1.07}to{opacity:1;translate:0 0;scale:1}}
.motion-on.m-enhanced .t-speed.m-entered>span{animation:m-clips-stack .9s var(--m-delay,0ms) var(--m-ease) both}
@keyframes m-clips-stack{from{opacity:0;transform:translateX(70px) rotate(15deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
.motion-on.m-enhanced .t-quality.m-entered>span{animation:m-quality-in 1s var(--m-delay,0ms) var(--m-ease) both}
@keyframes m-quality-in{from{opacity:0;scale:.3;transform:translateX(35px)}65%{opacity:1;scale:1.08}to{opacity:1;scale:1;transform:translateX(0)}}
.motion-on.m-enhanced .t-setup.m-entered li{animation:m-answer-pop .8s var(--m-delay,0ms) var(--m-ease) both}
/* The production path fills as the visitor travels through its steps. */
.m-progress{--m-progress:0;--m-line-x:24px;--m-line-y:24px;--m-line-w:calc(100% - 48px);--m-line-h:0px;position:relative}
.m-progress>li{position:relative;z-index:1}
.motion-on.m-enhanced .m-progress:after{content:'';position:absolute;top:var(--m-line-y);left:var(--m-line-x);height:3px;width:var(--m-line-w);background:var(--green);transform:scaleX(var(--m-progress));transform-origin:left center;pointer-events:none}
.m-progress .m-step-marker{transition:background .4s,color .4s,box-shadow .4s;position:relative;z-index:1}
.motion-on.m-enhanced .m-step-active .m-step-marker{background:var(--green);color:#fff;box-shadow:0 0 0 5px #1d7d6318}
.motion-on.m-enhanced .s-contact-word{transform:translateX(var(--m-contact-x,0px));transition:transform .15s linear}
.motion-on.m-enhanced .v-contact-rings{transform:scale(var(--m-ring-scale,1));transition:transform .15s linear}
.motion-on.m-enhanced :is(.s-contact,.v-contact).m-entered .v-button{animation:m-note-in .8s .25s var(--m-ease) both}
.motion-on.m-enhanced .v-button>span{transition:transform .3s var(--m-ease)}
@media(hover:hover){.motion-on.m-enhanced .v-button:hover>span{transform:translate(3px,-3px)}.motion-on.m-enhanced .s-work:hover .s-work-play{scale:1.12;transition:scale .25s}.motion-on.m-enhanced .v-recommended-work:hover>div>span{transform:rotate(45deg);transition:transform .25s}}
/* Pause decorative loops off screen and whenever playback/controls need focus. */
.motion-on.m-enhanced .m-scene:not(.m-live) *,.m-tab-hidden *{animation-play-state:paused!important}

@media(max-width:900px){.d-task{--m-end-y:0px}.motion-on.m-enhanced .s-flow.m-progress:after{display:none}}
@media(max-width:600px){
 .motion-on.m-enhanced .s-flow.m-progress:after,.motion-on.m-enhanced .v-making-steps.m-progress:after{display:block;width:2px;height:var(--m-line-h);transform:scaleY(var(--m-progress));transform-origin:center top}
 @keyframes m-float-a{0%,100%{translate:0 0}50%{translate:0 -5px}}
 @keyframes m-float-b{0%,100%{translate:0 0}50%{translate:0 5px}}
 .motion-on.m-enhanced .a-main-film{transform:none}
 .motion-on.m-enhanced .m-step-active .m-step-marker{box-shadow:0 0 0 3px #1d7d6318}
}
.no-motion.m-enhanced .m-route-packet{display:none}
.no-motion.m-enhanced .m-progress:after{display:none}
.no-motion.m-enhanced .s-contact-word,.no-motion.m-enhanced .v-contact-rings{transform:none}
.no-motion.m-enhanced :is(.m-unveil,.m-picture){clip-path:none;translate:none;opacity:1}
@media(prefers-reduced-motion:reduce){.m-route-packet,.m-progress:after{display:none!important}.s-contact-word,.v-contact-rings{transform:none!important}}
/* Keep the finished edit's vertical credit inside its video frame. */
.m-enhanced .t-nameplate{rotate:0deg;writing-mode:vertical-rl;text-orientation:mixed;bottom:16px;right:14px;padding:7px 5px}

/* Follow the rendered marker axis, including desktop flows beside Pop Vuddy. */
.motion-on.m-enhanced .m-progress.m-progress-vertical:after{display:block;width:2px;height:var(--m-line-h);transform:scaleY(var(--m-progress));transform-origin:center top}