/* =========================================================================
   MOTION — movimento, linhas e profundidade
   Inspirações: composição em camadas, revelação por rolagem e paralaxe
   suave. Tudo com transform/opacity (GPU) e desligado em
   prefers-reduced-motion.
   ========================================================================= */

/* =========================================================================
   1. LOGO ANIMADO
   ========================================================================= */
.ev-logoanim{
  width:var(--ev-la-size,132px);
  height:var(--ev-la-size,132px);
  position:relative;flex:none;
}
.ev-logoanim__svg{width:100%;height:100%;overflow:visible}

/* Encaixe de engrenagem: sentidos opostos, com leve overshoot */
.ev-logoanim__azul{
  transform-origin:250px 250px;
  animation:ev-la-azul 1.25s cubic-bezier(.34,1.4,.5,1) both;
}
.ev-logoanim__laranja{
  transform-origin:250px 250px;
  animation:ev-la-laranja 1.35s .22s cubic-bezier(.34,1.45,.5,1) both;
}
.ev-logoanim__ponto{
  transform-origin:36px 250px;
  animation:ev-la-ponto .6s 1.4s cubic-bezier(.2,1.6,.4,1) both;
}
.ev-logoanim__orbita{
  transform-origin:250px 250px;
  opacity:0;
  animation:ev-la-orb 1s 1.5s ease-out forwards, ev-la-gira 34s 2.5s linear infinite;
}
/* Respiro: o conjunto pulsa devagar depois de assentar */
.ev-logoanim__svg{
  transform-origin:50% 50%;
  animation:ev-la-respiro 5.5s 2.2s ease-in-out infinite;
}

@keyframes ev-la-azul{
  from{transform:rotate(-132deg) scale(.62);opacity:0}
  40%{opacity:1}
  to{transform:rotate(0) scale(1);opacity:1}
}
@keyframes ev-la-laranja{
  from{transform:rotate(168deg) scale(.45);opacity:0}
  40%{opacity:1}
  to{transform:rotate(0) scale(1);opacity:1}
}
@keyframes ev-la-ponto{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes ev-la-orb{ to{opacity:1} }
@keyframes ev-la-gira{ to{transform:rotate(360deg)} }
@keyframes ev-la-respiro{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.022)}
}

/* Versão pequena no cabeçalho: sem respiro, só o encaixe uma vez */
.ev-logoanim--mini .ev-logoanim__svg{animation:none}
.ev-logoanim--mini .ev-logoanim__orbita{display:none}


/* =========================================================================
   2. LINHAS QUE SE DESENHAM
   ========================================================================= */
.ev-lines{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.ev-lines svg{width:100%;height:100%}
.ev-lines path{
  fill:none;stroke-width:1.4;
  stroke-dasharray:1600;stroke-dashoffset:1600;
}
.is-visible .ev-lines path,
.ev-lines.is-visible path{
  animation:ev-draw 2.6s var(--ev-ease-out) forwards;
}
.ev-lines path:nth-child(2){animation-delay:.25s}
.ev-lines path:nth-child(3){animation-delay:.5s}
@keyframes ev-draw{ to{stroke-dashoffset:0} }

/* Filete que cresce quando a seção entra */
.ev-rule{transform-origin:left center}
.is-visible .ev-rule{animation:ev-rule-in .7s .1s var(--ev-ease-out) both}
@keyframes ev-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* =========================================================================
   3. PARALAXE E PROFUNDIDADE
   ========================================================================= */
/* A marca d'água desloca devagar conforme a rolagem (via JS: --ev-par) */
.ev-watermark{
  transform:translate3d(0,calc(var(--ev-par,0) * 1px),0) translateY(-50%);
  will-change:transform;
}
.ev-watermark--bottom{transform:translate3d(0,calc(var(--ev-par,0) * 1px),0)}

/* Camada de brilho que segue o cursor nas seções escuras */
.ev-section--deep{position:relative;isolation:isolate}
.ev-section--deep::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--ev-mx,50%) var(--ev-my,40%),
             rgba(0,153,227,.28), transparent 62%);
  opacity:0;transition:opacity .5s var(--ev-ease);
}
.ev-section--deep:hover::before{opacity:1}


/* =========================================================================
   4. CARTÃO COM INCLINAÇÃO 3D
   ========================================================================= */
