/* SCOPO — camada de polimento (motion, botões, navegação, acessibilidade)
   Carregado DEPOIS de style.css. Tudo aqui respeita prefers-reduced-motion. */

:root{
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --header-h: 76px;
  --text-dim: #5A5A5A;
}
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ---------- transição entre páginas (View Transitions API) ---------- */
@view-transition{ navigation: auto; }
.site-header{ view-transition-name: site-header; }
.scroll-progress{ view-transition-name: scroll-progress; }
::view-transition-old(root){ animation: vt-out .22s ease both; }
::view-transition-new(root){ animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out{ to{ opacity:0; transform: translateY(-8px); } }
@keyframes vt-in{ from{ opacity:0; transform: translateY(14px); } }
::view-transition-group(site-header),
::view-transition-group(scroll-progress){ animation-duration: 0s; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation: none; }
}

/* ---------- acessibilidade ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-primary:focus-visible, .btn-outline:focus-visible{ outline-offset: 5px; }
.field-input:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
.skip-link{
  position: fixed; left: 16px; top: -64px; z-index: 10000;
  background: var(--brand); color: #0A0A0A; font: 700 14px 'Work Sans', sans-serif;
  padding: 12px 18px; border-radius: 2px; transition: top .2s var(--ease-out);
}
.skip-link:focus{ top: 16px; }
/* textos que estavam abaixo de 4.5:1 de contraste sobre fundo escuro */
.scopo-root [style*="color:#5A5A5A"]{ color: #8A8A8A !important; }
.social-box{ color: #9A9A9A; }
.body-txt{ color: #B4B4B4; }
.footlink{ color: #B0B0B0; }
.footlink:hover{ color: var(--brand); }
h1.h1, h2.h1, h3.h1, h2.h2, h3.h3{ margin: 0; }
h3.card-title{ margin: 0; }

/* cursor nativo em campos de formulário */
.scopo-root :is(input, textarea, select), .scopo-root :is(input, textarea, select) *{ cursor: auto !important; }
.scopo-root:has(:is(input, textarea, select):hover) :is(.cursor-dot, .cursor-ring){ opacity: 0; }

/* ---------- barra de progresso de leitura ---------- */
.scroll-progress{
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9990; pointer-events: none;
  background: transparent;
}
.scroll-progress > span{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 40%, transparent), var(--brand));
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 70%, transparent);
  transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}
@supports (animation-timeline: scroll()){
  .scroll-progress > span{
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow{ to{ transform: scaleX(1); } }
}

/* ---------- voltar ao topo ---------- */
.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid #2E2E2E;
  background: rgba(10,10,10,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--brand); display: grid; place-items: center; padding: 0;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), border-color .2s, background .2s;
}
.to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover{ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #0A0A0A); transform: translateY(-3px); }
.to-top:active{ transform: scale(.94); }
.to-top svg{ width: 20px; height: 20px; }
.to-top .ring{ position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.to-top .ring circle{ fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 - 138.2 * var(--read, 0)); }

/* ---------- botões: uma linguagem só ---------- */
.btn-primary, .btn-outline{ cursor: pointer; will-change: transform; }
.btn-primary{
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s;
}
.btn-outline{
  transition: border-color .2s, color .2s, background .2s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:active, .btn-outline:active{ transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-primary .arrow, .btn-outline .arrow{ display: inline-block; transition: transform .3s var(--ease-spring); }
.btn-primary:hover .arrow, .btn-outline:hover .arrow,
.btn-primary:focus-visible .arrow, .btn-outline:focus-visible .arrow{ transform: translateX(6px); }
/* CTA flutuante e rodapé usavam pílula: agora seguem o mesmo corte dos demais */
.floating-cta .btn-primary, .btn-primary[style*="border-radius:999px"]{ border-radius: 2px !important; }
/* o pulso do header chama atenção 3 vezes e para */
.header-cta{ animation: cta-pulse 2.8s ease-in-out 3; }
/* link de navegação: cor suave em vez de troca seca */
.navlink, .footlink{ transition: color .2s ease; }
.footlink{ position: relative; width: fit-content; }
.footlink:hover{ transform: translateX(2px); }
a.footlink{ transition: color .2s ease, transform .2s var(--ease-out); }

/* ---------- navegação: indicador deslizante ---------- */
.nav-links{ position: relative; }
.nav-links.has-indicator .navlink::after{ display: none; }
.nav-indicator{
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; border-radius: 2px; background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 60%, transparent);
  transform: translateX(0); opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s;
}
.nav-links.has-indicator .nav-indicator.is-on{ opacity: 1; }
.navlink.is-active{ color: var(--brand); }

.nav-toggle{
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid #2E2E2E; border-radius: 2px;
  background: rgba(10,10,10,.6); cursor: pointer; position: relative; flex: 0 0 auto;
  transition: border-color .2s, background .2s;
}
.nav-toggle:hover{ border-color: var(--brand); }
.nav-toggle span{
  position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out), opacity .2s, background .2s;
}
.nav-toggle span:nth-child(1){ top: 15px; }
.nav-toggle span:nth-child(2){ top: 21px; width: auto; }
.nav-toggle span:nth-child(3){ top: 27px; }
.nav-toggle[aria-expanded="true"] span{ background: var(--brand); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top: 21px; transform: rotate(-45deg); }
.nav-cta-mobile{ display: none !important; }

@media (max-width: 900px){
  .site-header{
    flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important;
    padding-top: 12px !important; padding-bottom: 12px !important; align-items: center !important;
  }
  .site-header .logo-link img{ height: 34px !important; }
  .site-header > .header-cta{ display: none !important; }
  .nav-toggle{ display: block; }
  /* gaveta de navegação (absolute porque o header tem backdrop-filter) */
  .nav-links{
    position: absolute !important; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--header-h)); height: calc(100svh - var(--header-h));
    flex-direction: column !important; flex-wrap: nowrap !important; justify-content: center; align-items: stretch !important;
    gap: 6px !important; padding: 24px var(--pad-x) 40px; box-sizing: border-box;
    background: radial-gradient(ellipse 520px 320px at 85% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), rgb(5,5,5);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none;
    transition: clip-path .55s var(--ease-out), visibility 0s linear .55s;
  }
  html.nav-open .nav-links{ clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto; transition: clip-path .55s var(--ease-out), visibility 0s; }
  html.nav-open{ overflow: hidden; }
  .nav-links .navlink{
    font-family: 'Poppins', sans-serif !important; font-size: clamp(26px, 8vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.3px;
    padding: 14px 0 !important; border-bottom: 1px solid #1E1E1E;
    opacity: 0; transform: translateY(18px);
    transition: opacity .4s ease, transform .5s var(--ease-out), color .2s;
  }
  .nav-links .navlink::after{ display: none; }
  html.nav-open .nav-links .navlink{ opacity: 1; transform: none; }
  html.nav-open .nav-links .navlink:nth-child(1){ transition-delay: .10s; }
  html.nav-open .nav-links .navlink:nth-child(2){ transition-delay: .16s; }
  html.nav-open .nav-links .navlink:nth-child(3){ transition-delay: .22s; }
  html.nav-open .nav-links .navlink:nth-child(4){ transition-delay: .28s; }
  html.nav-open .nav-links .navlink:nth-child(5){ transition-delay: .34s; }
  .nav-cta-mobile{ display: inline-flex !important; margin-top: 22px; justify-content: center; opacity: 0; transform: translateY(18px); transition: opacity .4s ease .4s, transform .5s var(--ease-out) .4s, box-shadow .25s; }
  html.nav-open .nav-cta-mobile{ opacity: 1; transform: none; }
  .nav-indicator{ display: none; }
}

