/* ============================================================
   NEXA SALES — camada de movimento (carregada depois de nexa.css)
   Tudo é aditivo e depende da classe .motion (colocada pelo JS),
   então o site funciona igual sem JS ou com "reduzir movimento".
   ============================================================ */

/* ---------- 1. preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-content:center;justify-items:center;gap:26px;
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(61,123,247,.18),transparent 70%),
    #050B1A;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.76,0,.24,1);
}
.preloader__mark{
  display:flex;align-items:center;gap:14px;
  font-size:30px;font-weight:700;letter-spacing:-.02em;color:#fff;
  opacity:0;transform:translateY(14px);
  animation:pre-in .7s cubic-bezier(.22,.8,.24,1) forwards;
}
.preloader__mark svg{width:28px;height:28px;color:#fff;--mark-accent:var(--gold)}
.preloader__mark b{color:var(--gold)}
.preloader__bar{
  width:220px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.preloader__bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.preloader.is-loaded .preloader__bar i{transform:scaleX(1)}
.preloader.is-out{clip-path:inset(0 0 100% 0)}
.preloader.is-out .preloader__mark,
.preloader.is-out .preloader__bar{opacity:0;transition:opacity .35s ease}
@keyframes pre-in{to{opacity:1;transform:none}}
html.is-locked,html.is-locked body{overflow:hidden}

/* ---------- 2. barra de progresso de leitura ---------- */
.progress{
  position:fixed;left:0;top:0;z-index:900;
  height:3px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--gold-light) 60%,var(--gold));
  transform:scaleX(var(--p,0));transform-origin:left;
  box-shadow:0 0 18px rgba(217,167,60,.35);
  pointer-events:none;
}

/* ---------- 3. split text (palavras com máscara) ---------- */
.motion .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.motion .wi{
  display:inline-block;
  transform:translateY(115%) rotate(2deg);
  opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1),opacity .7s ease;
  transition-delay:calc(var(--i,0) * 55ms);
}
.motion .is-words .wi{transform:none;opacity:1}

/* ---------- 4. abertura do hero ---------- */
.motion .hero__eyebrow,
.motion .hero__copy p,
.motion .hero__copy .btn,
.motion .hero__meta{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform 1s cubic-bezier(.19,1,.22,1);
}
.motion .hero__figure img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
  transition:clip-path 1.5s cubic-bezier(.76,0,.24,1),transform 1.8s cubic-bezier(.19,1,.22,1);
}
.motion .hero__blob{transform:translateX(-50%) scale(.86);opacity:0;transition:transform 1.5s cubic-bezier(.19,1,.22,1),opacity .8s ease}
.motion .hero__actions{opacity:0;transform:translate(-50%,26px);transition:opacity .7s ease .9s,transform .9s cubic-bezier(.19,1,.22,1) .9s}
.motion .hero__curl{opacity:0;transition:opacity .8s ease 1.1s}
.motion .nav{opacity:0;transform:translateY(-22px);transition:opacity .8s ease,transform 1s cubic-bezier(.19,1,.22,1)}

html.is-ready .motion .nav,
.motion.is-ready .nav{opacity:1;transform:none}
.is-ready .hero__eyebrow{opacity:1;transform:none;transition-delay:.15s}
.is-ready .hero__copy p{opacity:1;transform:none;transition-delay:.5s}
.is-ready .hero__copy .btn{opacity:1;transform:none;transition-delay:.62s}
.is-ready .hero__meta{opacity:1;transform:none;transition-delay:.7s}
.is-ready .hero__figure img{clip-path:inset(0 0 0 0);transform:scale(1)}
.is-ready .hero__blob{opacity:1}
.is-ready .hero__actions{opacity:1;transform:translate(-50%,0)}
.is-ready .hero__curl{opacity:1}

/* ---------- 5. parallax (só desktop) ---------- */
@media (min-width:1101px){
  .motion .hero__figure{transform:translateX(-50%) translate3d(0,var(--py,0px),0)}
  .motion.is-ready .hero__blob{transform:translateX(-50%) translate3d(0,var(--py,0px),0) scale(1)}
  .motion .hero__burst{transform:translate3d(0,var(--py,0px),0)}
  .motion .shot__media img,
  .motion .shot__media svg.funnel,
  .motion .shot__media svg.panelart{
    transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1));
    will-change:transform;
  }
  .motion .services__shot{transform:translate3d(0,var(--py,0px),0)}
  .motion .band__row span:nth-child(1){transform:translate3d(var(--bx,0px),0,0)}
  .motion .band__row span:nth-child(5){transform:translate3d(calc(var(--bx,0px) * -1),0,0)}
  .motion .final__burst{transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg))}
}

/* ---------- 6. cursor personalizado ---------- */
.cursor{
  position:fixed;left:0;top:0;z-index:950;
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1.5px solid rgba(217,167,60,.75);border-radius:50%;
  pointer-events:none;mix-blend-mode:normal;
  transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scale(var(--cs,1));
  transition:width .25s ease,height .25s ease,border-color .25s ease,background-color .25s ease,opacity .3s ease;
}
.cursor__dot{
  position:fixed;left:0;top:0;z-index:951;
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--gold);pointer-events:none;
  transform:translate3d(var(--dx,-100px),var(--dy,-100px),0);
}
.cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(217,167,60,.12);border-color:rgba(217,167,60,.9)}
.cursor.is-light{border-color:rgba(8,20,40,.55)}
.cursor.is-light.is-hover{background:rgba(8,20,40,.08)}
.cursor.is-hidden{opacity:0}

