/* =========================================================
   LEVEZA + ACABAMENTO (2026-11-13) · vem por último no index.html · JS: js/luz.js
   1) Nada de desfoque (backdrop-filter) por cima da cena 3D: cada desfoque sobre um canvas
      que muda a cada quadro é refeito a cada quadro, e é o efeito mais caro do compositor.
      No lugar, "vidro" de tinta + gradiente + borda de luz, que custa quase nada.
   2) Seções fora da tela não são desenhadas até chegar perto (content-visibility).
   3) Card de etapas da hero: luz que segue o mouse, barra dourada, número aceso e seta
      em cada etapa. Os números da faixa também reagem.
   4) Cartões (serviços, plataforma, contratar): o mesmo brilho que segue o mouse.
   ========================================================= */

/* ---------- 1. vidro sem desfoque sobre a hero ---------- */
.city-tag, .city-stats, .city-busca, .city-steps, .vhero-btn.ghost,
body.on-hero nav, body.on-hero nav.is-liquido {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.city-tag, .city-stats, .city-busca {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgba(12, 12, 14, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}
.vhero-btn.ghost { background: rgba(12, 12, 14, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .14); }
body.on-hero nav, body.on-hero nav.is-liquido {
  background:
    radial-gradient(160px 80px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    rgba(10, 10, 12, .62) !important;
}
body.light-theme .city-tag, body.light-theme .city-stats, body.light-theme .city-busca {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78)) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19, 32, 30, .1) !important;
}

/* ---------- 2. não desenhar o que está longe da tela ---------- */
#plataforma, #contratar, #projetos, #ferramentas, #briefing, #about, #stack, #work, #abordagem, #conteudo, #contact, footer.rod {
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}

/* ---------- 3. card de etapas da hero ---------- */
.city-steps {
  --mx: 50%; --my: 50%;
  padding: calc(10 * var(--u)) calc(12 * var(--u)) !important;
  background:
    radial-gradient(calc(260 * var(--u)) calc(180 * var(--u)) at var(--mx) var(--my), rgba(229, 169, 99, .12), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .06)),
    rgba(10, 10, 12, .66) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .4) !important;
}
.city-steps li { position: relative; border-radius: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); transition: background-color .2s ease; }
/* barra dourada à esquerda: cresce do meio ao passar o mouse e fica cheia na etapa ativa */
.city-steps li::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: #e5a963;
  transform: scaleY(0); transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.city-steps li.is-active::before { transform: scaleY(1); top: 12%; bottom: 12%; }
.cs-head { position: relative; }
/* seta que aparece ao lado do título */
.cs-head::after {
  content: "→"; position: absolute; right: calc(4 * var(--u)); top: 50%; color: #e5a963; font-size: calc(16 * var(--u));
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1);
}
.cs-num { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .25s ease !important; }
.cs-title { transition: color .2s ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1) !important; display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .city-steps li:hover { background: rgba(255, 255, 255, .055); }
  .city-steps li:hover::before { transform: scaleY(1); }
  .city-steps li:hover .cs-num { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(229, 169, 99, .14), 0 0 22px rgba(229, 169, 99, .3); }
  .city-steps li:hover .cs-title { transform: translateX(4px); }
  .city-steps li:not(.is-active):hover .cs-head::after { opacity: 1; transform: translate(0, -50%); }
}
.cs-head:active .cs-num { transform: scale(.94); }

/* números da faixa de estatísticas */
.city-stats > div { position: relative; border-radius: calc(14 * var(--u)); transition: background-color .2s ease; }
.city-stats strong { transition: color .2s ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .city-stats > div:hover { background: rgba(255, 255, 255, .06); }
  .city-stats > div:hover strong { color: #e5a963; transform: translateY(-2px); }
}
body.light-theme .city-stats > div:hover strong { color: var(--accent); }

/* ---------- 4. brilho que segue o mouse nos cartões (js/luz.js põe --lx e --ly) ---------- */
.service-card, .pf-card, .cc-card { --lx: 50%; --ly: 0%; }
@media (hover: hover) and (pointer: fine) {
  .service-card::after, .pf-card::after, .cc-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(320px 220px at var(--lx) var(--ly), rgba(229, 169, 99, .1), transparent 70%);
    transition: opacity .25s ease;
  }
  .service-card:hover::after, .pf-card:hover::after, .cc-card:hover::after { opacity: 1; }
  .service-card, .cc-card { position: relative; }
}
body.light-theme .service-card::after, body.light-theme .pf-card::after, body.light-theme .cc-card::after {
  background: radial-gradient(320px 220px at var(--lx) var(--ly), rgba(30, 58, 43, .07), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .city-steps li::before, .cs-head::after, .cs-num, .cs-title, .city-stats strong { transition: none !important; }
  .city-steps li:hover .cs-num, .city-steps li:hover .cs-title, .city-stats > div:hover strong, .cs-head:active .cs-num { transform: none !important; }
}