/* ---------- scroll reveal: sem blur, escalonado por card ---------- */
[data-reveal]{
  filter: none; will-change: opacity, transform;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-revealed{ transform: none; filter: none; will-change: auto; }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="left"].is-revealed, [data-reveal="right"].is-revealed{ transform: none; }
/* cards entram um a um depois que a seção aparece */
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card{
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), border-color .2s;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
[data-reveal]:not(.is-revealed) > .card,
[data-reveal]:not(.is-revealed) #js-home-services-grid > .card,
[data-reveal]:not(.is-revealed) #js-servicos-list > .card,
[data-reveal]:not(.is-revealed) #js-team-grid > .card{ opacity: 0; transform: translateY(22px); }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(1){ --i: 1; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(2){ --i: 2; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(3){ --i: 3; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(4){ --i: 4; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(5){ --i: 5; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(6){ --i: 6; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(7){ --i: 7; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(8){ --i: 8; }
:is([data-reveal], #js-home-services-grid, #js-servicos-list, #js-team-grid) > .card:nth-child(9){ --i: 9; }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal]:not(.is-revealed) > .card, [data-reveal]:not(.is-revealed) #js-home-services-grid > .card,
  [data-reveal]:not(.is-revealed) #js-servicos-list > .card, [data-reveal]:not(.is-revealed) #js-team-grid > .card{ opacity: 1; transform: none; transition: none; }
}