/* ---------- 7. tilt 3D + brilho nos cards ---------- */
.motion .tilt{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0);
  transition:transform .7s cubic-bezier(.19,1,.22,1),box-shadow .5s ease;
  transform-style:preserve-3d;
}
.motion .tilt.is-live{transition:transform .16s ease-out}
.motion .member:hover,.motion .work:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)}
.glare{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 62%);
}
.motion .tilt:hover .glare{opacity:1}
.motion .member .glare{background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(61,123,247,.16),transparent 62%)}

/* ---------- 8. holofote que segue o mouse ---------- */
.motion .spot{position:relative}
.motion .spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),rgba(61,123,247,.14),transparent 62%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0;
}
.motion .spot:hover::before{opacity:1}
.motion .spot>*{position:relative;z-index:1}

/* ---------- 9. linhas do funil em sequência ---------- */
.motion .funnel__stage{
  opacity:0;transform:translateX(-26px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.19,1,.22,1);
}
.motion .is-in .funnel__stage{opacity:1;transform:none}
.motion .is-in .funnel__stage:nth-of-type(1){transition-delay:.05s}
.motion .is-in .funnel__stage:nth-of-type(2){transition-delay:.18s}
.motion .is-in .funnel__stage:nth-of-type(3){transition-delay:.31s}
.motion .is-in .funnel__stage:nth-of-type(4){transition-delay:.44s}

/* linha de tendência desenhando */
.motion .panelart__trend{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .3s;
}
.motion .is-in .panelart__trend{stroke-dashoffset:0}
.motion .panelart__dots circle{opacity:0;transition:opacity .4s ease}
.motion .is-in .panelart__dots circle{opacity:1}
.motion .is-in .panelart__dots circle:nth-child(1){transition-delay:.6s}
.motion .is-in .panelart__dots circle:nth-child(2){transition-delay:.9s}
.motion .is-in .panelart__dots circle:nth-child(3){transition-delay:1.2s}
.motion .is-in .panelart__dots circle:nth-child(4){transition-delay:1.5s}
.motion .is-in .panelart__dots circle:nth-child(5){transition-delay:1.8s}
.motion .panelart__bars rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.motion .is-in .panelart__bars rect{transform:scaleY(1)}
.motion .is-in .panelart__bars rect:nth-child(2){transition-delay:.08s}
.motion .is-in .panelart__bars rect:nth-child(3){transition-delay:.16s}
.motion .is-in .panelart__bars rect:nth-child(4){transition-delay:.24s}
.motion .is-in .panelart__bars rect:nth-child(5){transition-delay:.32s}

/* ---------- 10. marquee controlado por JS ---------- */
.motion .marquee__track{animation:none;transform:translate3d(calc(var(--mq,0) * -1%),0,0)}
.motion .marquee__set{transform:skewX(var(--mskew,0deg));transition:transform .4s ease}

/* ---------- 11. detalhes ---------- */
.motion .svc a{overflow:hidden}
.motion .svc a::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(217,167,60,.16),transparent 70%);
  transform:translateX(-100%);transition:transform .6s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.motion .svc a{position:relative}
.motion .svc a:hover::after{transform:translateX(0)}
.motion .goals__list li{
  transform:translateY(14px);opacity:0;
  transition:opacity .6s ease,transform .8s cubic-bezier(.19,1,.22,1);
}
.motion .is-in .goals__list li{opacity:1;transform:none}
.motion .is-in .goals__list li:nth-child(2){transition-delay:.07s}
.motion .is-in .goals__list li:nth-child(3){transition-delay:.14s}
.motion .is-in .goals__list li:nth-child(4){transition-delay:.21s}
.motion .is-in .goals__list li:nth-child(5){transition-delay:.28s}
.motion .is-in .goals__list li:nth-child(6){transition-delay:.35s}

/* ícones dos pilares reagindo ao hover da coluna */
.motion .stat{transition:background-color .4s ease}
.motion .stat:hover{background:rgba(61,123,247,.05)}
.motion .stat__ico{transition:transform .5s cubic-bezier(.19,1,.22,1),color .4s ease}
.motion .stat:hover .stat__ico{transform:translateY(-4px) scale(1.08)}

/* anel do mercado gira de leve no hover do card */
.motion .mcard .ring svg:not(.ring__ico){transition:transform .8s cubic-bezier(.19,1,.22,1)}
.motion .mcard:hover .ring svg:not(.ring__ico){transform:rotate(-70deg)}

@media (prefers-reduced-motion:reduce){
  .preloader{display:none}
  .cursor,.cursor__dot,.progress{display:none}
  .motion .wi{transform:none;opacity:1;transition:none}
  .motion .hero__eyebrow,.motion .hero__copy p,.motion .hero__copy .btn,
  .motion .hero__meta,.motion .nav,.motion .hero__actions,.motion .hero__curl{opacity:1;transform:none}
  .motion .hero__figure img{clip-path:none;transform:none}
  .motion .hero__blob{opacity:1;transform:translateX(-50%)}
  .motion .funnel__stage,.motion .goals__list li{opacity:1;transform:none}
  .motion .panelart__trend{stroke-dashoffset:0}
  .motion .panelart__dots circle{opacity:1}
  .motion .panelart__bars rect{transform:none}
  .motion .marquee__track{transform:none}
}