/* Motion layer: scroll reveals, 3D hero scene, looping demos, icon loops and card tilt.
   Everything here is scoped to html.motion-ready (or classes script.js adds only when the
   visitor allows motion), so content is visible and still without JavaScript or with
   reduced motion. Loops use the individual translate/rotate/scale properties so they
   compose with the transforms the base stylesheets already animate. */

/* Header: reading progress along the bottom edge, firmer glass once scrolled. */
.site-header{transition:box-shadow .4s var(--ease-out),background-color .4s var(--ease-out)}
.site-header.is-scrolled{background:#f9fcffe6;box-shadow:inset 0 1px 0 #ffffffb3,0 10px 30px #10233d0d}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--brand-blue),#4fb0ec 70%,var(--brand-gold));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Section titles: words stand up one by one, coming into focus. Nothing is clipped. */
.motion-ready :is(.section-heading,.team-intro,.final-inner) h2{perspective:700px}
.motion-ready h2 .word{display:inline-block;opacity:0;translate:0 .75em;rotate:x 55deg;transform-origin:50% 100%;filter:blur(10px);transition:opacity 1s var(--ease-out) var(--word-delay),translate 1.3s var(--ease-out) var(--word-delay),rotate 1.3s var(--ease-out) var(--word-delay),filter 1.1s var(--ease-out) var(--word-delay)}
.motion-ready .is-inview h2 .word{opacity:1;translate:none;rotate:none;filter:none}
.motion-ready :is(.section-heading,.team-intro,.final-inner) .eyebrow{opacity:0;translate:-32px 0;transition:opacity 1s var(--ease-out),translate 1.2s var(--ease-out)}
.motion-ready :is(.section-heading,.team-intro) :is(p:not(.eyebrow),.text-link,.team-location){opacity:0;translate:0 26px;transition:opacity 1.1s var(--ease-out) .55s,translate 1.3s var(--ease-out) .55s}
.motion-ready :is(.section-heading,.team-intro,.final-inner).is-inview :is(.eyebrow,p:not(.eyebrow),.text-link,.team-location){opacity:1;translate:none}

/* Process steps: number slides in, then the rule under it draws left to right. */
.process-top{position:relative}
.motion-ready .process-top{border-bottom-color:transparent}
.motion-ready .process-top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--brand-blue),#4fb0ec 35%,var(--line) 70%);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--ease-out) calc(var(--motion-delay,0s) + .3s)}
.motion-ready .process-top>span{opacity:0;translate:-30px 0;transition:opacity 1s var(--ease-out) var(--motion-delay,0s),translate 1.2s var(--ease-out) var(--motion-delay,0s),color .5s var(--ease-out)}
.motion-ready .is-inview .process-top::after{transform:none}
.motion-ready .is-inview .process-top>span{opacity:1;translate:none}
.process-grid article:hover .process-top>span{color:var(--brand-blue)}
.pain-item,.process-grid article{transition:translate .5s var(--ease-out)}
.pain-item:hover,.process-grid article:hover{translate:0 -6px}

/* Team portraits: a slow top-down wipe with a settle, then the gold accent extends. */
.team-portraits figure{overflow:hidden}
.motion-ready .team-portraits img{clip-path:inset(0 0 100% 0);scale:1.12;transition:clip-path 1.6s var(--ease-out) var(--motion-delay,0s),scale 2.2s var(--ease-out) var(--motion-delay,0s)}
.motion-ready .team-portraits figure.is-inview img{clip-path:inset(0);scale:1}
.motion-ready .team-portraits figcaption:before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-out) calc(var(--motion-delay,0s) + 1s)}
.motion-ready .team-portraits figure.is-inview figcaption:before{transform:none}

/* Hero scene: the visual tilts in 3D toward the pointer. Layers sit at different depths:
   blurred orbits behind, the window, then the lead card and the scheduled-visit card in front. */
