/* =========================================================
   Estúdio Nasser — camada de motion
   Tudo aqui só age quando <html> tem .m-on (definido no <head>
   apenas se o visitante não pediu menos movimento). Se o JS
   falhar, .m-safe revela tudo depois de alguns segundos.
   ========================================================= */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);      /* expo out: revelações */
  --e-io:cubic-bezier(.77,0,.18,1);      /* máscaras e cortinas */
  --e-soft:cubic-bezier(.33,1,.68,1);    /* hovers */
}

/* ---------- utilitário: palavras com máscara ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .02em .1em;margin:-.14em -.02em -.1em}
.wi{display:inline-block}
html.m-on .wi{translate:0 112%;transition:translate .95s var(--e-out);transition-delay:calc(var(--d,0ms) + var(--i,0) * 42ms)}
html.m-on .in .wi,html.m-on .in.wi,html.m-safe .wi{translate:0 0}

/* ---------- revelação: subir ---------- */
html.m-on :is(.hero-sub,.s-hero .btn,.prob-num,.prob-item,.etapas-head .k,.etapa,.etapas-foot,.depo-text,.depo-name,.depo-nav,.svc-col,.fer-text p,.fer-sign,.form .field,.form .send,.ready-sub,.arrow-down,.card .lbl,.case-info .row,.case-info .desc,.topbar,.sf-brand > *,.sf-col,.sf-bar,.depo-quote,.car-sec){
  opacity:0;translate:0 26px;
  transition:opacity .8s var(--e-out),translate .9s var(--e-out);transition-delay:var(--d,0ms)}
html.m-on :is(.hero-sub,.s-hero .btn,.prob-num,.prob-item,.etapas-head .k,.etapa,.etapas-foot,.depo-text,.depo-name,.depo-nav,.svc-col,.fer-text p,.fer-sign,.form .field,.form .send,.ready-sub,.arrow-down,.card .lbl,.case-info .row,.case-info .desc,.topbar,.sf-brand > *,.sf-col,.sf-bar,.depo-quote,.car-sec).in,
html.m-safe :is(.hero-sub,.s-hero .btn,.prob-num,.prob-item,.etapas-head .k,.etapa,.etapas-foot,.depo-text,.depo-name,.depo-nav,.svc-col,.fer-text p,.fer-sign,.form .field,.form .send,.ready-sub,.arrow-down,.card .lbl,.case-info .row,.case-info .desc,.topbar,.sf-brand > *,.sf-col,.sf-bar,.depo-quote,.car-sec){opacity:1;translate:0 0}
html.m-on .car-sec{translate:0 60px}

/* ---------- revelação: imagens com máscara + escala interna ---------- */
html.m-on :is(.s-prob .mesa,.s-met .revista,.retr,.mon,.case .big,.case .trio > div,.card .img){
  clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--e-io);transition-delay:var(--d,0ms)}
html.m-on :is(.s-prob .mesa,.s-met .revista,.retr,.mon){scale:1.12;transition:clip-path 1.25s var(--e-io),scale 1.8s var(--e-out);transition-delay:var(--d,0ms)}
html.m-on :is(.case .big,.case .trio > div,.card .img) img{scale:1.14;transition:scale 1.8s var(--e-out),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms),0ms}
html.m-on :is(.s-prob .mesa,.s-met .revista,.retr,.mon,.case .big,.case .trio > div,.card .img).in,
html.m-safe :is(.s-prob .mesa,.s-met .revista,.retr,.mon,.case .big,.case .trio > div,.card .img){clip-path:inset(0);scale:1}
html.m-on :is(.case .big,.case .trio > div,.card .img).in img,html.m-safe :is(.case .big,.case .trio > div,.card .img) img{scale:1}
/* a xícara desfocada flutua por cima, mais tarde */
html.m-on .cafe{opacity:0;translate:0 50px;transition:opacity 1.2s var(--e-out) .35s,translate 1.4s var(--e-out) .35s}
html.m-on .cafe.in,html.m-safe .cafe{opacity:1;translate:0 0}