/* ---------- parallax e cena ---------- */
/* o CSS da animação dos blobs sobrescrevia o transform do JS: agora o JS usa `translate` */
.parallax-blob{ animation-duration: 14s; }
[data-parallax], .hero-in, .hero-hud{ will-change: translate; }
.hero-layered{ position: relative; overflow: hidden; }
.hero-layered > :not(.parallax-blob):not([data-parallax]):not(.hero-hud){ position: relative; z-index: 1; }
.bg-texture--grid{ background-position: 0 0, 0 0, 0 calc(var(--bgy, 0) * 1px), 0 0, 0 0; }
/* sublinhado desenhado no destaque do título */
#js-hero-title span, h1 .hl{
  background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0% 3px no-repeat;
  padding-bottom: 4px;
  animation: underline-draw 1.1s var(--ease-out) .9s forwards;
}
@keyframes underline-draw{ to{ background-size: 100% 3px; } }
@media (prefers-reduced-motion: reduce){
  #js-hero-title span, h1 .hl{ animation: none; background-size: 100% 3px; }
}

/* brilho que segue o mouse nos cards */
.card{ position: relative; }
.card::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 62%);
  transition: opacity .3s ease; z-index: 1;
}
.card:hover::after{ opacity: 1; }
@media (hover: none), (pointer: coarse){ .card::after{ display: none; } }

/* ---------- marquee de clientes ---------- */
.clients-marquee .client-box{ height: 90px; background: #0D0D0D; border: 1px solid #1C1C1C; border-radius: 8px; }
.clients-track{ animation-duration: 38s; }

/* ---------- card de chamada no portfólio ---------- */
.card-cta{
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px;
  min-height: 100%; aspect-ratio: 1 / 1; padding: 28px; border: 1px dashed #3A3A3A; border-radius: 10px;
  color: #fff; font-family: 'Poppins', sans-serif; transition: border-color .25s, background .25s, transform .25s var(--ease-out);
}
.card-cta:hover{ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); transform: translateY(-2px); }
.card-cta strong{ font-size: 17px; line-height: 1.3; }
.card-cta small{ color: var(--brand); font: 600 12px 'Work Sans', sans-serif; letter-spacing: 1px; }

/* o CTA flutuante some quando já há outro botão de WhatsApp na tela */
.floating-cta.is-visible.is-suppressed{ opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; }
.floating-cta{ left: auto; right: 22px; bottom: 82px; }
@media (max-width: 560px){ .floating-cta{ right: 16px; bottom: 76px; } .to-top{ right: 16px; bottom: 16px; } }

/* sem hover em telas de toque */
@media (hover: none){ .btn-primary:hover, .btn-outline:hover, .card:hover{ transform: none; } }