.ev-tilt{
  transform-style:preserve-3d;
  transition:transform .35s var(--ev-ease-out),box-shadow .35s var(--ev-ease);
  will-change:transform;
}
@media (hover:hover) and (min-width:960px){
  .ev-tilt:hover{
    transform:perspective(900px)
              rotateX(calc(var(--ev-ty,0) * -5deg))
              rotateY(calc(var(--ev-tx,0) * 6deg))
              translateZ(10px);
    box-shadow:0 26px 60px rgba(14,59,94,.2);
  }
  /* O conteúdo do cartão flutua um pouco à frente */
  .ev-tilt > *{transform:translateZ(24px)}
}

/* Reflexo diagonal que passa no hover */
.ev-tilt{position:relative;overflow:hidden}
.ev-tilt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .8s var(--ev-ease-out);
}
@media (hover:hover){ .ev-tilt:hover::after{transform:translateX(120%)} }


/* =========================================================================
   5. HERO COM PROFUNDIDADE NA ROLAGEM
   ========================================================================= */
.ev-hero .ev-split__body,
.ev-hero .ev-split__media{
  transform:translate3d(0,calc(var(--ev-hero-y,0) * 1px),0);
  opacity:var(--ev-hero-o,1);
  will-change:transform,opacity;
}
.ev-hero .ev-split__media{--ev-hero-y:calc(var(--ev-hero-y2,0))}

/* Retrato com leve rotação 3D no cursor */
@media (hover:hover) and (min-width:960px){
  .ev-portrait{perspective:1100px}
  .ev-portrait__img{
    transition:transform .5s var(--ev-ease-out),box-shadow .5s var(--ev-ease);
    transform-style:preserve-3d;
  }
  .ev-portrait:hover .ev-portrait__img{
    transform:rotateY(calc(var(--ev-tx,0) * -5deg)) rotateX(calc(var(--ev-ty,0) * 4deg)) scale(1.015);
    box-shadow:0 34px 80px rgba(14,59,94,.3);
  }
  .ev-portrait__badge{transition:transform .5s var(--ev-ease-out)}
  .ev-portrait:hover .ev-portrait__badge{transform:translate3d(-8px,-6px,60px)}
}


/* =========================================================================
   6. BARRA DE PROGRESSO DA LEITURA
   ========================================================================= */
.ev-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(var(--ev-scroll,0));transform-origin:left center;
  background:var(--ev-grad-brand);
  z-index:calc(var(--ev-z-nav) + 1);
  pointer-events:none;
}


/* =========================================================================
   7. REVELAÇÃO COM MAIS NUANCE
   ========================================================================= */
.ev-reveal{transform:translateY(28px) scale(.995)}
.ev-reveal.is-visible{transform:none}

/* Entrada lateral, para blocos em coluna dupla */
.ev-reveal--left{opacity:0;transform:translateX(-28px);
  transition:opacity .7s var(--ev-ease-out),transform .7s var(--ev-ease-out)}
.ev-reveal--right{opacity:0;transform:translateX(28px);
  transition:opacity .7s var(--ev-ease-out),transform .7s var(--ev-ease-out)}
.ev-reveal--left.is-visible,.ev-reveal--right.is-visible{opacity:1;transform:none}

/* Título que sobe por trás de uma máscara */
.ev-mask-up{display:block;overflow:hidden}
.ev-mask-up > span{
  display:block;transform:translateY(105%);
  transition:transform .9s var(--ev-ease-out);
}
.is-visible .ev-mask-up > span{transform:none}


/* =========================================================================
   8. NÚMEROS E DESTAQUES
   ========================================================================= */