/* ---------- linhas que se desenham ---------- */
html.m-on :is(.rule,.underline){scale:0 1;transform-origin:left center;transition:scale 1.1s var(--e-io);transition-delay:var(--d,0ms)}
html.m-on :is(.svc-vline,.etapa-line){scale:1 0;transform-origin:center top;transition:scale 1.2s var(--e-io);transition-delay:var(--d,0ms)}
html.m-on :is(.rule,.underline,.svc-vline,.etapa-line).in,html.m-safe :is(.rule,.underline,.svc-vline,.etapa-line){scale:1 1}
@media (max-width:1099.98px){
  html.m-on .svc-vline{scale:0 1;transform-origin:center}
}
html.m-on .sf-h{background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 1px no-repeat;border-bottom-color:transparent;transition:background-size 1.1s var(--e-io) .15s}
html.m-on .sf-col.in .sf-h,html.m-safe .sf-h{background-size:100% 1px}

/* ---------- surgir com escala (selos, checks, foto) ---------- */
html.m-on :is(.chk,.depo-photo){opacity:0;scale:.55;rotate:-25deg;transition:opacity .6s var(--e-out),scale .9s var(--e-out),rotate .9s var(--e-out);transition-delay:var(--d,0ms)}
html.m-on :is(.chk,.depo-photo).in,html.m-safe :is(.chk,.depo-photo){opacity:1;scale:1;rotate:0deg}
html.m-on .depo-photo{rotate:0deg;transition-delay:.25s}

/* ---------- selo circular: entra e gira sem parar ---------- */
@keyframes spin{to{rotate:360deg}}
.circle-text{animation:spin 28s linear infinite}
html.m-on .circle-text{opacity:0;transition:opacity 1s var(--e-out) .3s}
html.m-on .circle-text.in,html.m-safe .circle-text{opacity:1}

/* ---------- escrita à mão: máscara da esquerda para a direita ---------- */
html.m-on :is(.prob-script,.ready,.sf-mark img){clip-path:inset(-30% 100% -30% -6%);transition:clip-path 1.9s cubic-bezier(.45,.05,.25,1);transition-delay:var(--d,0ms)}
html.m-on :is(.prob-script,.ready,.sf-mark img).in,html.m-safe :is(.prob-script,.ready,.sf-mark img){clip-path:inset(-30% -6% -30% -6%)}
html.m-on .ready{transition-delay:.35s}

/* ---------- blocos que sobem inteiros ---------- */
html.m-on .svc-card{opacity:0;translate:0 70px;transition:opacity 1s var(--e-out),translate 1.3s var(--e-out)}
html.m-on .svc-card.in,html.m-safe .svc-card{opacity:1;translate:0 0}
html.m-on .fer-svg{opacity:0;translate:-40px 0;transition:opacity 1.6s var(--e-out) .2s,translate 2s var(--e-out) .2s}
html.m-on .fer-svg.in,html.m-safe .fer-svg{opacity:1;translate:0 0}

/* ---------- fotos de fundo: respiram ao entrar ---------- */
html.m-on :is(.svc-bg,.fim-photo img,.fim-photo-m img,.s-phero > img){scale:1.12;transition:scale 2.2s var(--e-out)}
html.m-on :is(.svc-bg,.fim-photo img,.fim-photo-m img,.s-phero > img).in,html.m-safe :is(.svc-bg,.fim-photo img,.fim-photo-m img,.s-phero > img){scale:1}
.fim-photo,.fim-photo-m{overflow:hidden}

