/* A abertura acompanha a matéria: título em três tempos e metal em suspensão. */
:root{--motion-arrive:cubic-bezier(.16,1,.3,1);--motion-state:220ms}
.hero-line{display:block;padding-block:.07em;margin-block:-.07em;transform-origin:left center}
.sculpture-stage,.sculpture-float{width:100%;height:100%;transform-origin:70% 50%}
.sculpture-float{position:relative}.sculpture-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-compact .hero-art{--sculpture-scale:.8}
.hero-art img{transition:opacity .5s ease}.sculpture-pending .hero-art img,.sculpture-live>img{opacity:0}
.motion-controls{position:absolute;right:var(--gutter);bottom:17px;z-index:3;display:flex;align-items:center;gap:8px}
.hero-compact .motion-controls{bottom:12px}.motion-controls .motion-toggle{position:static}
.motion-replay{display:inline-flex;align-items:center;gap:6px;border:1px solid #78756b;background:#111110c9;color:var(--white);border-radius:99px;font-size:10px;line-height:1.3;padding:8px 12px;min-height:36px;cursor:pointer}.motion-replay:hover{background:#32322e}.motion-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2}
.motion-toggle{position:absolute;right:var(--gutter);bottom:17px;z-index:3;display:inline-flex;align-items:center;gap:6px;border:0;background:#111110c9;color:var(--white);border-radius:99px;font-size:10px;line-height:1.3;padding:8px 12px;min-height:36px;cursor:pointer;transition:background .2s}
.motion-toggle:hover{background:#32322e}.motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}.motion-toggle .play-symbol{display:none}.motion-toggle[aria-pressed=true] .pause-symbol{display:none}.motion-toggle[aria-pressed=true] .play-symbol{display:block}
.hero-compact .motion-toggle{bottom:12px}.button:active{transform:translateY(0) scale(.97);transition-duration:100ms}.circle-arrow svg{transition:transform 250ms var(--motion-arrive)}.service-summary:hover .circle-arrow svg{transform:translateX(2px)}.filters button{transition:background var(--motion-state),color var(--motion-state)}
/* Navegações sem a cortina da marca usam uma troca curta; a cortina tem sua coreografia em page-transition.css. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:digify-page-out 120ms ease-in both}
::view-transition-new(root){animation:digify-page-in 260ms var(--motion-arrive) both}
@keyframes digify-page-out{to{opacity:0}}
@keyframes digify-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.motion-paused .hero-art{transition:none}.motion-paused .project-visual>img,.motion-paused .button,.motion-paused .circle-arrow{transition:none}
:root:has(.motion-paused)::view-transition-group(*),:root:has(.motion-paused)::view-transition-old(*),:root:has(.motion-paused)::view-transition-new(*){animation:none}
@media(max-width:820px){.motion-toggle{bottom:13px;right:auto;left:var(--gutter);font-size:9px;min-height:34px}.hero-compact .motion-toggle{bottom:62px}.motion-controls{bottom:13px;right:auto;left:var(--gutter)}.hero-compact .motion-controls{bottom:62px}.motion-replay{font-size:9px;min-height:34px}}
@media(max-width:540px){.motion-toggle{bottom:12px;min-height:34px;padding:7px 10px;font-size:8px}.hero-compact .motion-toggle{bottom:62px}}
/* A mesclagem fica no contêiner externo: transformações internas isolam o grupo e revelariam o fundo da imagem. */
.hero-art{mix-blend-mode:lighten}

/* Letreiro de especialidades */
.service-strip{display:block;padding:0;overflow:hidden;font-size:13px;letter-spacing:.35em}
.marquee{display:flex;align-items:center;min-height:57px}
.marquee-track{display:flex;width:max-content;animation:digify-marquee 42s linear infinite;animation-play-state:paused}
.service-strip.is-inview .marquee-track{animation-play-state:running}
.marquee-group{display:flex;align-items:center;gap:32px;padding-right:32px}
.marquee-group span{white-space:nowrap}
@keyframes digify-marquee{to{transform:translate3d(-50%,0,0)}}
.motion-paused .marquee-track,.motion-paused .service-strip.is-inview .marquee-track{animation-play-state:paused}

/* Títulos por máscara, linha a linha */
.reveal-line{display:block}
.reveal-line>span{display:block;transition:transform 1s var(--motion-arrive) calc(var(--base,0ms) + var(--i,0)*90ms)}
.is-pending>.reveal-line,.is-revealing>.reveal-line{clip-path:inset(-.28em -.25em -.2em -.25em)}
.is-pending>.reveal-line>span{transform:translate3d(0,140%,0)}
.reveal-block{transition:clip-path 1.1s var(--motion-arrive),transform 1.1s var(--motion-arrive)}
.reveal-block.is-revealing{clip-path:inset(-.3em)}
.reveal-block.is-pending{clip-path:inset(-.3em -.3em 100% -.3em);transform:translate3d(0,30px,0)}
.manifesto h2{white-space:nowrap}.manifesto h2 em{display:inline-block;transition:transform .7s var(--motion-arrive) calc(var(--base,0ms) + .5s)}
.manifesto h2.is-pending em{transform:scale(0)}

/* Listas em sequência e linhas que se desenham */
[data-stagger]>*{transition:opacity .8s var(--motion-arrive) calc(var(--i,0)*75ms),transform .95s var(--motion-arrive) calc(var(--i,0)*75ms)}
[data-stagger].is-pending>*{opacity:0;transform:translate3d(0,34px,0)}
.index-rule i{transform-origin:left center;transition:transform 1.2s var(--motion-arrive) .2s}
.index-rule.is-pending i{transform:scaleX(0)}
.index-rule span{transition:opacity .5s ease .1s}
.index-rule.is-pending span{opacity:0}
.recife-caption,.concept-note{transition:opacity 1s ease .35s,transform 1s var(--motion-arrive) .35s}
:is(.recife-caption,.concept-note).is-pending{opacity:0;transform:translate3d(0,12px,0)}

/* Ilustrações de soluções */
.laptop-screen{overflow:hidden}
.laptop-screen>*{transition:opacity .6s ease .4s,transform .9s var(--motion-arrive) .4s}
.laptop.is-pending .laptop-screen>*{opacity:0;transform:translate3d(0,12px,0)}
.laptop-screen:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#fff3 50%,transparent 65%);background-size:300% 100%;background-position:100% 0;opacity:0}
.laptop.is-revealing .laptop-screen:after{animation:digify-glare 1.5s var(--motion-arrive) .5s both}
@keyframes digify-glare{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
.campaign>span{transition:transform 1.25s var(--motion-arrive)}
.campaign.is-pending>span{transform:rotate(-3deg) translate3d(0,72%,0)}
.campaign small{transition:opacity .6s ease .8s}
.campaign.is-pending small{opacity:0}
.automation-path{transform-origin:left center;transition:transform 1.3s var(--motion-arrive) .25s}
.automation.is-pending .automation-path{transform:rotate(-6deg) scaleX(0)}
.automation>div:not(.automation-path){transition:opacity .6s ease calc(.3s + var(--i,0)*.38s),transform .8s var(--motion-arrive) calc(.3s + var(--i,0)*.38s)}
.automation.is-pending>div:not(.automation-path){opacity:0;transform:translate3d(0,14px,0)}
.automation.is-revealing>div>span{animation:digify-node 1.1s var(--motion-arrive) calc(.55s + var(--i,0)*.38s) both}
@keyframes digify-node{0%{border-color:#aaa79c;box-shadow:0 0 0 0 #ff641800}35%{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 7px #ff641833}100%{border-color:#aaa79c;box-shadow:0 0 0 16px #ff641800}}
.automation-path:after{content:'';position:absolute;inset:-3px 0;background:linear-gradient(90deg,transparent 0 44%,#fff 50%,transparent 56% 100%);background-size:300% 100%;background-position:150% 0;opacity:.85;filter:blur(1px)}
.automation.is-inview .automation-path:after{animation:digify-flow 2.8s cubic-bezier(.45,0,.2,1) 1.6s infinite}
@keyframes digify-flow{0%{background-position:150% 0}100%{background-position:-50% 0}}
.motion-paused .automation.is-inview .automation-path:after{animation:none}

/* Microinterações */
.button{overflow:hidden}
.button:hover svg,.button:focus-visible svg{animation:digify-arrow 520ms var(--motion-arrive)}
@keyframes digify-arrow{40%{transform:translate(150%,-150%);opacity:0}41%{transform:translate(-150%,150%);opacity:0}100%{transform:none;opacity:1}}
.text-link svg,.back-top svg{transition:transform .35s var(--motion-arrive)}
.back-top:hover svg{transform:translate(2px,-2px)}
.wordmark>span{display:inline-block;transition:transform .45s var(--motion-arrive)}
.brand:hover .wordmark>span{transform:translate3d(0,-.2em,0)}
.article-art>span{transition:transform .7s var(--motion-arrive)}
.article-card:hover .article-art>span{transform:translate3d(10px,0,0)}

@media(max-width:820px){.service-strip{font-size:11px;letter-spacing:.3em}.marquee{min-height:50px}.marquee-group{gap:22px;padding-right:22px}.marquee-group i{width:22px}}
@media(max-width:820px) and (min-width:541px){.automation-path{transform-origin:center top}.automation.is-pending .automation-path{transform:rotate(-6deg) scaleY(0)}.automation-path:after{inset:0 -3px;background:linear-gradient(180deg,transparent 0 44%,#fff 50%,transparent 56% 100%);background-size:100% 300%;background-position:0 150%}@keyframes digify-flow-y{to{background-position:0 -50%}}.automation.is-inview .automation-path:after{animation-name:digify-flow-y}}
@media(max-width:540px){.service-strip{font-size:10px;letter-spacing:.28em}.marquee{min-height:46px}.marquee-group{gap:18px;padding-right:18px}.marquee-group i{width:16px}}
@media(max-width:540px) and (prefers-reduced-motion:reduce){.service-strip{font-size:7px;letter-spacing:.2em}.marquee-group{gap:9px}.marquee-group i{width:12px}}

@media(prefers-reduced-motion:reduce){.motion-controls,.motion-toggle{display:none}.marquee{justify-content:center}.marquee-track{animation:none;width:auto}.marquee-group+.marquee-group,.marquee-repeat,.marquee-group i:nth-of-type(n+4){display:none}.marquee-group{padding-right:0}::view-transition-old(root),::view-transition-new(root){animation:none!important}.hero-art,.button,.project-visual>img,.circle-arrow{transition:none!important}}