.hero-grid{perspective:1400px}
.scene-3d{transform-style:preserve-3d;rotate:calc(var(--ny,0) * -1) var(--nx,0) 0 calc(var(--tilt,0) * 1deg)}
.scene-3d .orbit{translate:calc(var(--nx,0) * -30px) calc(var(--ny,0) * -22px) -140px;filter:blur(2px)}
.scene-3d .workflow-window{z-index:1;translate:0 0 30px;box-shadow:calc(var(--nx,0) * -26px) calc(30px + var(--ny,0) * -18px) 70px -26px #17365370}
.scene-3d :is(.window-top,.workflow-kicker){translate:calc(var(--nx,0) * 3px) calc(var(--ny,0) * 2px)}
.scene-3d :is(.flow-step,.flow-result){translate:calc(var(--nx,0) * 8px) calc(var(--ny,0) * 6px)}
.scene-3d .floating-note{z-index:2;translate:calc(var(--nx,0) * 30px) calc(var(--ny,0) * 22px) 120px}
.window-glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;background:radial-gradient(560px circle at calc(50% + var(--nx,0) * 55%) calc(40% + var(--ny,0) * 55%),#ffffff24,transparent 55%)}
.depth-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:10px;background:#fff;border:1px solid #e3eaf2;box-shadow:0 14px 30px #10233d1c;font-size:11px;font-weight:650;color:#192b42;white-space:nowrap;pointer-events:none;animation:chip-float 6s ease-in-out infinite}
.depth-chip i{width:8px;height:8px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 4px #2fbf7126}
.depth-chip b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand-blue);color:#fff;font-size:11px}
.depth-back{z-index:3;top:17%;right:-22px;translate:calc(var(--nx,0) * 36px) calc(var(--ny,0) * 7px) 70px;box-shadow:0 18px 38px #10233d26}
.depth-front{left:-48px;top:56%;translate:calc(var(--nx,0) * 44px) calc(var(--ny,0) * 7px) 110px;box-shadow:0 22px 44px #10233d2e;animation-delay:-2.5s}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1100px){.depth-back{right:-4px}}
@media(max-width:980px){.scene-3d .orbit{filter:none}.depth-back{right:-12px}.depth-front{left:-16px}}
@media(max-width:640px){.depth-chip{gap:6px;padding:4px 9px;border-radius:7px;font-size:10px;line-height:1.5}.depth-chip i{width:6px;height:6px;box-shadow:0 0 0 3px #2fbf7126}.depth-chip b{width:16px;height:16px;font-size:9px}.depth-back{right:-10px}.depth-front{left:-8px}}

/* Solutions: a progress bar on the active tab is the 5 s rotation timer. */
.solution-tabs button{position:relative}
.tabs-autoplay .solution-tabs button[aria-selected=true]{border-color:#0071bc2e}
.tabs-autoplay .solution-tabs button[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand-blue);transform-origin:0 50%;animation:tab-progress 5s linear forwards}
.tabs-paused .solution-tabs button[aria-selected=true]::after{animation-play-state:paused}
@keyframes tab-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Solutions demos loop while their tab is shown (a hidden panel restarts on show). */
/* CRM: a new lead drops in, then attention moves along the funnel. */
.motion-ready #panel-crm .kanban-column:first-child .lead-card:first-child{animation:lead-drop 5s var(--ease-out) infinite backwards}
.motion-ready #panel-crm .kanban-column:first-child .lead-card:nth-child(3){animation:lead-focus 5s ease-in-out 1.1s infinite backwards}
.motion-ready #panel-crm .kanban-column:nth-child(2) .lead-card{animation:lead-focus 5s ease-in-out 2.1s infinite backwards}
.motion-ready #panel-crm .kanban-column:nth-child(3) .lead-card{animation:lead-focus 5s ease-in-out 3.1s infinite backwards}
.motion-ready #panel-crm .kanban-column:first-child h4>span{animation:count-bump 5s ease-in-out .35s infinite backwards}
.motion-ready :is(#panel-crm,#panel-texto,#panel-processos) .mini-check{animation:check-pop 2.5s ease-in-out infinite}
@keyframes lead-drop{0%{opacity:0;translate:0 -22px;scale:.92}12%,86%{opacity:1;translate:none;scale:1}100%{opacity:0;translate:0 8px;scale:.98}}
@keyframes lead-focus{0%,40%,100%{translate:none;border-color:#e0e6ee;box-shadow:0 2px 3px #1a335404}10%,26%{translate:0 -5px;border-color:#0071bc70;box-shadow:0 12px 24px #0071bc26}}
@keyframes count-bump{0%,20%,100%{scale:1;background:#e9edf3}6%{scale:1.35;background:#cfe4f7}}
@keyframes check-pop{0%,100%{scale:1}45%{scale:1.25}}

/* Voice: rings radiate from the orb and the transcript plays line by line. */
.voice-orb{position:relative}
.motion-ready .voice-orb::before,.motion-ready .voice-orb::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-blue);opacity:0;pointer-events:none;animation:orb-ring 2.6s var(--ease-out) infinite}
.motion-ready .voice-orb::after{animation-delay:1.3s}
.motion-ready .voice-orb svg{animation:icon-ring 2.6s ease-in-out infinite}
.motion-ready #panel-voz .transcript p{animation:line-in 5s var(--ease-out) .4s infinite backwards}
.motion-ready #panel-voz .transcript p+p{animation-delay:1.6s}
@keyframes orb-ring{0%{opacity:.6;scale:1}100%{opacity:0;scale:2.4}}
@keyframes line-in{0%{opacity:0;translate:0 10px}10%,88%{opacity:1;translate:none}100%{opacity:0}}

/* Text: the conversation builds bubble by bubble. */
.bubble{transform-origin:0 100%}
.bubble.client{transform-origin:100% 100%}
.motion-ready #panel-texto .bubble{animation:bubble-in 6s var(--ease-out) .2s infinite backwards}
.motion-ready #panel-texto .bubble:nth-child(2){animation-delay:.9s}
.motion-ready #panel-texto .bubble:nth-child(3){animation-delay:1.6s}
.motion-ready #panel-texto .bubble:nth-child(4){animation-delay:2.3s}
.motion-ready .online-dot{animation:dot-pulse 1.8s ease-out infinite}
@keyframes bubble-in{0%{opacity:0;translate:0 14px;scale:.9}7%,90%{opacity:1;translate:none;scale:1}100%{opacity:0;translate:0 -6px}}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 #78cbb7aa}100%{box-shadow:0 0 0 7px #78cbb700}}

/* Automations: the trigger pulses, a signal runs down the line, the actions light up in turn. */
.automation-line{position:relative}
.motion-ready .automation-trigger{animation:trigger-pulse 3s ease-out infinite}
.motion-ready .automation-line::after{content:'';position:absolute;left:-2px;top:0;width:5px;height:11px;border-radius:3px;background:var(--brand-blue);box-shadow:0 0 10px #0071bcaa;animation:line-signal 3s ease-in infinite}
.motion-ready .automation-actions>div{animation:action-light 3s ease-in-out infinite}
.motion-ready .automation-actions>div:nth-child(2){animation-delay:.2s}
.motion-ready .automation-actions>div:nth-child(3){animation-delay:.4s}
@keyframes trigger-pulse{0%{box-shadow:0 0 0 0 #0071bc66}45%,100%{box-shadow:0 0 0 14px #0071bc00}}
@keyframes line-signal{0%{translate:0 -6px;opacity:0}8%{opacity:1}34%{translate:0 30px;opacity:1}40%,100%{translate:0 30px;opacity:0}}
@keyframes action-light{0%,34%,100%{translate:none;border-color:#dce5f0;box-shadow:none}44%,64%{translate:0 -5px;border-color:#0071bc80;box-shadow:0 12px 24px #0071bc22}}

/* Icons breathe in a loop, each slightly out of phase; phones ring, sparks twinkle. */
.motion-ready .loop-icon{animation:icon-bob 3.6s ease-in-out calc(var(--icon-i,0) * -.5s) infinite}
.motion-ready .loop-icon:has(use[href="#icon-phone"]){animation:icon-ring 3.2s ease-in-out calc(var(--icon-i,0) * -.4s) infinite}
.motion-ready .loop-icon:has(use[href="#icon-spark"]){animation:icon-twinkle 2.8s ease-in-out calc(var(--icon-i,0) * -.4s) infinite}
.motion-ready .loop-icon:has(use[href="#icon-calendar"],use[href="#icon-check"]){animation:icon-pulse 2.4s ease-in-out calc(var(--icon-i,0) * -.4s) infinite}
@keyframes icon-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-7deg}}
@keyframes icon-ring{0%,52%,100%{rotate:0deg}57%{rotate:-18deg}62%{rotate:15deg}67%{rotate:-12deg}72%{rotate:9deg}77%{rotate:0deg}}
@keyframes icon-twinkle{0%,100%{scale:1;rotate:0deg}50%{scale:1.2;rotate:22deg}}
@keyframes icon-pulse{0%,100%{scale:1}50%{scale:1.16}}

/* Boxed cards: tilt toward the pointer with a light that follows it. */
@media(hover:hover) and (pointer:fine){
  .tilt-stage{perspective:1100px}
  .spotlight{position:relative;isolation:isolate;rotate:var(--cx,0) var(--cy,0) 0 calc(var(--card-tilt,0) * 1deg);transition:rotate .7s var(--ease-out),translate .45s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
  .spotlight:hover{transition:rotate .14s linear,translate .45s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out);border-color:#0071bc55;box-shadow:0 26px 50px -12px #10233d26}
  .spotlight::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(380px circle at var(--spot-x,50%) var(--spot-y,50%),#0071bc24,transparent 62%);transition:opacity .4s var(--ease-out)}
  .spotlight:hover::after{opacity:1}
  .max-channel.spotlight:hover{translate:0 -6px}
  .industry-cards>article{transition:translate .5s var(--ease-out)}
  .industry-cards>article:hover{translate:0 -4px}
  .industry-cards>article:hover svg{transform:translateY(-3px) rotate(-8deg)}
  .industry-cards>article svg{transition:transform .5s var(--ease-out)}
}

@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .pain-item,.process-grid article,.industry-cards>article{transition:none!important;translate:none!important}
}