/* ---------- ABERTURA (home) ---------- */
html.m-on .s-hero .hero-img{clip-path:inset(0 0 0 100%);scale:1.16;transition:clip-path 1.35s var(--e-io),scale 2s var(--e-out)}
html.m-on .s-hero .hero-oval{clip-path:ellipse(0% 0% at 50% 55%);transition:clip-path 1.3s var(--e-io) .55s}
html.m-on .s-hero .hero-title{--d:.18s}
html.m-on .s-hero .hero-sub{--d:.85s}
html.m-on .s-hero .btn{--d:1s}
html.m-on .s-hero.in .hero-img,html.m-safe .s-hero .hero-img{clip-path:inset(0);scale:1}
html.m-on .s-hero.in .hero-oval,html.m-safe .s-hero .hero-oval{clip-path:ellipse(75% 75% at 50% 50%)}
html.m-on .s-hero.in :is(.hero-sub,.btn){opacity:1;translate:0 0}

/* barra de menu: itens entram em sequência */
html.m-on .menubar :is(.nav-logo,.nav-links li,.nav-cta,.nav-toggle){opacity:0;translate:0 -10px;transition:opacity .7s var(--e-out),translate .8s var(--e-out);transition-delay:var(--d,0ms)}
html.m-on .menubar.in :is(.nav-logo,.nav-links li,.nav-cta,.nav-toggle),html.m-safe .menubar :is(.nav-logo,.nav-links li,.nav-cta,.nav-toggle){opacity:1;translate:0 0}

/* progresso de leitura na borda inferior da barra */
.scroll-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);transform-origin:left center;scale:0 1;pointer-events:none}

/* ---------- HOVERS ---------- */
/* botões: preenchimento sobe + texto rola */
.btn,.form .send{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.form .send::before{content:'';position:absolute;inset:0;z-index:-1;background:#8eaeba;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--e-soft)}
.btn:hover::before,.form .send:hover::before{transform:scaleY(1)}
.btn:hover,.form .send:hover{background:var(--blue)}
.btn:active,.form .send:active{scale:.97}
.roll{display:inline-grid;overflow:hidden;vertical-align:top}
.roll > span{grid-area:1/1;transition:transform .45s var(--e-soft)}
.roll > span + span{transform:translateY(105%)}
:is(.btn,.send,.nav-cta,.sf-cta):hover .roll > span:first-child{transform:translateY(-105%)}
:is(.btn,.send,.nav-cta,.sf-cta):hover .roll > span + span{transform:translateY(0)}

/* pílulas de seta */
.pill,.nav-cta img,.sf-cta img{transition:transform .45s var(--e-soft)}
a:hover .pill,a:hover > .nav-cta img,.nav-cta:hover img,.sf-cta:hover img{transform:translateX(6px)}

/* setas do depoimento */
.depo-nav button img{transition:transform .35s var(--e-soft)}
.depo-nav button[data-depo-prev]:hover img{transform:translateX(-6px)}
.depo-nav button[data-depo-next]:hover img{transform:translateX(6px)}
.depo-nav button:hover{opacity:1}

/* ícones sociais */
:is(.socials,.sf-social,.mo-social) a{transition:transform .35s var(--e-soft),opacity .2s}
:is(.socials,.sf-social,.mo-social) a:hover{transform:translateY(-3px);opacity:.7}

/* links da barra superior das páginas internas */
.topbar a{position:relative}
.topbar a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-soft)}
.topbar a:hover::after{transform:scaleX(1);transform-origin:left}
.topbar a:hover{opacity:1}

/* cards: legenda acompanha */
.card .lbl span:first-child{transition:translate .45s var(--e-soft)}
.card:hover .lbl span:first-child{translate:4px 0}

/* campos do formulário */
.field{position:relative}
@keyframes shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
.field.shake{animation:shake .45s var(--e-soft)}

/* menu mobile: cortina de cima para baixo */
.menu-overlay{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-io),opacity .3s,visibility .7s}
.menu-overlay.open{clip-path:inset(0)}

/* ---------- cursor contextual (só com mouse) ---------- */
.cursor-tag{position:fixed;left:0;top:0;z-index:70;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:var(--blue);color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;
  font:400 10.5px/1.25 var(--sans);letter-spacing:1.3px;text-transform:uppercase;pointer-events:none;
  scale:.2;opacity:0;transition:scale .45s var(--e-out),opacity .35s var(--e-out)}
