/* FechAí — camada de movimento profissional da landing page.
   Animações sutis, progressivas e respeitando prefers-reduced-motion. */

:root{
  --vf-motion-fast:.22s;
  --vf-motion-base:.55s;
  --vf-motion-slow:.8s;
  --vf-motion-ease:cubic-bezier(.22,1,.36,1);
  --vf-motion-ease-soft:cubic-bezier(.2,.8,.2,1);
}

@keyframes vfFadeInLeft{
  from{opacity:0;transform:translate3d(-34px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes vfFadeInRight{
  from{opacity:0;transform:translate3d(36px,0,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes vfFadeInUp{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes vfScaleIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@keyframes vfFloatSoft{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
@keyframes vfFloatSoftAlt{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,7px,0)}
}
@keyframes vfGlowPulse{
  0%,100%{opacity:.62;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes vfUnderlineReveal{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}
@keyframes vfStatusPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(25,170,112,.12)}
  50%{box-shadow:0 0 0 9px rgba(25,170,112,.04)}
}

/* Entrada principal: equivalente profissional ao animate__fadeInLeft. */
.site-header .brand{
  animation:vfFadeInLeft .72s var(--vf-motion-ease) both;
}
.site-header .desktop-nav{
  animation:vfFadeInUp .62s .10s var(--vf-motion-ease) both;
}
.site-header .header-actions{
  animation:vfFadeInRight .68s .16s var(--vf-motion-ease) both;
}
.hero-copy>.eyebrow{
  animation:vfFadeInLeft .62s .08s var(--vf-motion-ease) both;
}
.hero-copy>h1{
  animation:vfFadeInLeft .76s .16s var(--vf-motion-ease) both;
}
.hero-copy>.hero-lead{
  animation:vfFadeInLeft .74s .26s var(--vf-motion-ease) both;
}
.hero-copy>.hero-actions{
  animation:vfFadeInUp .68s .36s var(--vf-motion-ease) both;
}
.hero-copy>.hero-proof{
  animation:vfFadeInUp .66s .46s var(--vf-motion-ease) both;
}
.product-stage{
  animation:vfFadeInRight .88s .20s var(--vf-motion-ease) both;
}

.hero h1 em{
  position:relative;
  display:inline-block;
  isolation:isolate;
}
.hero h1 em::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:2%;
  right:0;
  bottom:.04em;
  height:.17em;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(142,229,189,.28),rgba(11,107,70,.18));
  transform:scaleX(0);
  transform-origin:left center;
  animation:vfUnderlineReveal .72s .82s var(--vf-motion-ease) forwards;
}
.status-dot{animation:vfStatusPulse 2.8s ease-in-out infinite}

/* Header ganha profundidade somente após o início da rolagem. */
.site-header{
  transition:background var(--vf-motion-fast) ease,box-shadow var(--vf-motion-fast) ease,border-color var(--vf-motion-fast) ease;
}
.site-header.is-scrolled{
  background:rgba(250,253,251,.94);
  border-bottom-color:rgba(195,217,205,.94);
  box-shadow:0 12px 34px rgba(3,48,32,.075);
}
.desktop-nav a{
  position:relative;
  transition:color var(--vf-motion-fast) ease;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--vf-motion-fast) var(--vf-motion-ease);
}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)}

/* Botões com feedback mais refinado. */
.button{
  position:relative;
  overflow:hidden;
  will-change:transform;
  transition:transform var(--vf-motion-fast) var(--vf-motion-ease),box-shadow var(--vf-motion-fast) ease,border-color var(--vf-motion-fast) ease,background var(--vf-motion-fast) ease;
}
.button::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 47%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .7s var(--vf-motion-ease);
  pointer-events:none;
}
.button:hover::before{transform:translateX(130%)}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.985)}
.hero-actions .button span,.module-sales-card>a span{transition:transform var(--vf-motion-fast) var(--vf-motion-ease)}
.hero-actions .button:hover span,.module-sales-card>a:hover span{transform:translateX(4px)}

/* Mockup: flutuação leve e inclinação controlada por ponteiro. */
.stage-glow{
  animation:vfGlowPulse 5s ease-in-out infinite;
  transform-origin:center;
}
.dashboard-mockup{
  --vf-tilt-x:0deg;
  --vf-tilt-y:0deg;
  transform:perspective(1200px) rotateY(calc(-3deg + var(--vf-tilt-y))) rotateX(calc(1deg + var(--vf-tilt-x)));
  transform-style:preserve-3d;
  transition:transform .24s var(--vf-motion-ease-soft),box-shadow .3s ease;
  will-change:transform;
}
.product-stage:hover .dashboard-mockup{box-shadow:0 40px 100px rgba(3,48,32,.23)}
.floating-card.new-order{animation:vfFloatSoft 4.8s ease-in-out infinite}
.floating-card.payment{animation:vfFloatSoftAlt 5.5s .35s ease-in-out infinite}

/* Revelação progressiva ao entrar na tela. */
.vf-reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  filter:blur(2px);
  transition:opacity .68s var(--vf-motion-ease),transform .68s var(--vf-motion-ease),filter .68s var(--vf-motion-ease);
  transition-delay:var(--vf-reveal-delay,0ms);
}
.vf-reveal.vf-reveal-left{transform:translate3d(-30px,0,0)}
.vf-reveal.vf-reveal-right{transform:translate3d(30px,0,0)}
.vf-reveal.vf-reveal-scale{transform:scale(.965)}
.vf-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

/* Microinterações nos cartões sem excesso visual. */
.module-sales-card,.feature-grid article,.offer-card,.comparison-card,.steps-list article,.demo-operation-card,.reliability-card,.final-card{
  will-change:transform;
  transition:transform .28s var(--vf-motion-ease),box-shadow .28s ease,border-color .28s ease;
}
.module-sales-card:hover,.offer-card:hover,.comparison-card:hover,.steps-list article:hover,.demo-operation-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 58px rgba(4,54,37,.11);
}
.module-sales-card{isolation:isolate}
.module-sales-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.72) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .85s var(--vf-motion-ease);
  pointer-events:none;
}
.module-sales-card:hover::before{transform:translateX(130%)}
.module-sales-card>*{position:relative;z-index:1}
.feature-grid article:hover .feature-icon,.module-sales-card:hover .module-card-icon{
  transform:translateY(-2px) rotate(-3deg) scale(1.04);
}
.feature-icon,.module-card-icon{transition:transform .28s var(--vf-motion-ease),box-shadow .28s ease}

/* Números da faixa de confiança recebem realce ao aparecer. */
.trust-grid strong{
  transition:transform .3s var(--vf-motion-ease),color .3s ease;
}
.trust-grid div:hover strong{transform:translateY(-2px) scale(1.035);color:var(--green)}

@media(max-width:760px){
  .site-header .brand,.site-header .header-actions,.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.hero-lead,.hero-copy>.hero-actions,.hero-copy>.hero-proof,.product-stage{
    animation-duration:.58s;
  }
  .dashboard-mockup{transform:none!important}
  .floating-card.new-order,.floating-card.payment{animation-duration:5.8s}
  .vf-reveal,.vf-reveal.vf-reveal-left,.vf-reveal.vf-reveal-right{transform:translate3d(0,20px,0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .vf-reveal,.vf-reveal.vf-reveal-left,.vf-reveal.vf-reveal-right,.vf-reveal.vf-reveal-scale{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .dashboard-mockup{transform:none!important}
}