.ev-metric__num{
  background:linear-gradient(180deg,var(--ev-blue-deep),var(--ev-blue-mid));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ev-on-dark .ev-metric__num{
  background:linear-gradient(180deg,#fff,#a9d6f2);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Sublinhado do destaque que se desenha ao entrar */
.ev-mark::after{transform-origin:left center;transform:scaleX(0);
  transition:transform .8s .3s var(--ev-ease-out)}
.is-visible .ev-mark::after,
h1:not(.ev-reveal) .ev-mark::after{transform:scaleX(1)}


/* =========================================================================
   9. BOTÃO COM BRILHO
   ========================================================================= */
.ev-btn--primary{position:relative;overflow:hidden;isolation:isolate}
.ev-btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-130%);
  transition:transform .7s var(--ev-ease-out);
}
.ev-btn--primary:hover::before{transform:translateX(130%)}


/* =========================================================================
   10. CABEÇALHO QUE ENCOLHE
   ========================================================================= */
.ev-header{transition:box-shadow var(--ev-dur) var(--ev-ease),
                     background-color var(--ev-dur) var(--ev-ease)}
.ev-header.is-scrolled .ev-header__inner{min-height:62px}
.ev-header__inner{transition:min-height var(--ev-dur) var(--ev-ease)}
.ev-header.is-scrolled .ev-brand__mono{width:36px;height:36px;font-size:.82rem}
.ev-brand__mono{transition:width var(--ev-dur) var(--ev-ease),
                          height var(--ev-dur) var(--ev-ease),
                          font-size var(--ev-dur) var(--ev-ease)}


/* =========================================================================
   TUDO DESLIGADO PARA QUEM PEDIU MENOS MOVIMENTO
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .ev-logoanim__azul,.ev-logoanim__laranja,.ev-logoanim__ponto,
  .ev-logoanim__orbita,.ev-logoanim__svg{animation:none!important;opacity:1!important;transform:none!important}
  .ev-lines path{stroke-dashoffset:0;animation:none!important}
  .ev-watermark{transform:translateY(-50%)!important}
  .ev-watermark--bottom{transform:none!important}
  .ev-tilt:hover,.ev-portrait:hover .ev-portrait__img{transform:none!important}
  .ev-tilt::after,.ev-btn--primary::before{display:none}
  .ev-hero .ev-split__body,.ev-hero .ev-split__media{transform:none!important;opacity:1!important}
  .ev-progress{display:none}
  .ev-mask-up > span{transform:none!important}
  .ev-mark::after{transform:scaleX(1)!important}
  .is-visible .ev-rule,.ev-rule{animation:none!important;transform:none!important}
  .ev-section--deep::before{display:none}
}


/* Selo do logo animado sobre o retrato */
.ev-portrait__logo{
  position:absolute;right:-18px;top:-18px;
  background:#fff;border-radius:50%;padding:10px;
  box-shadow:0 10px 30px rgba(14,59,94,.2);
  display:grid;place-items:center;
}
@media (max-width:639px){ .ev-portrait__logo{right:-8px;top:-8px;padding:7px;transform:scale(.8)} }
@media (hover:hover) and (min-width:960px){
  .ev-portrait:hover .ev-portrait__logo{transform:translate3d(6px,-6px,70px)}
  .ev-portrait__logo{transition:transform .5s var(--ev-ease-out)}
}


/* =========================================================================
   11. FAIXA ROLANTE (marquee) — usada na CX Maturity Intelligence
   ========================================================================= */
.ev-marquee{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ev-marquee__trilho{
  display:flex;width:max-content;
  animation:ev-marq 38s linear infinite;
}
.ev-marquee--rapido .ev-marquee__trilho{animation-duration:24s}
.ev-marquee--reverso .ev-marquee__trilho{animation-direction:reverse}
.ev-marquee:hover .ev-marquee__trilho{animation-play-state:paused}
.ev-marquee__grupo{display:flex;flex:none;align-items:center;gap:var(--ev-s5);padding-right:var(--ev-s5)}
@keyframes ev-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ev-tag-marq{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--ev-font-title);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ev-blue-mid);white-space:nowrap;
}
.ev-tag-marq::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ev-orange);flex:none;
}
.ev-on-dark .ev-tag-marq{color:#a9d6f2}

/* Degraus da régua CX na faixa rolante */
.ev-degrau{
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  min-width:104px;padding:12px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--ev-line);
}
.ev-degrau strong{
  font-family:var(--ev-font-title);font-weight:900;font-size:1rem;
  color:var(--ev-blue-mid);line-height:1;
}
.ev-degrau span{
  font-family:var(--ev-font-title);font-weight:700;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ev-faint);margin-top:5px;
}
.ev-degrau:nth-child(5) strong,.ev-degrau:nth-child(6) strong{color:var(--ev-orange-txt)}

@media (prefers-reduced-motion: reduce){
  .ev-marquee__trilho{animation:none}
  .ev-marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}