.cursor-tag.on{scale:1;opacity:1}

/* ---------- transição entre páginas ---------- */
.pt-curtain,html.pt-in body::after{position:fixed;inset:0;z-index:100;pointer-events:none;
  background:var(--blue) url('../img/logo-nasser-claro.png') center/190px auto no-repeat}
html.pt-in body::after{content:'';transition:clip-path .75s var(--e-io)}
html.pt-in.pt-go body::after{clip-path:inset(0 0 100% 0)}
.pt-curtain{clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--e-io);pointer-events:auto}
.pt-curtain.on{clip-path:inset(0)}

/* ---------- celular: mais rápido e com menos espera ---------- */
@media (max-width:1099.98px){
  html.m-on .wi{transition-duration:.6s;transition-delay:calc(var(--d,0ms) * .5 + var(--i,0) * 22ms)}
  html.m-on :is(.hero-sub,.s-hero .btn,.prob-num,.prob-item,.etapas-head .k,.etapa,.etapas-foot,.depo-text,.depo-name,.depo-nav,.svc-col,.fer-text p,.fer-sign,.form .field,.form .send,.ready-sub,.arrow-down,.card .lbl,.case-info .row,.case-info .desc,.topbar,.sf-brand > *,.sf-col,.sf-bar,.depo-quote,.car-sec){
    translate:0 16px;transition-duration:.5s,.6s;transition-delay:calc(var(--d,0ms) * .45)}
  html.m-on .car-sec{translate:0 24px}
  html.m-on :is(.s-prob .mesa,.s-met .revista,.retr,.mon,.case .big,.case .trio > div,.card .img){transition-duration:.75s,1s;transition-delay:calc(var(--d,0ms) * .4)}
  html.m-on :is(.case .big,.case .trio > div,.card .img) img{transition-duration:1s,.6s;transition-delay:0ms}
  html.m-on .cafe{transition-delay:.1s}
  html.m-on :is(.rule,.underline,.svc-vline,.etapa-line){transition-duration:.7s;transition-delay:calc(var(--d,0ms) * .4)}
  html.m-on :is(.chk,.depo-photo){transition-duration:.45s,.6s,.6s;transition-delay:calc(var(--d,0ms) * .4)}
  html.m-on :is(.prob-script,.ready,.sf-mark img){transition-duration:1.1s;transition-delay:0ms}
  html.m-on .svc-card{translate:0 30px;transition-duration:.6s,.8s}
  html.m-on .fer-svg{transition-duration:1s,1.2s;transition-delay:0ms}
  html.m-on .circle-text{transition-delay:0ms}
  html.m-on .s-hero .hero-sub{--d:.6s} html.m-on .s-hero .btn{--d:.7s}
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .circle-text{animation:none}
  .menu-overlay{clip-path:none}
  .pt-curtain{display:none}
}

/* ---------- intro: primeira visita da sessão ---------- */
html.intro body{overflow:hidden}
html.intro body::after,html.intro body::before{position:fixed;z-index:200;pointer-events:none}
/* painel creme que cobre o site e sobe no fim */
html.intro body::after{content:'';inset:0;background:var(--bg);
  animation:intro-out .85s var(--e-io) 1.55s forwards}
/* símbolo desenhado da esquerda para a direita */
html.intro body::before{content:'';z-index:201;left:50%;top:50%;width:min(92px,24vw);aspect-ratio:133/119;
  translate:-50% -50%;background:url('../img/simbolo-nasser.png') center/contain no-repeat;
  clip-path:inset(0 100% 0 0);
  animation:intro-draw 1.05s cubic-bezier(.65,0,.35,1) .15s forwards,intro-up .7s var(--e-io) 1.45s forwards}
@keyframes intro-draw{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-up{to{opacity:0;translate:-50% -90%}}
@keyframes intro-out{to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){html.intro body::after,html.intro body::before{display:none}html.intro body{overflow:auto}}